From cf9e4d384a90b571844734220877a859c5621c74 Mon Sep 17 00:00:00 2001
From: wildscotsmen <thewildscotsmen@gmail.com>
Date: Fri, 21 Sep 2018 15:11:52 -0400
Subject: [PATCH 1/5] Updated application to include report page and also added
 basic component for report form.

---
 src/components/Main.js       |  11 +-
 src/components/ReportForm.js | 210 +++++++++++++++++++++++++++++++++++
 src/pages/Report.js          |  15 +++
 3 files changed, 232 insertions(+), 4 deletions(-)
 create mode 100644 src/components/ReportForm.js
 create mode 100644 src/pages/Report.js

diff --git a/src/components/Main.js b/src/components/Main.js
index df578c0..cba1468 100644
--- a/src/components/Main.js
+++ b/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) {
@@ -48,6 +49,7 @@ class SimpleTabs extends React.Component {
         <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" />
@@ -55,10 +57,11 @@ class SimpleTabs extends React.Component {
             </Tabs>
         </AppBar>
         {value === 0 && <Home/>}
-        {value === 1 && <Sighting/>}
-        {value === 2 && <Quiz/>}
-        {value === 3 && <Map/>}
-        {value === 4 && <Info/>}
+        {value === 1 && <Report/>}
+        {value === 2 && <Sighting/>}
+        {value === 3 && <Quiz/>}
+        {value === 4 && <Map/>}
+        {value === 5 && <Info/>}
     </div>
     );
     }
diff --git a/src/components/ReportForm.js b/src/components/ReportForm.js
new file mode 100644
index 0000000..cab0f04
--- /dev/null
+++ b/src/components/ReportForm.js
@@ -0,0 +1,210 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+// import classNames from 'classnames';
+import { withStyles } from '@material-ui/core/styles';
+import MenuItem from '@material-ui/core/MenuItem';
+import TextField from '@material-ui/core/TextField';
+
+const styles = theme => ({
+  container: {
+    display: 'flex',
+    flexWrap: 'wrap',
+  },
+  textField: {
+    marginLeft: theme.spacing.unit,
+    marginRight: theme.spacing.unit,
+    marginTop: theme.spacing.unit,
+  },
+  dense: {
+    marginTop: 30,
+  },
+  menu: {
+    width: 200,
+  },
+});
+
+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',
+    },
+  ];
+
+class ReportForm extends React.Component {
+  state = {
+    date: formatDate(new Date()),
+    time: '00:00',
+    multiline: 'Controlled',
+    type: '',
+    confidence: ''
+  };
+
+  handleChange = name => event => {
+    this.setState({
+      [name]: event.target.value,
+    });
+  };
+
+  render() {
+    const { classes } = this.props;
+
+    return (
+      <form className={classes.container} noValidate autoComplete="off">
+        <TextField
+          id="select-sighting-type"
+          select
+          label="Select"
+          className={classes.textField}
+          value={this.state.type}
+          onChange={this.handleChange('type')}
+          SelectProps={{
+            MenuProps: {
+              className: classes.menu,
+            },
+          }}
+          helperText="Please select type of sighting"
+          margin="normal"
+          variant="outlined"
+        >
+          {sightingTypes.map(option => (
+            <MenuItem key={option.value} value={option.value}>
+              {option.label}
+            </MenuItem>
+          ))}
+        </TextField>
+
+        <TextField
+          id="select-confidence"
+          select
+          label="Select"
+          className={classes.textField}
+          value={this.state.confidence}
+          onChange={this.handleChange('confidence')}
+          SelectProps={{
+            MenuProps: {
+              className: classes.menu,
+            },
+          }}
+          helperText="Please select confidence in sighting"
+          margin="normal"
+          variant="outlined"
+        >
+          {confidenceLevels.map(option => (
+            <MenuItem key={option.value} value={option.value}>
+              {option.label}
+            </MenuItem>
+          ))}
+        </TextField>
+
+        <TextField
+            id="sighting-date"
+            label="Sighting date"
+            type="date"
+            value={this.state.date}
+            className={classes.textField}
+            onChange={this.handleChange('date')}
+            InputLabelProps={{
+              shrink: true,
+            }}
+          />
+
+          <TextField
+            id="sighting-time"
+            label="Sighting time"
+            type="time"
+            value={this.state.time}
+            className={classes.textField}
+            onChange={this.handleChange('time')}
+            InputLabelProps={{
+              shrink: true,
+            }}
+          />
+        <TextField
+          id="sighting-description"
+          label="Description"
+          multiline
+          rows="5"
+          placeholder="Describe the sighting to the best of your ability."
+          defaultValue=""
+          className={classes.textField}
+          margin="normal"
+          variant="outlined"
+          InputLabelProps={{
+            shrink: true,
+          }}
+        />
+      </form>
+    );
+  }
+}
+
+ReportForm.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(ReportForm);
\ No newline at end of file
diff --git a/src/pages/Report.js b/src/pages/Report.js
new file mode 100644
index 0000000..3a46a74
--- /dev/null
+++ b/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='center' gutterBottom>
+            <ReportForm/>
+            </Typography>
+        );
+    }
+}
+
+export default Report;

