From 9296eb6e7b677760f57aa99271a03477bb1f2d7e Mon Sep 17 00:00:00 2001
From: wildscotsmen <thewildscotsmen@gmail.com>
Date: Thu, 18 Oct 2018 15:22:31 -0400
Subject: [PATCH] Updated report form to sponsor's specifications.

---
 src/components/ReportForm.js | 435 ++++++++++++++++++++++-------------
 1 file changed, 274 insertions(+), 161 deletions(-)

diff --git a/src/components/ReportForm.js b/src/components/ReportForm.js
index ac72000..1c84462 100644
--- a/src/components/ReportForm.js
+++ b/src/components/ReportForm.js
@@ -1,4 +1,4 @@
-import React, {Fragment} from 'react';
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import Grid from '@material-ui/core/Grid';
 import { withStyles } from '@material-ui/core/styles';
@@ -46,16 +46,11 @@ const styles = theme => ({
  * 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();
+function getYear(date) {
+  var d = new Date(date),
+    year = d.getFullYear();
 
-    if (month.length < 2) month = '0' + month;
-    if (day.length < 2) day = '0' + day;
-
-    return [year, month, day].join('-');
+  return year;
 }
 
 /** 
@@ -90,33 +85,117 @@ const sightingTypes = [
   },
 ];
 
+/** 
+ * Types of sightings. Label is what is
+ * viewed in the application, value is
+ * what is stored in the database.
+*/
+const monthTypes = [
+  {
+    value: '01',
+    label: 'January',
+  },
+  {
+    value: '02',
+    label: 'February',
+  },
+  {
+    value: '03',
+    label: 'March',
+  },
+  {
+    value: '04',
+    label: 'April',
+  },
+  {
+    value: '05',
+    label: 'May',
+  },
+  {
+    value: '06',
+    label: 'June',
+  },
+  {
+    value: '07',
+    label: 'July',
+  },
+  {
+    value: '08',
+    label: 'August',
+  },
+  {
+    value: '09',
+    label: 'September',
+  },
+  {
+    value: '10',
+    label: 'October',
+  },
+  {
+    value: '11',
+    label: 'November',
+  },
+  {
+    value: '12',
+    label: 'December',
+  },
+];
+
+/** 
+ * Types of sightings. Label is what is
+ * viewed in the application, value is
+ * what is stored in the database.
+*/
+const timeTypes = [
+  {
+    value: 'morning',
+    label: 'Morning',
+  },
+  {
+    value: 'midday',
+    label: 'Midday',
+  },
+  {
+    value: 'evening',
+    label: 'Evening',
+  },
+  {
+    value: 'night',
+    label: 'Night',
+  },
+  {
+    value: 'unknown',
+    label: 'Unknown',
+  },
+];
+
 /** 
  * 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',
-    },
-  ];
+  {
+    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.
@@ -136,8 +215,9 @@ class ReportForm extends React.Component {
    * State of form components.
    */
   state = {
-    date: formatDate(new Date()),
-    time: '00:00',
+    month: '01',
+    year: getYear(new Date()),
+    time: 'morning',
     type: 'visual',
     confidence: '1',
     desc: '',
@@ -159,13 +239,13 @@ class ReportForm extends React.Component {
   * Get the coordinates 
   * 
   */
- getCoordinates = (lat,lng) => {
+  getCoordinates = (lat, lng) => {
     let latitude = lat;
     let longitude = lng;
 
     this.setState({
-        lat: latitude,
-        lng: longitude
+      lat: latitude,
+      lng: longitude
     });
   }
 
@@ -181,7 +261,7 @@ class ReportForm extends React.Component {
     const sighting = {
       type: this.state.type,
       confidence: this.state.confidence,
-      date: this.state.date,
+      date:  this.state.year + '-' + this.state.month,
       time: this.state.time,
       desc: this.state.desc,
       lat: this.state.lat,
@@ -189,8 +269,9 @@ class ReportForm extends React.Component {
     }
     sightingsRef.push(sighting);
     this.setState({
-      date: formatDate(new Date()),
-      time: '00:00',
+      year: getYear(new Date()),
+      month: '01',
+      time: 'morning',
       type: 'visual',
       confidence: '1',
       desc: '',
@@ -198,7 +279,7 @@ class ReportForm extends React.Component {
       lng: ''
     });
   };
-  
+
 
   /**
    * The render method for this component.
@@ -210,129 +291,161 @@ class ReportForm extends React.Component {
      * 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>
+      <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>
-            </form>
-        </Fragment>
+
+                <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-time"
+                    select
+                    required
+                    label="Sighting time"
+                    name="sighting-time"
+                    className={classes.textField}
+                    value={this.state.time}
+                    onChange={this.handleChange('time')}
+                    SelectProps={{
+                      MenuProps: {
+                        className: classes.menu,
+                      },
+                    }}
+                  >
+                    {timeTypes.map(option => (
+                      <MenuItem key={option.value} value={option.value}>
+                        {option.label}
+                      </MenuItem>
+                    ))}
+                  </TextField>
+                </Grid>
+
+                <Grid item xs={12}>
+                  <TextField
+                    id="sighting-month"
+                    select
+                    required
+                    label="Sighting month"
+                    name="sighting-month"
+                    className={classes.textField}
+                    value={this.state.month}
+                    onChange={this.handleChange('month')}
+                    SelectProps={{
+                      MenuProps: {
+                        className: classes.menu,
+                      },
+                    }}
+                    helperText="Please select month of sighting"
+                  >
+                    {monthTypes.map(option => (
+                      <MenuItem key={option.value} value={option.value}>
+                        {option.label}
+                      </MenuItem>
+                    ))}
+                  </TextField>
+                </Grid>
+
+                <Grid item xs={12}>
+                  <TextField
+                    id="sighting-year"
+                    required
+                    label="Sighting year"
+                    name="sighting-year"
+                    value={this.state.year}
+                    type="number"
+                    className={classes.textField}
+                    onChange={this.handleChange('year')}
+                    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 = {