Fixed merge conflict

.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}

package.json

@@ -7,6 +7,7 @@
     "firebase": "^5.5.2",
     "firebase-admin": "^6.0.0",
     "flamelink": "^0.19.2",
+    "google-maps-react": "^2.0.2",
     "react": "^16.5.1",
     "react-dom": "^16.5.1",
     "react-router": "^4.3.1",

src/App.css

@@ -1,3 +1,12 @@
 body {
     margin: 0;
+}
+
+.report-google-map-container > div {
+    height: 92% !important;
+    width: 50% !important;
+}
+
+.sighting-google-map-container > div {
+    height: 92% !important;
 }

src/components/Main.js

@@ -6,9 +6,10 @@ import Tabs from '@material-ui/core/Tabs';
 import Tab from '@material-ui/core/Tab';
 import Typography from '@material-ui/core/Typography';
 import Home from '../pages/Home';
-import Map from '../pages/Map';
+import ViewMap from '../pages/ViewMap';
 import Quiz from '../pages/Quiz';
-import Sighting from '../pages/Sighting';
+import SightingList from '../pages/SightingList';
+import Report from '../pages/Report';
 import Info from '../pages/Info';
 import flamelink from 'flamelink';
 
@@ -50,14 +51,15 @@ class SimpleTabs extends React.Component {
     };
 
     render() {
-    const { classes } = this.props;
+        const { classes } = this.props;
-    const { value } = this.state;
+        const { value } = this.state;
 
     return (
     <div className={classes.root}>
         <AppBar position="static">
             <Tabs value={value} onChange={this.handleChange} centered>
                 <Tab label="Home" />
+                <Tab label="Report a Sighting"/>
                 <Tab label="Sightings" />
                 <Tab label="Trail-Cam Quiz" />
                 <Tab label="View Map" />
@@ -65,10 +67,11 @@ class SimpleTabs extends React.Component {
             </Tabs>
         </AppBar>
         {value === 0 && <Home/>}
-        {value === 1 && <Sighting/>}
+        {value === 1 && <Report/>}
-        {value === 2 && <Quiz/>}
+        {value === 2 && <SightingList/>}
-        {value === 3 && <Map/>}
+        {value === 3 && <Quiz/>}
-        {value === 4 && <Info flamelinkApp={flamelinkApp}/>}
+        {value === 4 && <ViewMap/>}
+        {value === 5 && <Info flamelinkApp={flamelinkApp}/>}
     </div>
     );
     }

src/components/ReportForm.js

@@ -0,0 +1,342 @@
+import React, {Fragment} from 'react';
+import PropTypes from 'prop-types';
+import Grid from '@material-ui/core/Grid';
+import { withStyles } from '@material-ui/core/styles';
+import MenuItem from '@material-ui/core/MenuItem';
+import TextField from '@material-ui/core/TextField';
+import Button from '@material-ui/core/Button';
+import firebase from '../firebase.js';
+import GoogleMap from '../components/ReportMap';
+
+/**
+ * Styles that the different
+ * Material UI components pull
+ * in. Mostly used for spacing.
+ */
+const styles = theme => ({
+  container: {
+    display: 'flex',
+    flexWrap: 'wrap',
+  },
+  textField: {
+    marginLeft: theme.spacing.unit * 2,
+    marginRight: theme.spacing.unit,
+    marginTop: theme.spacing.unit * 2,
+    flexBasis: 280,
+    width: '90%'
+  },
+  button: {
+    marginLeft: theme.spacing.unit * 2,
+    marginRight: theme.spacing.unit,
+    marginTop: theme.spacing.unit * 2,
+  },
+  dense: {
+    marginTop: 30,
+  },
+  menu: {
+    width: 200,
+  },
+});
+
+/**
+ * Function for formatting the
+ * date as a string that
+ * Material UI can use. We'll
+ * also store the date like
+ * this string in the database.
+ * @param {*} date, Date passed in. 
+ */
+function formatDate(date) {
+    var d = new Date(date),
+        month = '' + (d.getMonth() + 1),
+        day = '' + d.getDate(),
+        year = d.getFullYear();
+
+    if (month.length < 2) month = '0' + month;
+    if (day.length < 2) day = '0' + day;
+
+    return [year, month, day].join('-');
+}
+
+/** 
+ * Types of sightings. Label is what is
+ * 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',
+    },
+  ];
+
+/**
+ * The form component.
+ */
+class ReportForm extends React.Component {
+  /**
+   * Component contructor. Currently
+   * only used to bind event
+   * handlers.
+   */
+  constructor() {
+    super();
+    this.handleSubmit = this.handleSubmit.bind(this);
+  }
+
+  /**
+   * State of form components.
+   */
+  state = {
+    date: formatDate(new Date()),
+    time: '00:00',
+    type: 'visual',
+    confidence: '1',
+    desc: '',
+    lat: '',
+    lng: ''
+  };
+
+  /**
+   * Handles state change in form
+   * components.
+   */
+  handleChange = name => event => {
+    this.setState({
+      [name]: event.target.value,
+    });
+  };
+
+  /*
+  * Get the coordinates 
+  * 
+  */
+ getCoordinates = (lat,lng) => {
+    let latitude = lat;
+    let longitude = lng;
+
+    this.setState({
+        lat: latitude,
+        lng: longitude
+    });
+  }
+
+  /**
+   * Event listener for form.
+   * When the form is submitted,
+   * this function passes the
+   * data along to Firebase.
+   */
+  handleSubmit(e) {
+    e.preventDefault();
+    const sightingsRef = firebase.database().ref('sightings');
+    const sighting = {
+      type: this.state.type,
+      confidence: this.state.confidence,
+      date: this.state.date,
+      time: this.state.time,
+      desc: this.state.desc,
+      lat: this.state.lat,
+      lng: this.state.lng
+    }
+    sightingsRef.push(sighting);
+    this.setState({
+      date: formatDate(new Date()),
+      time: '00:00',
+      type: 'visual',
+      confidence: '1',
+      desc: '',
+      lat: '',
+      lng: ''
+    });
+  };
+  
+
+  /**
+   * The render method for this component.
+   */
+  render() {
+    const { classes } = this.props;
+
+    /**
+     * The actual form.
+     */
+    return (
+        <Fragment>
+            <form className={classes.container} autoComplete="off" onSubmit={this.handleSubmit}>
+                <Grid container>
+                    <Grid item xs={6}>
+                        <Grid container spacing={8}>
+                            <Grid item xs={12}>
+                                <TextField
+                                id="select-sighting-type"
+                                select
+                                required
+                                name="sighting-type"
+                                label="Select"
+                                className={classes.textField}
+                                value={this.state.type}
+                                onChange={this.handleChange('type')}
+                                SelectProps={{
+                                    MenuProps: {
+                                    className: classes.menu,
+                                    },
+                                }}
+                                helperText="Please select type of sighting"
+                                >
+                                {sightingTypes.map(option => (
+                                    <MenuItem key={option.value} value={option.value}>
+                                    {option.label}
+                                    </MenuItem>
+                                ))}
+                                </TextField>
+                            </Grid>
+
+                            <Grid item xs={12}>
+                                <TextField
+                                id="select-confidence"
+                                select
+                                required
+                                name="sighting-confidence"
+                                label="Select"
+                                className={classes.textField}
+                                value={this.state.confidence}
+                                onChange={this.handleChange('confidence')}
+                                SelectProps={{
+                                    MenuProps: {
+                                    className: classes.menu,
+                                    },
+                                }}
+                                helperText="Please select confidence in sighting"
+                                >
+                                {confidenceLevels.map(option => (
+                                    <MenuItem key={option.value} value={option.value}>
+                                    {option.label}
+                                    </MenuItem>
+                                ))}
+                                </TextField>
+                            </Grid>
+
+                            <Grid item xs={12}>
+                                <TextField
+                                    id="sighting-date"
+                                    required
+                                    label="Sighting date"
+                                    name="sighting-date"
+                                    type="date"
+                                    value={this.state.date}
+                                    className={classes.textField}
+                                    onChange={this.handleChange('date')}
+                                    InputLabelProps={{
+                                    shrink: true,
+                                    }}
+                                />
+                            </Grid>
+
+                            <Grid item xs={12}>
+                                <TextField
+                                    id="sighting-time"
+                                    required
+                                    label="Sighting time"
+                                    name="sighting-time"
+                                    type="time"
+                                    margin="normal"
+                                    value={this.state.time}
+                                    className={classes.textField}
+                                    onChange={this.handleChange('time')}
+                                    InputLabelProps={{
+                                    shrink: true,
+                                    }}
+                                />
+                            </Grid>
+
+                            <Grid item xs={12}>
+                                <TextField
+                                id="sighting-description"
+                                required
+                                label="Description"
+                                name="sighting-desc"
+                                multiline
+                                rows="5"
+                                placeholder="Describe the sighting to the best of your ability."
+                                value={this.state.desc}
+                                className={classes.textField}
+                                onChange={this.handleChange('desc')}
+                                margin="normal"
+                                variant="outlined"
+                                InputLabelProps={{
+                                    shrink: true,
+                                }}
+                                />
+                            </Grid>
+                            
+                            <Grid item xs={12}>
+                                <Button variant="contained" type="submit" color="primary" className={classes.button}>
+                                    Submit
+                                </Button>
+                            </Grid>
+                    </Grid>
+                        </Grid>
+                    <Grid item xs={6}>
+                        <GoogleMap onClick={this.getCoordinates}/>
+                    </Grid>
+                </Grid>
+            </form>
+        </Fragment>
+    );
+  }  
+}
+
+ReportForm.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(ReportForm);

src/components/ReportMap.js

@@ -0,0 +1,152 @@
+import React, { Component, Fragment } from 'react';
+import { Map, InfoWindow, Marker, GoogleApiWrapper } from 'google-maps-react';
+import Typography from '@material-ui/core/Typography';
+
+// Google Maps API Key
+const API_KEY = 'AIzaSyAZ_0J01bA6wCbIPK4UBq2RUBC-hIqG4mM';
+
+// Map container styles
+const mapStyles = {
+    width: '100%',
+    height: '100%'
+}
+
+export class MapContainer extends Component {
+
+    // Get the user's location using Google's geolocation
+    getLocation = () => {
+        if (navigator.geolocation) {
+            navigator.geolocation.getCurrentPosition((position) => {
+                this.setState({
+                        myLatLng: {
+                            lat: position.coords.latitude,
+                            lng: position.coords.longitude
+                        }
+                    }
+                );
+            })
+        } else {
+            // If browser doesn't support geolocation or if user does not allow it, 
+            // center map on Grand Rapids, Michigan
+            this.setState({
+                    myLatLng: {
+                        lat: 42.9634,
+                        lng: 85.6681
+                    }
+                }
+            );
+        }
+    }
+
+    // When the component has mounted to the DOM, get the user's location
+    componentDidMount() {
+        this.getLocation();
+    }
+
+    // When the user clicks on a marker, pass the props related to that marker
+    // and show the related info window
+    onMarkerClick = (props, marker) => {
+        this.setState({
+            selectedPlace: props,
+            activeMarker: marker,
+            showingInfoWindow: true
+        });
+    }
+    
+    // When the user clicks on the map, if a info window is visible then close it
+    // and 'unactive' that marker
+    onMapClick = (props, map, e) => {
+        if (this.state.showingInfoWindow) {
+            this.setState({
+                showingInfoWindow: false,
+                activeMarker: null
+            });
+        }
+
+        this.setState({
+            markerLatLng: {
+                lat: e.latLng.lat(),
+                lng: e.latLng.lng()
+            }
+        })
+
+        let lat = e.latLng.lat();
+        let lng =  e.latLng.lng();
+
+        if (this.props.onClick) {
+            this.props.onClick(lat,lng);
+        }
+    }
+
+    // Set the state of the component to contain user coordinates and initial 
+    // marker and info window information
+    state = {
+        myLatLng: {
+            lat: 42.9634,
+            lng: 85.6681
+        },
+        markerLatLng: {
+            lat: 0,
+            lng: 0
+        },
+        showingInfoWindow: false,
+        activeMarker: {},
+        selectedPlace: {}
+    }
+
+    render() {
+
+        // TODO: This line is used by the custom marker icon
+        //const { google } = this.props;
+
+        return (
+            // Render the Google Map, Marker, and InfoWindow components
+            <div className = "report-google-map-container">
+                <Map
+                    style = { mapStyles }
+                    google = { this.props.google }
+                    initialCenter = { this.state.myLatLng }
+                    center = { this.state.myLatLng }
+                    defaultZoom = { 15 }
+                    onClick = { this.onMapClick } >
+
+                    <Marker 
+                        position = { this.state.markerLatLng }
+                    />
+
+                    <Marker 
+                        position = { this.state.myLatLng }
+                        onClick = { this.onMarkerClick }
+                        title = { 'You are here' }
+                        name = { '' } 
+                        // FIXME: fix custom icon
+                        // icon={{
+                        //     url: "../images/marten-icon.png",
+                        //     anchor: new google.maps.Point(32,32),
+                        //     scaledSize: new google.maps.Size(64,64)
+                        // }}
+                    />
+
+                    <InfoWindow
+                        marker = { this.state.activeMarker }
+                        visible = { this.state.showingInfoWindow } >
+
+                        <Fragment>
+                            <Typography variant = "display1" gutterBottom>
+                                { this.state.selectedPlace.title }
+                            </Typography>
+                            <Typography variant = "subheading" gutterBottom>
+                                { this.state.selectedPlace.name }
+                            </Typography>
+                        </Fragment>
+                    </InfoWindow>
+                </Map>
+            </div>
+        );
+    }
+}
+
+// Send the Google Map API Key with the MapContainer component
+export default GoogleApiWrapper({
+    apiKey: (API_KEY)
+})(MapContainer)

src/components/SightingMap.js

@@ -0,0 +1,165 @@
+import React, { Component, Fragment } from 'react';
+import { Map, InfoWindow, Marker, GoogleApiWrapper } from 'google-maps-react';
+import Typography from '@material-ui/core/Typography';
+import firebase from '../firebase.js';
+
+// Google Maps API Key
+const API_KEY = 'AIzaSyAZ_0J01bA6wCbIPK4UBq2RUBC-hIqG4mM';
+
+// Map container styles
+const mapStyles = {
+    width: '100%',
+    height: '100%'
+}
+
+export class MapContainer extends Component {
+
+    // Get the user's location using Google's geolocation
+    getLocation = () => {
+        if (navigator.geolocation) {
+            navigator.geolocation.getCurrentPosition((position) => {
+                this.setState({
+                        myLatLng: {
+                            lat: position.coords.latitude,
+                            lng: position.coords.longitude
+                        }
+                    }
+                );
+            })
+        } else {
+            // If browser doesn't support geolocation or if user does not allow it, 
+            // center map on Grand Rapids, Michigan
+            this.setState({
+                    myLatLng: {
+                        lat: 42.9634,
+                        lng: 85.6681
+                    }
+                }
+            );
+        }
+    }
+
+    // When the component has mounted to the DOM, get the user's location
+    componentDidMount() {
+        this.getLocation();
+
+        const sightingsRef = firebase.database().ref('sightings');
+
+        sightingsRef.on('value', (snapshot) => {
+            let sightings = snapshot.val();
+            let newState = [];
+            for (let sighting in sightings) {
+                newState.push({
+                    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
+            });
+        });
+    }
+
+    // When the user clicks on a marker, pass the props related to that marker
+    // and show the related info window
+    onMarkerClick = (props, marker) => {
+        this.setState({
+            selectedPlace: props,
+            activeMarker: marker,
+            showingInfoWindow: true
+        });
+    }
+
+    onMapClick = (props, map, e) => {
+        if (this.state.showingInfoWindow) {
+            this.setState({
+                showingInfoWindow: false,
+                activeMarker: null
+            });
+        }
+    }
+
+    // Set the state of the component to contain user coordinates and initial 
+    // marker and info window information
+    state = {
+        myLatLng: {
+            lat: 42.9634,
+            lng: 85.6681
+        },
+        showingInfoWindow: false,
+        activeMarker: {},
+        selectedPlace: {},
+        sightings: []
+    }
+
+    render() {
+        return (
+            // Render the Google Map, Marker, and InfoWindow components
+            <div className = "sighting-google-map-container">
+                <Map
+                    style = { mapStyles }
+                    google = { this.props.google }
+                    initialCenter = { this.state.myLatLng }
+                    center = { this.state.myLatLng }
+                    defaultZoom = { 15 }
+                    onClick = { this.onMapClick } >
+
+                    <Marker 
+                        position = { this.state.myLatLng }
+                        onClick = { this.onMarkerClick }
+                        type = { 'You are here' } 
+                    />
+
+                    { this.state.sightings.map((sighting) => {
+                        return (
+                            <Marker
+                                key={ sighting.id }
+                                position={{ lat: sighting.lat, lng:sighting.lng }}
+                                onClick = { this.onMarkerClick }
+                                type = { 'Type: ' + sighting.type }
+                                confidence = { 'Confidence: ' + sighting.confidence }
+                                date = { 'Date: ' + sighting.date }
+                                time = { 'Time: ' + sighting.time }
+                                description = { 'Description: ' + sighting.desc }
+                            />
+                        )
+                    })}
+
+                    <InfoWindow
+                        marker = { this.state.activeMarker }
+                        visible = { this.state.showingInfoWindow } >
+
+                        <Fragment>
+                            <Typography variant = "display1" gutterBottom>
+                                { this.state.selectedPlace.type }
+                            </Typography>
+                            <Typography variant = "subheading" gutterBottom>
+                                { this.state.selectedPlace.confidence }
+                            </Typography>
+                            <Typography variant = "subheading" gutterBottom>
+                                { this.state.selectedPlace.date }
+                            </Typography>
+                            <Typography variant = "subheading" gutterBottom>
+                                { this.state.selectedPlace.time }
+                            </Typography>
+                            <Typography variant = "subheading" gutterBottom>
+                                { this.state.selectedPlace.description }
+                            </Typography>
+                        </Fragment>
+                    </InfoWindow>
+                </Map>
+            </div>
+        );
+    }
+}
+
+// Send the Google Map API Key with the MapContainer component
+export default GoogleApiWrapper({
+    apiKey: (API_KEY)
+})(MapContainer)

src/firebase.js

@@ -0,0 +1,14 @@
+import firebase from 'firebase/app';
+import 'firebase/database';
+
+const config = {
+    apiKey: "AIzaSyAYf9AbeYwLY892NRiQfn0AMtG9xIFAJbo",
+    authDomain: "marten-application.firebaseapp.com",
+    databaseURL: "https://marten-application.firebaseio.com",
+    projectId: "marten-application",
+    storageBucket: "marten-application.appspot.com",
+    messagingSenderId: "659856510832"
+};
+
+firebase.initializeApp(config);
+export default firebase;

src/pages/Map.js

@@ -1,14 +0,0 @@
-import React, { Component } from 'react';
-import Typography from '@material-ui/core/Typography';
-
-class Map extends Component {
-    render() {
-        return (
-            <Typography variant='display1' align='center' gutterBottom>
-                Map
-            </Typography>
-        );
-    }
-}
-
-export default Map;

src/pages/Report.js

@@ -0,0 +1,12 @@
+import React, { Component } from 'react';
+import ReportForm from '../components/ReportForm';
+
+class Report extends Component {
+    render() {
+        return (
+            <ReportForm/>
+        );
+    }
+}
+
+export default Report;

src/pages/ViewMap.js

@@ -0,0 +1,14 @@
+import React, { Component } from 'react';
+import GoogleMap from '../components/SightingMap';
+
+class Sighting extends Component {
+    render() {
+        return (
+            <div className='sighting-map'>
+                <GoogleMap/>
+            </div>
+        );
+    }
+}
+
+export default Sighting;