From c22bcae00d85a6b4e14e4dcdebe6c97a7a509b02 Mon Sep 17 00:00:00 2001
From: wildscotsmen <thewildscotsmen@gmail.com>
Date: Fri, 21 Sep 2018 16:38:20 -0400
Subject: [PATCH 2/5] Improved layout of form. Actually got data sending over a
 GET form method.

---
 src/components/ReportForm.js | 231 ++++++++++++++++++++++-------------
 src/pages/Report.js          |   2 +-
 2 files changed, 147 insertions(+), 86 deletions(-)

diff --git a/src/components/ReportForm.js b/src/components/ReportForm.js
index cab0f04..b380827 100644
--- a/src/components/ReportForm.js
+++ b/src/components/ReportForm.js
@@ -1,19 +1,31 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-// import classNames from 'classnames';
+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';
 
+/**
+ * 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,
+    marginLeft: theme.spacing.unit * 2,
     marginRight: theme.spacing.unit,
-    marginTop: 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,
@@ -23,6 +35,14 @@ const styles = theme => ({
   },
 });
 
+/**
+ * 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),
@@ -95,109 +115,150 @@ const confidenceLevels = [
     },
   ];
 
+/**
+ * The form compnent.
+ */
 class ReportForm extends React.Component {
+  /**
+   * State of form components.
+   */
   state = {
     date: formatDate(new Date()),
     time: '00:00',
-    multiline: 'Controlled',
     type: '',
     confidence: ''
   };
 
+  /**
+   * Handles state change in form
+   * components.
+   */
   handleChange = name => event => {
     this.setState({
       [name]: event.target.value,
     });
   };
 
+  /**
+   * The render method for this component.
+   */
   render() {
     const { classes } = this.props;
 
+    /**
+     * The actual form.
+     */
     return (
-      <form className={classes.container} noValidate autoComplete="off">
-        <TextField
-          id="select-sighting-type"
-          select
-          label="Select"
-          className={classes.textField}
-          value={this.state.type}
-          onChange={this.handleChange('type')}
-          SelectProps={{
-            MenuProps: {
-              className: classes.menu,
-            },
-          }}
-          helperText="Please select type of sighting"
-          margin="normal"
-          variant="outlined"
-        >
-          {sightingTypes.map(option => (
-            <MenuItem key={option.value} value={option.value}>
-              {option.label}
-            </MenuItem>
-          ))}
-        </TextField>
+      <form className={classes.container} noValidate autoComplete="off" method='GET'>
+        <Grid container spacing={8}>
+                <Grid item xs={5} 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>
 
-        <TextField
-          id="select-confidence"
-          select
-          label="Select"
-          className={classes.textField}
-          value={this.state.confidence}
-          onChange={this.handleChange('confidence')}
-          SelectProps={{
-            MenuProps: {
-              className: classes.menu,
-            },
-          }}
-          helperText="Please select confidence in sighting"
-          margin="normal"
-          variant="outlined"
-        >
-          {confidenceLevels.map(option => (
-            <MenuItem key={option.value} value={option.value}>
-              {option.label}
-            </MenuItem>
-          ))}
-        </TextField>
+                <Grid item xs={5} 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>
 
-        <TextField
-            id="sighting-date"
-            label="Sighting date"
-            type="date"
-            value={this.state.date}
-            className={classes.textField}
-            onChange={this.handleChange('date')}
-            InputLabelProps={{
-              shrink: true,
-            }}
-          />
+                <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>
 
-          <TextField
-            id="sighting-time"
-            label="Sighting time"
-            type="time"
-            value={this.state.time}
-            className={classes.textField}
-            onChange={this.handleChange('time')}
-            InputLabelProps={{
-              shrink: true,
-            }}
-          />
-        <TextField
-          id="sighting-description"
-          label="Description"
-          multiline
-          rows="5"
-          placeholder="Describe the sighting to the best of your ability."
-          defaultValue=""
-          className={classes.textField}
-          margin="normal"
-          variant="outlined"
-          InputLabelProps={{
-            shrink: true,
-          }}
-        />
+                <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."
+                    defaultValue=""
+                    className={classes.textField}
+                    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>
     );
   }
diff --git a/src/pages/Report.js b/src/pages/Report.js
index 3a46a74..8a7909d 100644
--- a/src/pages/Report.js
+++ b/src/pages/Report.js
@@ -5,7 +5,7 @@ import Typography from '@material-ui/core/Typography';
 class Report extends Component {
     render() {
         return (
-            <Typography variant='display1' align='center' gutterBottom>
+            <Typography variant='display1' align='left' gutterBottom>
             <ReportForm/>
             </Typography>
         );

From 2a402407ae2071f24e391adebe1a52800348802b Mon Sep 17 00:00:00 2001
From: wildscotsmen <thewildscotsmen@gmail.com>
Date: Fri, 21 Sep 2018 17:19:56 -0400
Subject: [PATCH 3/5] Added proper form validation for description field.

---
 src/components/ReportForm.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/ReportForm.js b/src/components/ReportForm.js
index b380827..793928a 100644
--- a/src/components/ReportForm.js
+++ b/src/components/ReportForm.js
@@ -125,8 +125,8 @@ class ReportForm extends React.Component {
   state = {
     date: formatDate(new Date()),
     time: '00:00',
-    type: '',
-    confidence: ''
+    type: 'visual',
+    confidence: '1'
   };
 
   /**
@@ -149,7 +149,7 @@ class ReportForm extends React.Component {
      * The actual form.
      */
     return (
-      <form className={classes.container} noValidate autoComplete="off" method='GET'>
+      <form className={classes.container} autoComplete="off" method='GET'>
         <Grid container spacing={8}>
                 <Grid item xs={5} xl={2}>
                     <TextField

From ed0a607560d13ebb084c09811399b398e382e82d Mon Sep 17 00:00:00 2001
From: wildscotsmen <thewildscotsmen@gmail.com>
Date: Fri, 21 Sep 2018 17:24:40 -0400
Subject: [PATCH 4/5] Fixed spacing issues between desktop and mobile.

---
 src/components/ReportForm.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/ReportForm.js b/src/components/ReportForm.js
index 793928a..6fd3be1 100644
--- a/src/components/ReportForm.js
+++ b/src/components/ReportForm.js
@@ -151,7 +151,7 @@ class ReportForm extends React.Component {
     return (
       <form className={classes.container} autoComplete="off" method='GET'>
         <Grid container spacing={8}>
-                <Grid item xs={5} xl={2}>
+                <Grid item xs={12} xl={2}>
                     <TextField
                     id="select-sighting-type"
                     select
@@ -176,7 +176,7 @@ class ReportForm extends React.Component {
                     </TextField>
                 </Grid>
 
-                <Grid item xs={5} xl={2}>
+                <Grid item xs={12} xl={2}>
                     <TextField
                     id="select-confidence"
                     select

From c3f05ef67fe4f3a8d3dd58cc65b4fc5478dcc9c0 Mon Sep 17 00:00:00 2001
From: wildscotsmen <thewildscotsmen@gmail.com>
Date: Sun, 23 Sep 2018 19:37:35 -0400
Subject: [PATCH 5/5] Got the form to send data to Firebase. Still needs a
 toast or something to tell the user the data was sent.

---
 package.json                 |  1 +
 src/components/ReportForm.js | 50 ++++++++++++++++++++++++++++++++----
 src/firebase.js              | 14 ++++++++++
 3 files changed, 60 insertions(+), 5 deletions(-)
 create mode 100644 src/firebase.js

diff --git a/package.json b/package.json
index c7c5f72..7a7448a 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@material-ui/core": "^3.1.0",
+    "firebase": "^5.5.1",
     "react": "^16.5.1",
     "react-dom": "^16.5.1",
     "react-router": "^4.3.1",
diff --git a/src/components/ReportForm.js b/src/components/ReportForm.js
index 6fd3be1..4dd046e 100644
--- a/src/components/ReportForm.js
+++ b/src/components/ReportForm.js
@@ -5,6 +5,7 @@ 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
@@ -116,9 +117,19 @@ const confidenceLevels = [
   ];
 
 /**
- * The form compnent.
+ * 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.
    */
@@ -126,7 +137,8 @@ class ReportForm extends React.Component {
     date: formatDate(new Date()),
     time: '00:00',
     type: 'visual',
-    confidence: '1'
+    confidence: '1',
+    desc: ''
   };
 
   /**
@@ -139,6 +151,33 @@ class ReportForm extends React.Component {
     });
   };
 
+  /**
+   * 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.
    */
@@ -149,7 +188,7 @@ class ReportForm extends React.Component {
      * The actual form.
      */
     return (
-      <form className={classes.container} autoComplete="off" method='GET'>
+      <form className={classes.container} autoComplete="off" onSubmit={this.handleSubmit}>
         <Grid container spacing={8}>
                 <Grid item xs={12} xl={2}>
                     <TextField
@@ -243,8 +282,9 @@ class ReportForm extends React.Component {
                     multiline
                     rows="5"
                     placeholder="Describe the sighting to the best of your ability."
-                    defaultValue=""
+                    value={this.state.desc}
                     className={classes.textField}
+                    onChange={this.handleChange('desc')}
                     margin="normal"
                     variant="outlined"
                     InputLabelProps={{
@@ -261,7 +301,7 @@ class ReportForm extends React.Component {
         </Grid>
       </form>
     );
-  }
+  }  
 }
 
 ReportForm.propTypes = {
diff --git a/src/firebase.js b/src/firebase.js
new file mode 100644
index 0000000..f26bb7a
--- /dev/null
+++ b/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;
\ No newline at end of file