Cleaned code for consistency. Additionally added month function for report form.

src/components/ReportForm.js

@@ -53,19 +53,6 @@ const styles = theme => ({
   },
 });
 
-/**
- * Function for formatting the
- * year as a string that
- * Material UI can use.
- * @param {*} date, Date passed in. 
- */
-function getYear(date) {
-  var d = new Date(date),
-    year = d.getFullYear();
-
-  return year;
-}
-
 /** 
  * Types of sightings. Label is what is
  * viewed in the application, value is
@@ -228,8 +215,8 @@ class ReportForm extends React.Component {
    * State of form components.
    */
   state = {
-    month: '01',
-    year: getYear(new Date()),
+    month: this.getMonth(new Date()),
+    year: this.getYear(new Date()),
     time: 'unknown',
     type: 'visual',
     confidence: '1',
@@ -249,6 +236,38 @@ class ReportForm extends React.Component {
     });
   };
 
+  /**
+  * Function for formatting the
+  * year as a string that
+  * Material UI can use.
+  * @param {*} date, Date passed in. 
+  */
+  getYear = date => {
+    var d = new Date(date),
+      year = d.getFullYear();
+
+    return year;
+  }
+
+  /**
+  * Function for formatting the
+  * month as a string that
+  * Material UI can use.
+  * @param {*} date, Date passed in. 
+  */
+  getMonth = date => {
+    var d = new Date(date),
+    month = d.getMonth();
+
+    month = month.toString();
+
+    if (month.length == 1) {
+      month = "0" + month;
+    }
+
+    return month;
+  }
+
   /**
    * Handles closing the toast.
    */
@@ -294,8 +313,8 @@ class ReportForm extends React.Component {
     }
     sightingsRef.push(sighting);
     this.setState({
-      year: getYear(new Date()),
-      month: '01',
+      year: this.getYear(new Date()),
+      month: this.getMonth(new Date()),
       time: 'unknown',
       type: 'visual',
       confidence: '1',
@@ -479,7 +498,7 @@ class ReportForm extends React.Component {
           ContentProps={{
             'aria-describedby': 'message-id',
           }}
-          message={<span id="message-id" className={classes.message}><CheckCircleIcon className={classes.icon}/>Report received.</span>}
+          message={<span id="message-id" className={classes.message}><CheckCircleIcon className={classes.icon} />Report received.</span>}
           action={[
             <IconButton
               key="close"

src/components/SightingMap.js

@@ -101,40 +101,6 @@ const confidenceLevels = [
     },
 ];
 
-/**
- * Gets formatted confidence value.
- */
-function getConfidence(item) {
-    for (var i = 0; i < confidenceLevels.length; i++) {
-        if (confidenceLevels[i].value === item) {
-            return confidenceLevels[i].label;
-        }
-    }
-
-}
-
-/**
- * Gets formatted time value.
- */
-function getTime(item) {
-    for (var i = 0; i < timeTypes.length; i++) {
-        if (timeTypes[i].value === item) {
-            return timeTypes[i].label;
-        }
-    }
-}
-
-/**
- * Gets formatted type value.
- */
-function getType(item) {
-    for (var i = 0; i < sightingTypes.length; i++) {
-        if (sightingTypes[i].value === item) {
-            return sightingTypes[i].label;
-        }
-    }
-}
-
 export class MapContainer extends Component {
 
     // Get the user's location using Google's geolocation
@@ -162,6 +128,41 @@ export class MapContainer extends Component {
         }
     }
 
+    /**
+    * Gets formatted type value.
+    */
+    getType = item => {
+        for (var i = 0; i < sightingTypes.length; i++) {
+            if (sightingTypes[i].value === item) {
+                return sightingTypes[i].label;
+            }
+        }
+    }
+
+
+    /**
+     * Gets formatted time value.
+     */
+    getTime = item => {
+        for (var i = 0; i < timeTypes.length; i++) {
+            if (timeTypes[i].value === item) {
+                return timeTypes[i].label;
+            }
+        }
+    }
+
+    /**
+    * Gets formatted confidence value.
+    */
+    getConfidence = item => {
+        for (var i = 0; i < confidenceLevels.length; i++) {
+            if (confidenceLevels[i].value === item) {
+                return confidenceLevels[i].label;
+            }
+        }
+
+    }
+
     // When the component has mounted to the DOM, get the user's location
     componentDidMount() {
         this.getLocation();
@@ -246,14 +247,14 @@ export class MapContainer extends Component {
                     {this.state.sightings.map((sighting) => {
                         return (
                             <Marker
-                                key = {sighting.id}
-                                position = {{ lat: sighting.lat, lng: sighting.lng }}
-                                onClick = {this.onMarkerClick}
-                                type = {'Type: ' + getType(sighting.type)}
-                                confidence = {<Fragment><b>Confidence:</b> {getConfidence(sighting.confidence)}</Fragment>}
-                                date = {<Fragment><b>Date:</b> {this.formatDate(sighting.date)}</Fragment>}
-                                time = {<Fragment><b>Time:</b> {getTime(sighting.time)}</Fragment>}
-                                description = {<Fragment><b>Description:</b> {sighting.desc}</Fragment>}
+                                key={sighting.id}
+                                position={{ lat: sighting.lat, lng: sighting.lng }}
+                                onClick={this.onMarkerClick}
+                                type={'Type: ' + this.getType(sighting.type)}
+                                confidence={<Fragment><b>Confidence:</b> {this.getConfidence(sighting.confidence)}</Fragment>}
+                                date={<Fragment><b>Date:</b> {this.formatDate(sighting.date)}</Fragment>}
+                                time={<Fragment><b>Time:</b> {this.getTime(sighting.time)}</Fragment>}
+                                description={<Fragment><b>Description:</b> {sighting.desc}</Fragment>}
                             />
                         )
                     })}