resolve merge conflicts

package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "@material-ui/core": "^3.1.0",
     "google-maps-react": "^2.0.2",
+    "firebase": "^5.5.1",
     "react": "^16.5.1",
     "react-dom": "^16.5.1",
     "react-router": "^4.3.1",

src/components/Main.js

@@ -9,6 +9,7 @@ import Home from '../pages/Home';
 import Map from '../pages/Map';
 import Quiz from '../pages/Quiz';
 import Sighting from '../pages/Sighting';
+import Report from '../pages/Report';
 import Info from '../pages/Info';
 
 function TabContainer(props) {
@@ -43,24 +44,26 @@ class SimpleTabs extends React.Component {
         const { classes } = this.props;
         const { value } = this.state;
 
-        return (
+    return (
-        <div className={classes.root}>
+    <div className={classes.root}>
-            <AppBar position="static">
+        <AppBar position="static">
-                <Tabs value={value} onChange={this.handleChange} centered>
+            <Tabs value={value} onChange={this.handleChange} centered>
-                    <Tab label="Home" />
+                <Tab label="Home" />
-                    <Tab label="Sightings" />
+                <Tab label="Report a Sighting"/>
-                    <Tab label="Trail-Cam Quiz" />
+                <Tab label="Sightings" />
-                    <Tab label="View Map" />
+                <Tab label="Trail-Cam Quiz" />
-                    <Tab label="Marten Info" />
+                <Tab label="View Map" />
-                </Tabs>
+                <Tab label="Marten Info" />
-            </AppBar>
+            </Tabs>
-            {value === 0 && <Home/>}
+        </AppBar>
-            {value === 1 && <Sighting/>}
+        {value === 0 && <Home/>}
-            {value === 2 && <Quiz/>}
+        {value === 1 && <Report/>}
-            {value === 3 && <Map/>}
+        {value === 2 && <Sighting/>}
-            {value === 4 && <Info/>}
+        {value === 3 && <Quiz/>}
-        </div>
+        {value === 4 && <Map/>}
-        );
+        {value === 5 && <Info/>}
+    </div>
+    );
     }
 }
 

src/components/ReportForm.js

@@ -0,0 +1,311 @@
+import React 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';
+
+/**
+ * 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,
+  },
+  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: ''
+  };
+
+  /**
+   * Handles state change in form
+   * components.
+   */
+  handleChange = name => event => {
+    this.setState({
+      [name]: event.target.value,
+    });
+  };
+
+  /**
+   * 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
+    }
+    sightingsRef.push(sighting);
+    this.setState({
+      date: formatDate(new Date()),
+      time: '00:00',
+      type: 'visual',
+      confidence: '1',
+      desc: ''
+    });
+  };
+  
+
+  /**
+   * The render method for this component.
+   */
+  render() {
+    const { classes } = this.props;
+
+    /**
+     * The actual form.
+     */
+    return (
+      <form className={classes.container} autoComplete="off" onSubmit={this.handleSubmit}>
+        <Grid container spacing={8}>
+                <Grid item xs={12} xl={2}>
+                    <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} xl={2}>
+                    <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>
+      </form>
+    );
+  }  
+}
+
+ReportForm.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(ReportForm);

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/Report.js

@@ -0,0 +1,15 @@
+import React, { Component } from 'react';
+import ReportForm from '../components/ReportForm';
+import Typography from '@material-ui/core/Typography';
+
+class Report extends Component {
+    render() {
+        return (
+            <Typography variant='display1' align='left' gutterBottom>
+            <ReportForm/>
+            </Typography>
+        );
+    }
+}
+
+export default Report;