Skip to content

Commit d239c16

Browse files
dcstlouisdcstlouis
committed
Adoptions and Fosters now use same component
1 parent 4514739 commit d239c16

File tree

5 files changed

+128
-56
lines changed

5 files changed

+128
-56
lines changed

‎src/client/src/pages/DataView360/View/View.js

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,7 @@ import _ from 'lodash';
1515
import moment from 'moment';
1616
import ContactInfo from './components/ContactInfo';
1717
import Donations from './components/Donations';
18-
import Adoptions from './components/Adoptions';
19-
import Fosters from './components/Fosters';
18+
import AnimalInfo from './components/AnimalInfo';
2019
import VolunteerActivity from './components/VolunteerActivity';
2120
import VolunteerHistory from './components/VolunteerHistory';
2221

@@ -143,10 +142,14 @@ class View360 extends Component {
143142
<Grid item sm>
144143
<Grid container direction="column" style={{"marginTop": "1em"}}>
145144
<Donations donations={_.get(this.state, 'participantData.donations')}/>
146-
<Adoptions adoptions={_.get(this.state, 'animalData')}
147-
events={_.get(this.state, 'adoptionEvents')} />
148-
<Fosters fosters={_.get(this.state, 'animalData')}
149-
events={_.get(this.state, 'fosterEvents')} />
145+
<AnimalInfo pets={_.get(this.state, 'animalData')}
146+
events={_.get(this.state, 'adoptionEvents')}
147+
headerText={"Adoption Records"}
148+
/>
149+
<AnimalInfo pets={_.get(this.state, 'animalData')}
150+
events={_.get(this.state, 'fosterEvents')}
151+
headerText={"Foster Records"}
152+
/>
150153
<VolunteerActivity volunteer={this.extractVolunteerActivity()} />
151154
<VolunteerHistory volunteerShifts={_.get(this.state, 'participantData.shifts')} />
152155
</Grid>

‎src/client/src/pages/DataView360/View/components/Adoptions.js

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,19 @@
1-
import React, {Component} from 'react';
1+
import React, { Component } from 'react';
22
import {
33
Paper,
44
Typography,
55
Container,
66
IconButton
77
} from '@material-ui/core';
88
import LinkIcon from '@material-ui/icons/Link';
9-
import {withStyles} from '@material-ui/core/styles';
9+
import { withStyles } from '@material-ui/core/styles';
1010
import _ from 'lodash';
1111
import moment from "moment";
1212
import Grid from "@material-ui/core/Grid";
1313
import PetsIcon from "@material-ui/icons/Pets";
1414

1515
import CollapsibleTable from './CollapsibleTable';
16+
import DataTableHeader from './DataTableHeader';
1617

1718

1819
const customStyles = theme => ({
@@ -30,7 +31,7 @@ const customStyles = theme => ({
3031
border: '2px solid #000',
3132
boxShadow: theme.shadows[5],
3233
padding: theme.spacing(2, 4, 3),
33-
}
34+
}
3435
});
3536

3637
const PET_COUNT = 5;
@@ -42,26 +43,25 @@ class Adoptions extends Component {
4243
}
4344

4445
render() {
45-
const {classes} = this.props;
46+
const { classes } = this.props;
4647
const numOfPets = _.size(this.props.adoptions);
4748
const latestPets = this.getLatestPets(this.props.adoptions);
4849
const events = this.props.events;
49-
return (<Container component={Paper} style={{"marginTop": "1em"}}>
50-
<Typography variant='h5'>
51-
<Grid container style={{"margin": "0.5em"}} direction={'row'}>
52-
<Grid item className={classes.spaceIcon}>
53-
<PetsIcon color='primary' fontSize='inherit'/>
54-
</Grid>
55-
<Grid item>
56-
Adoption Records {(numOfPets > PET_COUNT) && "(Showing " + PET_COUNT + " Pets out of " + numOfPets + ")"}
57-
</Grid>
58-
<Grid item>
59-
<IconButton style={{'padding': 0, 'paddingLeft': 5}} color="primary" aria-label="link" component="span">
60-
<LinkIcon />
61-
</IconButton>
62-
</Grid>
50+
const headerText = "Adoption Records"
51+
const headerAddition = (numOfPets > PET_COUNT) ? " (Showing " + PET_COUNT + " Pets out of " + numOfPets + ")" : ""
52+
53+
return (
54+
<Container component={Paper} style={{ "marginTop": "1em" }}>
55+
<DataTableHeader
56+
headerText={headerText + headerAddition}
57+
emojiIcon={<PetsIcon color='primary' fontSize='inherit' />}
58+
>
59+
<Grid item>
60+
<IconButton style={{ 'padding': 0, 'paddingLeft': 5 }} color="primary" aria-label="link" component="span">
61+
<LinkIcon />
62+
</IconButton>
6363
</Grid>
64-
</Typography>
64+
</DataTableHeader>
6565
<CollapsibleTable data={latestPets} events={events} />
6666
</Container>
6767
);

‎src/client/src/pages/DataView360/View/components/AnimalInfo.js

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
import React, { Component } from 'react';
2+
import {
3+
Paper,
4+
Container,
5+
IconButton
6+
} from '@material-ui/core';
7+
import LinkIcon from '@material-ui/icons/Link';
8+
import { withStyles } from '@material-ui/core/styles';
9+
import _ from 'lodash';
10+
import Grid from "@material-ui/core/Grid";
11+
import PetsIcon from "@material-ui/icons/Pets";
12+
13+
import CollapsibleTable from './CollapsibleTable';
14+
import DataTableHeader from './DataTableHeader';
15+
16+
17+
const customStyles = theme => ({
18+
spaceIcon: {
19+
marginTop: 3,
20+
marginRight: 3
21+
},
22+
headerCell: {
23+
fontWeight: "bold",
24+
},
25+
paper: {
26+
position: 'absolute',
27+
width: 400,
28+
backgroundColor: theme.palette.background.paper,
29+
border: '2px solid #000',
30+
boxShadow: theme.shadows[5],
31+
padding: theme.spacing(2, 4, 3),
32+
}
33+
});
34+
35+
const PET_COUNT = 5;
36+
37+
class AnimalInfo extends Component {
38+
39+
getLatestPets(petObject, events) {
40+
function customizer(objValue, srcValue) {
41+
if (_.isObject(objValue) && _.isObject(srcValue)) {
42+
// sort according to date of most recent event
43+
return _.set(objValue, 'Events', _.orderBy(srcValue, ['Time'], ['desc']));
44+
}
45+
}
46+
// force null values to back of list because
47+
// _.orderBy descending places null values first
48+
// see: https://github.com/lodash/lodash/issues/4169
49+
let result = _.mergeWith(petObject, events, customizer);
50+
let emptyEvents = _.filter(result, function(pet) { return pet["Events"] && pet["Events"].length === 0 });
51+
let nonEmptyEvents = _.filter(result, function(pet) { return pet["Events"] && pet["Events"].length > 0 });
52+
result = [..._.orderBy(nonEmptyEvents, ['Events[0].Time'], ['desc']), ...emptyEvents]
53+
return result.slice(0, PET_COUNT);
54+
}
55+
56+
render() {
57+
const numOfPets = _.size(this.props.pets);
58+
const events = this.props.events;
59+
const latestPets = this.getLatestPets(this.props.pets, events);
60+
const headerText = this.props.headerText;
61+
const headerAddition = (numOfPets > PET_COUNT) ? " (Showing " + PET_COUNT + " Pets out of " + numOfPets + ")" : ""
62+
63+
return (
64+
<Container component={Paper} style={{ "marginTop": "1em" }}>
65+
<DataTableHeader headerText={headerText + headerAddition}
66+
emojiIcon={<PetsIcon color='primary' fontSize='inherit' />}
67+
>
68+
<Grid item>
69+
<IconButton style={{ 'padding': 0, 'paddingLeft': 5 }} color="primary" aria-label="link" component="span">
70+
<LinkIcon />
71+
</IconButton>
72+
</Grid>
73+
</DataTableHeader>
74+
<CollapsibleTable data={latestPets} events={events} />
75+
</Container>
76+
);
77+
}
78+
}
79+
80+
81+
export default withStyles(customStyles)(AnimalInfo);

‎src/client/src/pages/DataView360/View/components/DataTableHeader.js

Lines changed: 2 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,9 @@
1-
import React, { Component } from 'react';
1+
import React from 'react';
22
import {
3-
Paper,
43
Typography,
5-
Table,
6-
TableContainer,
7-
TableHead,
8-
TableBody,
9-
TableRow,
10-
TableCell,
11-
Container,
124
} from '@material-ui/core';
135
import { makeStyles, withStyles } from '@material-ui/core/styles';
14-
import _ from 'lodash';
15-
import moment from 'moment';
166
import Grid from "@material-ui/core/Grid";
17-
import EmojiPeopleIcon from '@material-ui/icons/EmojiPeople';
18-
import TimelineIcon from '@material-ui/icons/Timeline';
197

208

219
const customStyles = makeStyles({
@@ -40,6 +28,7 @@ function DataTableHeader(props) {
4028
<Grid item>
4129
{ headerText }
4230
</Grid>
31+
{ props.children }
4332
</Grid>
4433
</Typography>
4534
);

‎src/client/src/pages/DataView360/View/components/Fosters.js

Lines changed: 17 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,19 @@
1-
import React, {Component} from 'react';
1+
import React, { Component } from 'react';
22
import {
33
Paper,
44
Typography,
55
Container,
66
IconButton
77
} from '@material-ui/core';
88
import LinkIcon from '@material-ui/icons/Link';
9-
import {withStyles} from '@material-ui/core/styles';
9+
import { withStyles } from '@material-ui/core/styles';
1010
import _ from 'lodash';
1111
import moment from "moment";
1212
import Grid from "@material-ui/core/Grid";
1313
import PetsIcon from "@material-ui/icons/Pets";
1414

1515
import CollapsibleTable from './CollapsibleTable';
16+
import DataTableHeader from './DataTableHeader';
1617

1718

1819
const customStyles = theme => ({
@@ -39,26 +40,24 @@ class Fosters extends Component {
3940
}
4041

4142
render() {
42-
const {classes} = this.props;
43+
const { classes } = this.props;
4344
const numOfPets = _.size(this.props.fosters);
4445
const latestPets = this.getLatestPets(this.props.fosters);
4546
const events = this.props.events;
46-
return (<Container component={Paper} style={{"marginTop": "1em"}}>
47-
<Typography variant='h5'>
48-
<Grid container style={{"margin": "0.5em"}} direction={'row'}>
49-
<Grid item className={classes.spaceIcon}>
50-
<PetsIcon color='primary' fontSize='inherit'/>
51-
</Grid>
52-
<Grid item>
53-
Foster Records {(numOfPets > PET_COUNT) && `(Showing ${PET_COUNT} Pets out of " + numOfPets + ")`}
54-
</Grid>
55-
<Grid item>
56-
<IconButton style={{'padding': 0, 'paddingLeft': 5}} color="primary" aria-label="link" component="span">
57-
<LinkIcon />
58-
</IconButton>
59-
</Grid>
47+
const headerText = "Foster Records"
48+
const headerAddition = (numOfPets > PET_COUNT) ? " (Showing " + PET_COUNT + " Pets out of " + numOfPets + ")" : ""
49+
return (
50+
<Container component={Paper} style={{ "marginTop": "1em" }}>
51+
<DataTableHeader
52+
headerText={headerText + headerAddition}
53+
emojiIcon={<PetsIcon color='primary' fontSize='inherit' />}
54+
>
55+
<Grid item>
56+
<IconButton style={{ 'padding': 0, 'paddingLeft': 5 }} color="primary" aria-label="link" component="span">
57+
<LinkIcon />
58+
</IconButton>
6059
</Grid>
61-
</Typography>
60+
</DataTableHeader>
6261
<CollapsibleTable data={latestPets} events={events} />
6362
</Container>
6463
);

0 commit comments

Comments
 (0)