Fixed merge conflict.

package-lock.json

@@ -3488,6 +3488,16 @@
         "sha.js": "^2.4.8"
       }
     },
+    "create-react-class": {
+      "version": "15.6.3",
+      "resolved": "https://registry.npmjs.org/create-react-class/-/create-react-class-15.6.3.tgz",
+      "integrity": "sha512-M+/3Q6E6DLO6Yx3OwrWjwHBnvfXXYA7W+dFjt/ZDBemHO1DDZhsalX/NUtnTYclN6GfnBDRh4qRHjcDHmlJBJg==",
+      "requires": {
+        "fbjs": "^0.8.9",
+        "loose-envify": "^1.3.1",
+        "object-assign": "^4.1.1"
+      }
+    },
     "cross-spawn": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz",
@@ -4005,6 +4015,40 @@
         }
       }
     },
+    "disqus-react": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/disqus-react/-/disqus-react-1.0.5.tgz",
+      "integrity": "sha1-go6hhr0kHF4qbf66tRNeUqLZHRE=",
+      "requires": {
+        "react": "^15.6.1",
+        "react-dom": "^15.6.1"
+      },
+      "dependencies": {
+        "react": {
+          "version": "15.6.2",
+          "resolved": "https://registry.npmjs.org/react/-/react-15.6.2.tgz",
+          "integrity": "sha1-26BDSrQ5z+gvEI8PURZjkIF5qnI=",
+          "requires": {
+            "create-react-class": "^15.6.0",
+            "fbjs": "^0.8.9",
+            "loose-envify": "^1.1.0",
+            "object-assign": "^4.1.0",
+            "prop-types": "^15.5.10"
+          }
+        },
+        "react-dom": {
+          "version": "15.6.2",
+          "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-15.6.2.tgz",
+          "integrity": "sha1-Qc+t9pO3V/rycIRDodH9WgK+9zA=",
+          "requires": {
+            "fbjs": "^0.8.9",
+            "loose-envify": "^1.1.0",
+            "object-assign": "^4.1.0",
+            "prop-types": "^15.5.10"
+          }
+        }
+      }
+    },
     "dns-equal": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz",

package.json

@@ -6,6 +6,7 @@
     "@material-ui/core": "^3.1.0",
     "@material-ui/icons": "^3.0.1",
     "ajv": "^6.0.0",
+    "disqus-react": "^1.0.5",
     "firebase": "^5.5.2",
     "firebase-admin": "^6.1.0",
     "flamelink": "^0.19.2",

src/App.css

@@ -13,4 +13,38 @@ body {
     .report-google-map-container > div {
         width: calc(100% - 50% - 120px) !important;
     }
+}
+
+#disqus_thread {
+    width: 89% !important;
+    margin: 0 auto;
+}
+
+.sighting-list {
+    height: calc(50vh - 64px);
+    overflow-y: scroll;
+}
+
+@media (min-width: 960px) {
+    .sighting-list {
+        height: calc(100vh - 64px);
+        overflow-y: scroll;
+    }
+}
+
+.sighting-details-content {
+    width: 89%;
+    margin: 330px auto 0 auto;
+}
+
+.sighting-detail-google-map-container > div {
+    width: 100% !important;
+    height: 300px !important;
+}
+
+@media (min-width: 960px) {
+    .sighting-detail-google-map-container > div {
+        width: calc(100% - 50% - 120px) !important;
+        height: 300px !important;
+    }
 }

src/components/Main.js

@@ -155,7 +155,7 @@ class ResponsiveDrawer extends React.Component {
                             <MenuIcon />
                         </IconButton>
                         <Typography variant="title" color="inherit" noWrap>
-                            The American Marten
+                            Marten Tracker
                         </Typography>
                     </Toolbar>
                 </AppBar>

src/components/ReportForm.js

@@ -53,19 +53,6 @@ const styles = theme => ({
   },
 });
 
