Updated report form to sponsor's specifications.

src/components/ReportForm.js

@@ -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
@@ -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: '',
@@ -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,
                     }}