Merge pull request #218 from CodeForPhilly/feature/volunteer-activity

Volunteer activity now included on 360 view

Author: urirot

src/client/src/pages/DataView360/DataView360.js

@@ -17,6 +17,7 @@ import {
 import CircularProgress from '@material-ui/core/CircularProgress';
 import styles from "./styles/DataView360.module.css";
 import _ from 'lodash';
+import moment from 'moment';
 import SearchBar from './components/SearchBar';
 import ContactInfo from './components/ContactInfo';
 import Volunteer from './components/Volunteer';
@@ -75,6 +76,7 @@ class DataView360 extends Component {
             showSearchBar: true
         }
 
+        this.extractVolunteerActivity = this.extractVolunteerActivity.bind(this);
         this.handleGetParticipant = this.handleGetParticipant.bind(this);
         this.handleSearchChange = this.handleSearchChange.bind(this);
     }
@@ -95,6 +97,20 @@ class DataView360 extends Component {
         });
     }
 
+    extractVolunteerActivity() {
+        const volgistics = _.find(this.state.participantData.contact_details, {"source_type": "volgistics"}) || {};
+        let volunteerActivity = {"life_hours": 0, "ytd_hours": 0, "start_date": "N/A"}
+        
+        if (Object.keys(volgistics).length > 0) {
+            const volgisticsJson = JSON.parse(volgistics.json);
+            volunteerActivity = _.pick(volgisticsJson, Object.keys(volunteerActivity));
+            if (volunteerActivity["start_date"] !== "") {
+                volunteerActivity["start_date"] = moment(volunteerActivity["start_date"], "MM-DD-YYYY").format("YYYY-MM-DD");
+            }
+        }
+        return volunteerActivity;
+    }
+
     renderParticipantsTable() {
         const {classes} = this.props;
         const tableRowColors = [classes.tableRowEven, classes.tableRowOdd]
@@ -200,7 +216,7 @@ class DataView360 extends Component {
                         </Grid>
                         <Donations donations={_.get(this.state, 'participantData.donations')}/>
                         <Adoptions adoptions={_.get(this.state, 'participantData.adoptions')}/>
-                        <Volunteer volunteer={_.get(this.state, 'participantData.shifts')}
+                        <Volunteer volunteer={this.extractVolunteerActivity()}
                                    volunteerShifts={_.get(this.state, 'participantData.shifts')}/>
 
                     </Paper>)}

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

@@ -48,8 +48,8 @@ class Volunteer extends Component {
 
         return (
             <React.Fragment>
-                <Container className={styles.volonteer_activity} style={{"marginTop":"1em"}}>
-                    <Typography className={styles.volonteer_activity_title} variant='h4'>Volunteer Activity</Typography>
+                <Container className={styles.volunteer_activity} style={{"marginTop":"1em"}}>
+                    <Typography className={styles.volunteer_activity_title} variant='h4'>Volunteer Activity</Typography>
                     <TableContainer className="main_table_container" style={{"marginTop":"1em"}} component={Paper}>
                         <Table className="main_table">
                             <TableHead>
@@ -63,16 +63,16 @@ class Volunteer extends Component {
                                 { this.props.volunteer && (
                                 <StyledTableRow>
                                     <TableCell>{this.props.volunteer.start_date}</TableCell>
-                                    <TableCell>{this.props.volunteer.life_hours}</TableCell>
-                                    <TableCell>{this.props.volunteer.ytd_hours}</TableCell>
+                                    <TableCell>{this.props.volunteer.life_hours.toFixed(2)}</TableCell>
+                                    <TableCell>{this.props.volunteer.ytd_hours.toFixed(2)}</TableCell>
                                 </StyledTableRow>
                                 )}
                             </TableBody>
                         </Table>
                     </TableContainer>
                 </Container>
-                <Container className={styles.volonteer_history} style={{"marginTop":"1em"}}>
-                    <Typography className={styles.volonteer_history_title} variant='h4'>Volunteer History (Top 3)</Typography>
+                <Container className={styles.volunteer_history} style={{"marginTop":"1em"}}>
+                    <Typography className={styles.volunteer_history_title} variant='h4'>Volunteer History (Top 3)</Typography>
                     <TableContainer className="main_table_container" style={{"marginTop":"1em"}} component={Paper} variant='outlined'>
                         <Table className="main_table">
                             <TableHead>

src/client/src/pages/DataView360/components/styles/Volunteer.module.css

@@ -1,4 +1,4 @@
-div.volonteer_activity {
+div.volunteer_activity {
 	grid-area: 3 / 2 / 4 / 3;
 	margin-bottom: 40px;
 	padding: 0;
@@ -8,7 +8,7 @@ div.volonteer_activity {
 	overflow: hidden;
 }
 
-div.volonteer_history {
+div.volunteer_history {
 	grid-area: 4 / 2 / 5 / 3;
 	margin-bottom: 40px;
 	padding: 0;
@@ -18,14 +18,14 @@ div.volonteer_history {
 	overflow: hidden;
 }
 
-h4.volonteer_activity_title {
+h4.volunteer_activity_title {
 	position: relative;
 	margin: 15px 20px;
 	padding-left: 23px;
 	font-size: 16px;
 	text-align: left;
 }
-h4.volonteer_activity_title::before {
+h4.volunteer_activity_title::before {
 	content: '';
 	position: absolute;
 	top: -3px;
@@ -38,14 +38,14 @@ h4.volonteer_activity_title::before {
 	background-size: contain;
 }
 
-h4.volonteer_history_title {
+h4.volunteer_history_title {
 	position: relative;
 	margin: 15px 20px;
 	padding-left: 23px;
 	font-size: 16px;
 	text-align: left;
 }
-h4.volonteer_history_title::before {
+h4.volunteer_history_title::before {
 	content: '';
 	position: absolute;
 	top: -9px;