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';
@@ -46,16 +46,11 @@ const styles = theme => ({
  * 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 +85,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: '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
@@ -116,7 +195,7 @@ const confidenceLevels = [
     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()),
+    month: '01',
-    time: '00:00',
+    year: getYear(new Date()),
+    time: 'morning',
     type: 'visual',
     confidence: '1',
     desc: '',
@@ -159,7 +239,7 @@ class ReportForm extends React.Component {
   * Get the coordinates 
   * 
   */
- getCoordinates = (lat,lng) => {
+  getCoordinates = (lat, lng) => {
     let latitude = lat;
     let longitude = lng;
 
@@ -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()),
+      year: getYear(new Date()),
-      time: '00:00',
+      month: '01',
+      time: 'morning',
       type: 'visual',
       confidence: '1',
       desc: '',
@@ -267,31 +348,63 @@ 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,
+                      },
+                    }}
+                    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,
                     }}
@@ -326,7 +439,7 @@ class ReportForm extends React.Component {
               </Grid>
             </Grid>
             <Grid item xs={6}>
-                        <GoogleMap onClick={this.getCoordinates}/>
+              <GoogleMap onClick={this.getCoordinates} />
             </Grid>
           </Grid>
         </form>