able to retrieve events from firebase

melinda-schmitz · Sep 30, 2018 · 8123529 · 8123529
1 parent 2089d08
commit 8123529
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 44 deletions.
diff --git a/client/package.json b/client/package.json
@@ -6,6 +6,8 @@
     "@material-ui/core": "^3.1.0",
     "@material-ui/icons": "^3.0.1",
     "firebase": "^5.5.1",
+    "lodash": "^4.17.11",
+    "moment": "^2.22.2",
     "primereact": "^2.0.0-beta.7",
     "prop-types": "^15.6.2",
     "react": "^16.5.2",

diff --git a/client/src/components/NavBar/NavBar.js b/client/src/components/NavBar/NavBar.js
@@ -119,6 +119,7 @@ class NavBar extends Component {
             </Typography>
             <Typography color="inherit">
               Welcome
+              {' '}
               {name}
             </Typography>
             <Button color="inherit" className={classes.loginButton} component={Link} to="/profile">

diff --git a/client/src/containers/Landing/EventCard.js b/client/src/containers/Landing/EventCard.js
@@ -2,6 +2,10 @@
 import React, { Component } from 'react';
 // Import third party linking
 import { Link } from 'react-router-dom';
+// import prop types
+import PropTypes from 'prop-types';
+// import lodash
+import map from 'lodash/map';
 // Import Material UI components and styling
 import Card from '@material-ui/core/Card';
 import CardActions from '@material-ui/core/CardActions';
@@ -12,8 +16,8 @@ import { withStyles } from '@material-ui/core/styles';
 import Grid from '@material-ui/core/Grid';
 // import css file
 import './Landing.css';
-// import events/activities from json file.
-import activities from '../../data/todaytEvents.json';
+// Import moment js library to format event date
+import moment from 'moment';
 
 const styles = {
   card: {
@@ -27,59 +31,85 @@ const styles = {
   },
   eventInfo: {
     fontSize: 18,
+    marginTop: 20,
   },
   btnText: {
     marginRight: 10,
   },
+  eventInfoType: {
+    fontWeight: 600,
+    fontSize: 22,
+  },
 };
 
 class EventCard extends Component {
   render() {
-    const { classes } = this.props;
+    const {
+      classes,
+      events,
+    } = this.props;
 
     return (
-      activities.map(item => {
-        return (
-          <Card className={classes.card} key={item.id}>
-            <CardContent>
-              <Typography component="p" className={classes.eventInfo}>
-                Event:
-                {' '}
-                {item.name}
-              </Typography>
-              <Typography component="p" className={classes.eventInfo}>
-                Location:
-                {' '}
-                {item.location}
-              </Typography>
-              <Typography component="p" className={classes.eventInfo}>
-                Date:
-                {' '}
-                {item.date}
-              </Typography>
-              <Typography component="p" className={classes.eventInfo}>
-                Time:
-                {' '}
-                {item.time}
-              </Typography>
-            </CardContent>
-            <CardActions>
-              <Grid container justify="flex-end">
-                <Button className="app-btn view-details-btn" variant="contained" color="primary" size="small" component={Link} to="/eventDetails">
-                  <span className={classes.btnText}>View Details</span>
-                  <i className="far fa-arrow-alt-circle-right fa-2x" />
-                </Button>
-                <Button className="app-btn delete-event-btn" variant="contained" color="primary" size="small">
-                  <span className={classes.btnText}>Delete Event</span>
-                  <i className="fas fa-trash" />
-                </Button>
-              </Grid>
-            </CardActions>
-          </Card>
-        );
-      })
+      <div>
+        {map(events, (event, key) => <Card className={classes.card} key={key}>
+          <CardContent>
+            <Typography component="p" className={classes.eventInfo}>
+              <span className={classes.eventInfoType}>Name of event</span>
+              <br />
+              {' '}
+              {event.eventName}
+            </Typography>
+            <Typography component="p" className={classes.eventInfo}>
+              <span className={classes.eventInfoType}>Address</span>
+              <br />
+              {' '}
+              {event.eventAddress}
+              {' '}
+              {event.eventAddress2}
+              {<br />}
+              {event.eventCity}
+              ,
+              {' '}
+              {event.eventState}
+              {' '}
+              {event.eventZip}
+            </Typography>
+            <Typography component="p" className={classes.eventInfo}>
+              <span className={classes.eventInfoType}>Date</span>
+              <br />
+              {' '}
+              {moment(event.eventDate).format('DD MMM YYYY')}
+            </Typography>
+            <Typography component="p" className={classes.eventInfo}>
+              <span className={classes.eventInfoType}>Time</span>
+              <br />
+              {' '}
+              {event.eventTime}
+            </Typography>
+          </CardContent>
+          <CardActions>
+            <Grid container justify="flex-end">
+              <Button className="app-btn view-details-btn" variant="contained" color="primary" size="small" component={Link} to="/eventDetails">
+                <span className={classes.btnText}>View Details</span>
+                <i className="far fa-arrow-alt-circle-right fa-2x" />
+              </Button>
+              <Button className="app-btn delete-event-btn" variant="contained" color="primary" size="small">
+                <span className={classes.btnText}>Delete Event</span>
+                <i className="fas fa-trash" />
+              </Button>
+            </Grid>
+          </CardActions>
+        </Card>)}
+      </div>
     );
   }
 }
 
+// Define prop types
+EventCard.propTypes = {
+  classes: PropTypes.object.isRequired,
+  events: PropTypes.object,
+};
+
+
 export default withStyles(styles)(EventCard);
diff --git a/client/src/containers/Landing/Landing.js b/client/src/containers/Landing/Landing.js
@@ -7,20 +7,41 @@ import DayPicker from 'react-day-picker';
 // import other components
 import EventCard from './EventCard';
 import UpcomingEvents from './UpcomingEvents';
+// import firebase database
+import { database } from '../../firebase-config';
 
 // import day picker css
 import 'react-day-picker/lib/style.css';
 
 
 class Landing extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      events: null,
+    };
+
+    this.eventsRef = database.ref('/events');
+  }
+
+  componentDidMount() {
+    this.eventsRef.on('value', (snapshot) => {
+      // console.log(snapshot.val());
+      this.setState({ events: snapshot.val() });
+    });
+  }
+
   render() {
+    const { events } = this.state;
     return (
       <div>
         <div className="main-content-section">
           <Grid container spacing={16}>
             <Grid item xs={12} sm={12} md={8}>
               <h1>Today&#39;s Events</h1>
-              <EventCard />
+              <EventCard
+                events={events}
+              />
             </Grid>
             <Grid item xs={12} sm={12} md={4}>
               <DayPicker />