Skip to content

Commit 4514739

Browse files
dcstlouisdcstlouis
committed
Split Volunteer component into VolunteerActivity and VolunteerHistory
1 parent a9823eb commit 4514739

File tree

5 files changed

+206
-112
lines changed

5 files changed

+206
-112
lines changed

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

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, {Component} from 'react';
22
import {withStyles} from '@material-ui/core/styles';
3-
import {withRouter} from "react-router";
3+
import {withRouter, matchPath} from "react-router";
44

55
import {
66
Paper,
@@ -14,12 +14,11 @@ import {
1414
import _ from 'lodash';
1515
import moment from 'moment';
1616
import ContactInfo from './components/ContactInfo';
17-
import Volunteer from './components/Volunteer';
1817
import Donations from './components/Donations';
1918
import Adoptions from './components/Adoptions';
2019
import Fosters from './components/Fosters';
21-
import {matchPath} from "react-router";
22-
20+
import VolunteerActivity from './components/VolunteerActivity';
21+
import VolunteerHistory from './components/VolunteerHistory';
2322

2423

2524
const customStyles = theme => ({
@@ -148,8 +147,8 @@ class View360 extends Component {
148147
events={_.get(this.state, 'adoptionEvents')} />
149148
<Fosters fosters={_.get(this.state, 'animalData')}
150149
events={_.get(this.state, 'fosterEvents')} />
151-
<Volunteer volunteer={this.extractVolunteerActivity()}
152-
volunteerShifts={_.get(this.state, 'participantData.shifts')}/>
150+
<VolunteerActivity volunteer={this.extractVolunteerActivity()} />
151+
<VolunteerHistory volunteerShifts={_.get(this.state, 'participantData.shifts')} />
153152
</Grid>
154153
</Grid>
155154
</Grid>

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

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import React, { Component } from 'react';
2+
import {
3+
Paper,
4+
Typography,
5+
Table,
6+
TableContainer,
7+
TableHead,
8+
TableBody,
9+
TableRow,
10+
TableCell,
11+
Container,
12+
} from '@material-ui/core';
13+
import { makeStyles, withStyles } from '@material-ui/core/styles';
14+
import _ from 'lodash';
15+
import moment from 'moment';
16+
import Grid from "@material-ui/core/Grid";
17+
import EmojiPeopleIcon from '@material-ui/icons/EmojiPeople';
18+
import TimelineIcon from '@material-ui/icons/Timeline';
19+
20+
21+
const customStyles = makeStyles({
22+
spaceIcon: {
23+
marginTop: 3,
24+
marginRight: 3
25+
},
26+
headerCell: {
27+
fontWeight: "bold"
28+
},
29+
});
30+
31+
function DataTableHeader(props) {
32+
const classes = customStyles();
33+
const { headerText, emojiIcon } = props;
34+
return (
35+
<Typography variant='h5'>
36+
<Grid container style={{ "margin": "0.5em" }} direction={'row'}>
37+
<Grid item className={classes.spaceIcon}>
38+
{ emojiIcon }
39+
</Grid>
40+
<Grid item>
41+
{ headerText }
42+
</Grid>
43+
</Grid>
44+
</Typography>
45+
);
46+
}
47+
48+
export default withStyles(customStyles)(DataTableHeader);

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

Lines changed: 5 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -1,120 +1,19 @@
11
import React, { Component } from 'react';
2-
import {
3-
Paper,
4-
Typography,
5-
Table,
6-
TableContainer,
7-
TableHead,
8-
TableBody,
9-
TableRow,
10-
TableCell,
11-
Container,
12-
} from '@material-ui/core';
13-
import { withStyles } from '@material-ui/core/styles';
142
import _ from 'lodash';
15-
import moment from 'moment';
16-
import Grid from "@material-ui/core/Grid";
17-
import EmojiPeopleIcon from '@material-ui/icons/EmojiPeople';
18-
import TimelineIcon from '@material-ui/icons/Timeline';
3+
import VolunteerActivity from './VolunteerActivity';
4+
import VolunteerHistory from './VolunteerHistory';
195

20-
const customStyles = theme => ({
21-
spaceIcon: {
22-
marginTop: 3,
23-
marginRight: 3
24-
},
25-
headerCell: {
26-
fontWeight: "bold"
27-
},
28-
});
29-
30-
const SHIFTS_TO_SHOW = 5;
316

327
class Volunteer extends Component {
338

34-
createShiftRows(shifts) {
35-
const shiftsSorted = _.sortBy(shifts, shift => {
36-
return new moment(shift.from);
37-
}).reverse();
38-
39-
const lastShifts = shiftsSorted.slice(shiftsSorted.length - SHIFTS_TO_SHOW, shiftsSorted.length)
40-
41-
const result = _.map(lastShifts, (shift, index) => {
42-
return(<TableRow key={index}>
43-
<TableCell>{moment(shift.from).format("MM-DD-YYYY")}</TableCell>
44-
<TableCell>{shift.assignment}</TableCell>
45-
</TableRow>);
46-
47-
});
48-
49-
return result;
50-
}
51-
529
render() {
53-
const {classes} = this.props;
54-
5510
return (
5611
<React.Fragment>
57-
<Container component={Paper} style={{"marginTop": "1em"}}>
58-
<Typography variant='h5'>
59-
<Grid container style={{"margin": "0.5em"}} direction={'row'}>
60-
<Grid item className={classes.spaceIcon}>
61-
<EmojiPeopleIcon color='primary' fontSize='inherit'/>
62-
</Grid>
63-
<Grid item>
64-
Volunteer Activity
65-
</Grid>
66-
</Grid>
67-
</Typography>
68-
<TableContainer component={Paper} style={{"marginBottom": "1em"}} variant='outlined'>
69-
<Table>
70-
<TableHead>
71-
<TableRow>
72-
<TableCell className={classes.headerCell}>Volunteer activity start</TableCell>
73-
<TableCell className={classes.headerCell}>Life hours</TableCell>
74-
<TableCell className={classes.headerCell}>YTD hours</TableCell>
75-
</TableRow>
76-
</TableHead>
77-
<TableBody>
78-
{ this.props.volunteer && (
79-
<TableRow>
80-
<TableCell>{moment(this.props.volunteer.start_date).format("MM-DD-YYYY")}</TableCell>
81-
<TableCell>{this.props.volunteer.life_hours.toFixed(2)}</TableCell>
82-
<TableCell>{this.props.volunteer.ytd_hours.toFixed(2)}</TableCell>
83-
</TableRow>
84-
)}
85-
</TableBody>
86-
</Table>
87-
</TableContainer>
88-
</Container>
89-
<Container component={Paper} style={{"marginTop": "1em"}}>
90-
<Typography variant='h5'>
91-
<Grid container style={{"margin": "0.5em"}} direction={'row'}>
92-
<Grid item className={classes.spaceIcon}>
93-
<TimelineIcon color='primary' fontSize='inherit'/>
94-
</Grid>
95-
<Grid item>
96-
Volunteer History (Top 5)
97-
</Grid>
98-
</Grid>
99-
</Typography>
100-
<TableContainer component={Paper} style={{"marginBottom":"1em"}} variant='outlined'>
101-
<Table>
102-
<TableHead>
103-
<TableRow>
104-
<TableCell className={classes.headerCell}>Date</TableCell>
105-
<TableCell className={classes.headerCell}>Assignment</TableCell>
106-
</TableRow>
107-
</TableHead>
108-
<TableBody>
109-
{ this.props.volunteerShifts && this.createShiftRows(this.props.volunteerShifts) }
110-
</TableBody>
111-
</Table>
112-
</TableContainer>
113-
</Container>
12+
<VolunteerActivity volunteer={this.props.volunteer} />
13+
<VolunteerHistory volunteerShifts={this.props.volunteerShifts} />
11414
</React.Fragment>
11515
);
11616
}
11717
}
11818

119-
120-
export default withStyles(customStyles)(Volunteer);
19+
export default Volunteer;

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

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import React, { Component } from 'react';
2+
import {
3+
Paper,
4+
Typography,
5+
Table,
6+
TableContainer,
7+
TableHead,
8+
TableBody,
9+
TableRow,
10+
TableCell,
11+
Container,
12+
} from '@material-ui/core';
13+
import { withStyles } from '@material-ui/core/styles';
14+
import _ from 'lodash';
15+
import moment from 'moment';
16+
import Grid from "@material-ui/core/Grid";
17+
import EmojiPeopleIcon from '@material-ui/icons/EmojiPeople';
18+
import TimelineIcon from '@material-ui/icons/Timeline';
19+
import DataTableHeader from './DataTableHeader';
20+
21+
const customStyles = theme => ({
22+
spaceIcon: {
23+
marginTop: 3,
24+
marginRight: 3
25+
},
26+
headerCell: {
27+
fontWeight: "bold"
28+
},
29+
});
30+
31+
class volunteerActivity extends Component {
32+
33+
render() {
34+
const {classes} = this.props;
35+
36+
return (
37+
<React.Fragment>
38+
<Container component={Paper} style={{"marginTop": "1em"}}>
39+
<DataTableHeader headerText={"Volunteer Activity"}
40+
emojiIcon={<EmojiPeopleIcon color='primary' fontSize='inherit'/>}
41+
/>
42+
<TableContainer component={Paper} style={{"marginBottom": "1em"}} variant='outlined'>
43+
<Table>
44+
<TableHead>
45+
<TableRow>
46+
<TableCell className={classes.headerCell}>Volunteer activity start</TableCell>
47+
<TableCell className={classes.headerCell}>Life hours</TableCell>
48+
<TableCell className={classes.headerCell}>YTD hours</TableCell>
49+
</TableRow>
50+
</TableHead>
51+
<TableBody>
52+
{ this.props.volunteer && (
53+
<TableRow>
54+
<TableCell>{moment(this.props.volunteer.start_date).format("MM-DD-YYYY")}</TableCell>
55+
<TableCell>{this.props.volunteer.life_hours.toFixed(2)}</TableCell>
56+
<TableCell>{this.props.volunteer.ytd_hours.toFixed(2)}</TableCell>
57+
</TableRow>
58+
)}
59+
</TableBody>
60+
</Table>
61+
</TableContainer>
62+
</Container>
63+
</React.Fragment>
64+
);
65+
}
66+
}
67+
68+
69+
export default withStyles(customStyles)(volunteerActivity);

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

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import React, { Component } from 'react';
2+
import {
3+
Paper,
4+
Table,
5+
TableContainer,
6+
TableHead,
7+
TableBody,
8+
TableRow,
9+
TableCell,
10+
Container,
11+
} from '@material-ui/core';
12+
import { withStyles } from '@material-ui/core/styles';
13+
import _ from 'lodash';
14+
import moment from 'moment';
15+
import TimelineIcon from '@material-ui/icons/Timeline';
16+
import DataTableHeader from './DataTableHeader';
17+
18+
const customStyles = theme => ({
19+
spaceIcon: {
20+
marginTop: 3,
21+
marginRight: 3
22+
},
23+
headerCell: {
24+
fontWeight: "bold"
25+
},
26+
});
27+
28+
const SHIFTS_TO_SHOW = 5;
29+
30+
class VolunteerHistory extends Component {
31+
32+
createShiftRows(shifts) {
33+
const shiftsSorted = _.sortBy(shifts, shift => {
34+
return new moment(shift.from);
35+
}).reverse();
36+
37+
const lastShifts = shiftsSorted.slice(shiftsSorted.length - SHIFTS_TO_SHOW, shiftsSorted.length)
38+
39+
const result = _.map(lastShifts, (shift, index) => {
40+
return(<TableRow key={index}>
41+
<TableCell>{moment(shift.from).format("MM-DD-YYYY")}</TableCell>
42+
<TableCell>{shift.assignment}</TableCell>
43+
</TableRow>);
44+
45+
});
46+
47+
return result;
48+
}
49+
50+
render() {
51+
const {classes} = this.props;
52+
53+
return (
54+
<React.Fragment>
55+
<Container component={Paper} style={{"marginTop": "1em"}}>
56+
<DataTableHeader headerText={"Volunteer History (Top 5)"}
57+
emojiIcon={<TimelineIcon color='primary' fontSize='inherit'/>}
58+
/>
59+
<TableContainer component={Paper} style={{"marginBottom":"1em"}} variant='outlined'>
60+
<Table>
61+
<TableHead>
62+
<TableRow>
63+
<TableCell className={classes.headerCell}>Date</TableCell>
64+
<TableCell className={classes.headerCell}>Assignment</TableCell>
65+
</TableRow>
66+
</TableHead>
67+
<TableBody>
68+
{ this.props.volunteerShifts && this.createShiftRows(this.props.volunteerShifts) }
69+
</TableBody>
70+
</Table>
71+
</TableContainer>
72+
</Container>
73+
</React.Fragment>
74+
);
75+
}
76+
}
77+
78+
79+
export default withStyles(customStyles)(VolunteerHistory);

0 commit comments

Comments
 (0)