-/**
- * Function for formatting the
- * year as a string that
- * Material UI can use.
- * @param {*} date, Date passed in. 
- */
-function getYear(date) {
-  var d = new Date(date),
-    year = d.getFullYear();
-
-  return year;
-}
-
 /** 
  * Types of sightings. Label is what is
  * viewed in the application, value is
@@ -224,12 +211,44 @@ class ReportForm extends React.Component {
     this.handleSubmit = this.handleSubmit.bind(this);
   }
 
+  /**
+  * Function for formatting the
+  * year as a string that
+  * Material UI can use.
+  * @param {*} date, Date passed in. 
+  */
+ getYear = date => {
+  var d = new Date(date),
+    year = d.getFullYear();
+
+  return year;
+}
+
+/**
+* Function for formatting the
+* month as a string that
+* Material UI can use.
+* @param {*} date, Date passed in. 
+*/
+getMonth = date => {
+  var d = new Date(date),
+  month = d.getMonth() + 1;
+
+  month = month.toString();
+
+  if (month.length === 1) {
+    month = "0" + month;
+  }
+
+  return month;
+}
+
   /**
    * State of form components.
    */
   state = {
-    month: '01',
+    month: this.getMonth(new Date()),
-    year: getYear(new Date()),
+    year: this.getYear(new Date()),
     time: 'unknown',
     type: 'visual',
     confidence: '1',
@@ -294,8 +313,8 @@ class ReportForm extends React.Component {
     }
     sightingsRef.push(sighting);
     this.setState({
-      year: getYear(new Date()),
+      year: this.getYear(new Date()),
-      month: '01',
+      month: this.getMonth(new Date()),
       time: 'unknown',
       type: 'visual',
       confidence: '1',
@@ -479,7 +498,7 @@ class ReportForm extends React.Component {
           ContentProps={{
             'aria-describedby': 'message-id',
           }}
-          message={<span id="message-id" className={classes.message}><CheckCircleIcon className={classes.icon}/>Report received.</span>}
+          message={<span id="message-id" className={classes.message}><CheckCircleIcon className={classes.icon} />Report received.</span>}
           action={[
             <IconButton
               key="close"

src/components/SightingDetail.js

@@ -0,0 +1,30 @@
+import React, { Component, Fragment } from 'react';
+import Disqus from 'disqus-react';
+import SightingDetailMap from './SightingDetailMap';
+
+class SightingDetail extends Component {
+
+    render() {
+        const disqusShortname = 'https-marten-application-netlify-com';
+        const disqusConfig = {
+            url: `http://localhost:3000/${this.props.detail.id}`,
+            identifier: this.props.detail.id,
+            title: this.props.detail.id
+        }
+
+        return (
+            <Fragment>
+                <SightingDetailMap lat={this.props.detail.lat} lng={this.props.detail.lng}/>
+                <div className='sighting-details-content'>
+                    <p>{`Confidence: ${this.props.detail.confidence}`}</p>
+                    <p>{`When: ${this.props.detail.date}, ${this.props.detail.time}`}</p>
+                    <p>{`Where: ${this.props.detail.lat} degrees N, and ${this.props.detail.lng} degrees E`}</p>
+                    <p>{`${this.props.detail.desc}`}</p>
+                </div>
+                <Disqus.DiscussionEmbed shortname={disqusShortname} config={disqusConfig} />
+            </Fragment>
+        );
+    }
+}
+
+export default SightingDetail;

src/components/SightingDetailMap.js

@@ -0,0 +1,38 @@
+import React, { Component } from 'react';
+import { Map, Marker, GoogleApiWrapper } from 'google-maps-react';
+
+// Google Maps API Key
+const API_KEY = 'AIzaSyAZ_0J01bA6wCbIPK4UBq2RUBC-hIqG4mM';
+
+// Map container styles
+const mapStyles = {
+    width: '100%',
+    height: '100%'
+}
+
+export class MapContainer extends Component {
+
+    render() {
+        return (
+            // Render the Google Map, Marker, and InfoWindow components
+            <div className = "sighting-detail-google-map-container">
+                <Map
+                    style = { mapStyles }
+                    google = { this.props.google }
+                    initialCenter = {{ lat: this.props.lat, lng: this.props.lng }}
+                    center = {{ lat: this.props.lat, lng: this.props.lng }}
+                    defaultZoom = { 15 }>
+
+                    <Marker 
+                        position = {{ lat: this.props.lat, lng: this.props.lng }}
+                    />
+                </Map>
+            </div>
+        );
+    }
+}
+
+// Send the Google Map API Key with the MapContainer component
+export default GoogleApiWrapper({
+    apiKey: (API_KEY)
+})(MapContainer)

src/components/SightingMap.js

@@ -101,40 +101,6 @@ const confidenceLevels = [
     },
 ];
 
-/**
- * Gets formatted confidence value.
- */
-function getConfidence(item) {
-    for (var i = 0; i < confidenceLevels.length; i++) {
-        if (confidenceLevels[i].value === item) {
-            return confidenceLevels[i].label;
-        }
-    }
-
-}
-
-/**
- * Gets formatted time value.
- */
-function getTime(item) {
-    for (var i = 0; i < timeTypes.length; i++) {
-        if (timeTypes[i].value === item) {
-            return timeTypes[i].label;
-        }
-    }
-}
-
-/**
- * Gets formatted type value.
- */
-function getType(item) {
-    for (var i = 0; i < sightingTypes.length; i++) {
-        if (sightingTypes[i].value === item) {
-            return sightingTypes[i].label;
-        }
-    }
-}
-
 export class MapContainer extends Component {
 
     // Get the user's location using Google's geolocation
@@ -162,6 +128,41 @@ export class MapContainer extends Component {
         }
     }
 
+    /**
+    * Gets formatted type value.
+    */
+    getType = item => {
+        for (var i = 0; i < sightingTypes.length; i++) {
+            if (sightingTypes[i].value === item) {
+                return sightingTypes[i].label;
+            }
+        }
+    }
+
+
+    /**
+     * Gets formatted time value.
+     */
+    getTime = item => {
+        for (var i = 0; i < timeTypes.length; i++) {
+            if (timeTypes[i].value === item) {
+                return timeTypes[i].label;
+            }
+        }
+    }
+
+    /**
+    * Gets formatted confidence value.
+    */
+    getConfidence = item => {
+        for (var i = 0; i < confidenceLevels.length; i++) {
+            if (confidenceLevels[i].value === item) {
+                return confidenceLevels[i].label;
+            }
+        }
+
+    }
+
     // When the component has mounted to the DOM, get the user's location
     componentDidMount() {
         this.getLocation();
@@ -246,14 +247,14 @@ export class MapContainer extends Component {
                     {this.state.sightings.map((sighting) => {
                         return (
                             <Marker
-                                key = {sighting.id}
+                                key={sighting.id}
-                                position = {{ lat: sighting.lat, lng: sighting.lng }}
+                                position={{ lat: sighting.lat, lng: sighting.lng }}
-                                onClick = {this.onMarkerClick}
+                                onClick={this.onMarkerClick}
-                                type = {'Type: ' + getType(sighting.type)}
+                                type={'Type: ' + this.getType(sighting.type)}
-                                confidence = {<Fragment><b>Confidence:</b> {getConfidence(sighting.confidence)}</Fragment>}
+                                confidence={<Fragment><b>Confidence:</b> {this.getConfidence(sighting.confidence)}</Fragment>}
-                                date = {<Fragment><b>Date:</b> {this.formatDate(sighting.date)}</Fragment>}
+                                date={<Fragment><b>Date:</b> {this.formatDate(sighting.date)}</Fragment>}
-                                time = {<Fragment><b>Time:</b> {getTime(sighting.time)}</Fragment>}
+                                time={<Fragment><b>Time:</b> {this.getTime(sighting.time)}</Fragment>}
-                                description = {<Fragment><b>Description:</b> {sighting.desc}</Fragment>}
+                                description={<Fragment><b>Description:</b> {sighting.desc}</Fragment>}
                             />
                         )
                     })}

src/components/ViewSightings.js

@@ -1,232 +1,95 @@
-import React, {Fragment} from 'react';
+import React, { Component, Fragment } from 'react';
-import PropTypes from 'prop-types';
 import Grid from '@material-ui/core/Grid';
-import TextField from '@material-ui/core/TextField'
-import Button from '@material-ui/core/Button'
-import Paper from '@material-ui/core/Paper'
-import { withStyles } from '@material-ui/core/styles';
-import Typography from '@material-ui/core/Typography';
 import firebase from '../firebase.js';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemText from '@material-ui/core/ListItemText';
+import SightingDetail from './SightingDetail';
 
-const styles = theme => ({
+class ViewSightings extends Component {
-    root: {
-      ...theme.mixins.gutters(),
-      paddingTop: theme.spacing.unit * 2,
-      paddingBottom: theme.spacing.unit * 2,
-    },
-    container: {
-        display: 'flex',
-        flexWrap: 'wrap',
-      },
-    textField: {
-        marginLeft: theme.spacing.unit * 2,
-        marginRight: theme.spacing.unit * 2,
-        marginTop: theme.spacing.unit * 2,
-        flexBasis: 280,
-    },
-    button: {
-        marginLeft: theme.spacing.unit * 3,
-        marginRight: theme.spacing.unit * 3,
-        marginTop: theme.spacing.unit * 3,
-      },
-    paper: {
-        marginLeft: theme.spacing.unit * 2,
-        marginRight: theme.spacing.unit,
-        marginTop: theme.spacing.unit * 2,
-      },
-  });
 
-  /** 
+    componentDidMount() {
-  * Types of sightings. Label is what is
+        const sightingsRef = firebase.database().ref('sightings');
-  * viewed in the application, value is
-  * what is stored in the database.
-  */
-  const sightingTypes = [
-    {
-      value: 'visual',
-      label: 'Visual',
-    },
-    {
-      value: 'roadkill',
-      label: 'Roadkill',
-    },
-    {
-      value: 'trapped',
-      label: 'Trapped',
-    },
-    {
-      value: 'viewed_tracks',
-      label: 'Viewed Tracks',
-    },
-    {
-      value: 'photo',
-      label: 'Photo',
-    },
-    {
-      value: 'other',
-      label: 'Other',
-    },
-  ];
-  
-  /** 
-   * Levels of confidence. Label is what is
-   * viewed in the application, value is
-   * what is stored in the database.
-  */
-  const confidenceLevels = [
-      {
-        value: '1',
-        label: '1 - Strongly unconfident',
-      },
-      {
-        value: '2',
-        label: '2 - Unconfident',
-      },
-      {
-        value: '3',
-        label: '3 - Somewhat confident',
-      },
-      {
-        value: '4',
-        label: '4 - Confident',
-      },
-      {
-        value: '5',
-        label: '5 - Very confident',
-      },
-    ];
 
-    /**
+        sightingsRef.on('value', (snapshot) => {
-     * Gets formatted confidence value.
+            let sightings = snapshot.val();
-     */
+            let newState = [];
-    function getConfidence(item) {
+
-        for (var i = 0; i < confidenceLevels.length; i++) {
+            for (let sighting in sightings) {
-            if (confidenceLevels[i].value === item) {
+                newState.push({
-                return confidenceLevels[i].label;
+                    id: sighting,
+                    lat: sightings[sighting].lat,
+                    lng: sightings[sighting].lng,
+                    desc: sightings[sighting].desc,
+                    type: sightings[sighting].type,
+                    confidence: sightings[sighting].confidence,
+                    date: sightings[sighting].date,
+                    time: sightings[sighting].time
+                });
             }
-        }
+            this.setState({
-        
+                sightings: newState
+            });
+        });
     }
 
-    /**
+    getDetail = (id, lat, lng, desc, type, confidence, date, time) => {
-     * Gets formatted type value.
+        this.setState({
-     */
+            selectedSighting: {
-    function getType(item) {
+                id: id,
-        for (var i = 0; i < sightingTypes.length; i++) {
+                lat: lat,
-            if (sightingTypes[i].value === item) {
+                lng: lng,
-                return sightingTypes[i].label;
+                desc: desc,
-            }
+                type: type,
-        }
+                confidence: confidence,
-    }
+                date: date,
-
+                time: time
-class ViewSightings extends React.Component {
+            },
-    constructor(props){
+            clicked: true
-       super(props);
+        })
-
-       this.handleSubmit = this.handleSubmit.bind(this);
     }
 
     state = {
-        id: '',
+        sightings: [],
-        type: 'N/A',
+        selectedSighting: {
-        confidence: 'N/A',
+            id: null,
-        date: 'N/A',
+            lat: null,
-        time: 'N/A',
+            lng: null,
-        desc: 'N/A',
+            desc: null,
-        lat: 'N/A',
+            type: null,
-        lng: 'N/A'
+            confidence: null,
-    };
+            date: null,
-    
+            time: null
+        },
+        clicked: false
+    }
 
-    /**
+    render() {
-     * Handles state change.
-     */
-    handleChange = name => event => {
-        this.setState({
-        [name]: event.target.value,
-        });
-    };
-
-    /**
-     * Handles submit on search.
-     */
-    handleSubmit(e){
-        e.preventDefault();
-        const itemSighting = firebase.database().ref("sightings/" + this.state.id);
-        itemSighting.once("value").then((snapshot) => {
-            // Die if there's no data for that ID.
-            if (!snapshot.exists()) {
-                return;
-            }
-            
-            let data = snapshot.val();
-
-            this.setState({
-                date: data.date,
-                time: data.time,
-                type: getType(data.type),
-                confidence: getConfidence(data.confidence),
-                desc: data.desc,
-                lat: data.lat,
-                lng: data.lng
-            });
-        });
-    };
-
-    render(){
-        const { classes } = this.props;
         return (
-            /**
-             * The below houses the search
-             * and submit button along with
-             * the sighting information
-             * it pulls.
-             */
             <Fragment>
-                <Grid container justify="center">
+                <Grid container>
-                    <form className={classes.container} onSubmit={this.handleSubmit}>
+                    <Grid item xs={12} md={6} className='sighting-list'>
-                    <Grid item xs={6}>
+                        <Fragment>
-                        <TextField
+                            <List>
-                        id="sighting-id"
+                            { 
-                        name="sighting-id"
+                                this.state.sightings.map((sighting) => {
-                        label="Input ID"
+                                    return (
-                        value={this.state.id}
+                                        <ListItem button key={ sighting.id } onClick={() => this.getDetail(sighting.id, sighting.lat, sighting.lng, sighting.desc, sighting.type, sighting.confidence, sighting.date, sighting.time)}>
-                        margin="normal"
+                                            <ListItemText primary={`${sighting.desc}`}/>
-                        onChange={this.handleChange('id')}
+                                        </ListItem>
-                        />
+                                    )
+                                })
+                            }
+                            </List>
+                        </Fragment>
                     </Grid>
-                    <Grid item xs={6}>
+                    <Grid item xs={12} md={6} className='sighting-details'>
-                        <Button variant="contained" type="submit" color="primary" className={classes.button}>
+                        {this.state.clicked === true && <SightingDetail detail={ this.state.selectedSighting }/>}
-                            Submit
-                        </Button>
-                    </Grid>
-                    </form>
-                    <Grid item xs={12}>
-                        <Paper elevation={2}>
-                            <Typography variant="headline" component="h3">
-                            Sighting
-                            </Typography>
-                            <Typography component="p">
-                            <b>Type:</b> {this.state.type} {<br/>}
-                            <b>Confidence:</b> {this.state.confidence} {<br/>}
-                            <b>Date:</b> {this.state.date} {<br/>}
-                            <b>Time:</b> {this.state.time} {<br/>}
-                            <b>Latitude:</b> {this.state.lat} {<br/>}
-                            <b>Longitude:</b> {this.state.lng} {<br/>}
-                            <b>Description:</b> {this.state.desc}
-                            </Typography>
-                        </Paper>
                     </Grid>
                 </Grid>
             </Fragment>
-        )
+        );
-
     }
-
 }
 
-ViewSightings.propTypes = {
+export default ViewSightings;
-    classes: PropTypes.object.isRequired,
-  };
-
-export default withStyles(styles)(ViewSightings);

src/pages/SightingList.js

@@ -1,13 +1,10 @@
 import React, { Component } from 'react';
 import ViewSightings from '../components/ViewSightings.js';
-import Typography from '@material-ui/core/Typography';
 
 class Sighting extends Component {
     render() {
         return (
-            <Typography variant='display1' align='center' gutterBottom>
+            <ViewSightings/>
-                <ViewSightings/>
-            </Typography>
         );
     }
 }