Merge pull request #33 from alDuncanson/refactor/report-form

Updated report form to sponsor's specifications.

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';
@@ -40,22 +40,15 @@ const styles = theme => ({
 
 /**
  * Function for formatting the
- * date as a string that
+ * year as a string that
- * Material UI can use. We'll
+ * Material UI can use.
- * also store the date like
- * this string in the database.
  * @param {*} date, Date passed in. 
  */
-function formatDate(date) {
+function getYear(date) {
   var d = new Date(date),
-        month = '' + (d.getMonth() + 1),
-        day = '' + d.getDate(),
     year = d.getFullYear();
 
-    if (month.length < 2) month = '0' + month;
+  return year;
-    if (day.length < 2) day = '0' + day;
-
-    return [year, month, day].join('-');
 }
 
 /** 
@@ -90,6 +83,90 @@ 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: 'unknown',
+    label: 'Unknown',
+  },
+  {
+    value: 'morning',
+    label: 'Morning',
+  },
+  {
+    value: 'midday',
+    label: 'Midday',
+  },
+  {
+    value: 'evening',
+    label: 'Evening',
+  },
+  {
+    value: 'night',
+    label: 'Night',
+  },
+];
+
 /** 
  * Levels of confidence. Label is what is
  * viewed in the application, value is
@@ -98,25 +175,25 @@ const sightingTypes = [
 const confidenceLevels = [
   {
     value: '1',
-      label: '1 - Strongly unconfident',
+    label: '1 - Strongly disagree',
   },
   {
     value: '2',
-      label: '2 - Unconfident',
+    label: '2 - Disagree',
   },
   {
     value: '3',
-      label: '3 - Somewhat confident',
+    label: '3 - Neutral',
   },
   {
     value: '4',
-      label: '4 - Confident',
+    label: '4 - Agree',
   },
   {
     value: '5',
-      label: '5 - Very confident',
+    label: '5 - Strongly agree',
   },
-  ];
+];
 
 /**
  * The form component.
@@ -136,8 +213,9 @@ class ReportForm extends React.Component {
    * State of form components.
    */
   state = {
-    date: formatDate(new Date()),
+    month: '01',
-    time: '00:00',
+    year: getYear(new Date()),
+    time: 'unknown',
     type: 'visual',
     confidence: '1',
     desc: '',
@@ -159,7 +237,7 @@ class ReportForm extends React.Component {
   * Get the coordinates 
   * 
   */
- getCoordinates = (lat,lng) => {
+  getCoordinates = (lat, lng) => {
     let latitude = lat;
     let longitude = lng;
 
@@ -181,7 +259,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 +267,9 @@ class ReportForm extends React.Component {
     }
     sightingsRef.push(sighting);
     this.setState({
-      date: formatDate(new Date()),
+      year: getYear(new Date()),
-      time: '00:00',
+      month: '01',
+      time: 'unknown',
       type: 'visual',
       confidence: '1',
       desc: '',
@@ -255,7 +334,7 @@ class ReportForm extends React.Component {
                         className: classes.menu,
                       },
                     }}
-                                helperText="Please select confidence in sighting"
+                    helperText="I am confident of my marten sighting"
                   >
                     {confidenceLevels.map(option => (
                       <MenuItem key={option.value} value={option.value}>
@@ -267,31 +346,62 @@ class ReportForm extends React.Component {
 
                 <Grid item xs={12}>
                   <TextField
-                                    id="sighting-date"
+                    id="sighting-time"
+                    select
                     required
-                                    label="Sighting date"
+                    label="Sighting time"
-                                    name="sighting-date"
+                    name="sighting-time"
-                                    type="date"
-                                    value={this.state.date}
                     className={classes.textField}
-                                    onChange={this.handleChange('date')}
+                    value={this.state.time}
-                                    InputLabelProps={{
+                    onChange={this.handleChange('time')}
-                                    shrink: true,
+                    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-time"
+                    id="sighting-month"
+                    select
                     required
-                                    label="Sighting time"
+                    label="Sighting month"
-                                    name="sighting-time"
+                    name="sighting-month"
-                                    type="time"
-                                    margin="normal"
-                                    value={this.state.time}
                     className={classes.textField}
-                                    onChange={this.handleChange('time')}
+                    value={this.state.month}
+                    onChange={this.handleChange('month')}
+                    SelectProps={{
+                      MenuProps: {
+                        className: classes.menu,
+                      },
+                    }}
+                  >
+                    {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,
                     }}
@@ -326,7 +436,7 @@ class ReportForm extends React.Component {
               </Grid>
             </Grid>
             <Grid item xs={6}>
-                        <GoogleMap onClick={this.getCoordinates}/>
+              <GoogleMap onClick={this.getCoordinates} />
             </Grid>
           </Grid>
         </form>