Cleaned up code according to what we decided on. Also formatted raw database data in SightingDetail component. Finally, ordered list in reverse order.

2018-10-31 18:52:37 -04:00 · 2018-10-31 18:52:37 -04:00 · bfbb27842a
parent a9bf3aa5e4
commit bfbb27842a
9 changed files with 222 additions and 100 deletions
--- a/src/components/Flamelink.js
+++ b/src/components/Flamelink.js
@ -2,7 +2,6 @@ import { Component } from 'react';

 class Flamelink extends Component {
    render() {
-
        return(null);
    }
 }
--- a/src/components/Main.js
+++ b/src/components/Main.js
@ -83,7 +83,7 @@ class ResponsiveDrawer extends React.Component {
    nav = (text) => {
        this.setState({
            key: text
-        })
+        });
    }

    render() {
@ -189,9 +189,9 @@ class ResponsiveDrawer extends React.Component {
                    {this.state.key === 'Report' && <Report />}
                    {this.state.key === 'Map' && <ViewMap />}
                    {this.state.key === 'List' && <SightingList />}
-                    {this.state.key === 'Easy-Quiz' && <Quiz difficulty='Easy'/>}
-                    {this.state.key === 'Medium-Quiz' && <Quiz difficulty='Medium'/>}
-                    {this.state.key === 'Hard-Quiz' && <Quiz difficulty='Hard'/>}
+                    {this.state.key === 'Easy-Quiz' && <Quiz difficulty='Easy' />}
+                    {this.state.key === 'Medium-Quiz' && <Quiz difficulty='Medium' />}
+                    {this.state.key === 'Hard-Quiz' && <Quiz difficulty='Hard' />}
                </main>
            </div>
        );
--- a/src/components/QuizGame.js
+++ b/src/components/QuizGame.js
@ -239,33 +239,33 @@ class QuizGame extends React.Component {
     * @param {*} difficulty The difficulty setting passed in.
     */
    pickDifficulty = difficulty => {
-        let level
+        let level;

        switch (difficulty) {
            case 'Easy':
-                this.easy.questions = this.shuffleArray(this.easy.questions)
-                level = this.easy
-                break
+                this.easy.questions = this.shuffleArray(this.easy.questions);
+                level = this.easy;
+                break;
            case 'Medium':
-                this.medium.questions = this.shuffleArray(this.medium.questions)
-                level = this.medium
-                break
+                this.medium.questions = this.shuffleArray(this.medium.questions);
+                level = this.medium;
+                break;
            case 'Hard':
-                this.hard.questions = this.shuffleArray(this.hard.questions)
-                level = this.hard
-                break
+                this.hard.questions = this.shuffleArray(this.hard.questions);
+                level = this.hard;
+                break;
            default:
-                break
+                break;
        }

-        return level
+        return level;
    }

    // The state of the component.
    state = {
        difficulty: this.pickDifficulty(this.props.difficulty),
        key: Math.random()
-    }
+    };

    // Renders the quiz component.
    render() {
--- a/src/components/ReportForm.js
+++ b/src/components/ReportForm.js
@ -266,7 +266,7 @@ getMonth = date => {
    this.setState({
      [name]: event.target.value,
    });
-  };
+  }

  /**
   * Handles closing the toast.
@ -277,7 +277,7 @@ getMonth = date => {
    }

    this.setState({ open: false });
-  };
+  }

  /*
  * Get the coordinates 
@ -323,7 +323,7 @@ getMonth = date => {
      lng: '',
      open: true
    });
-  };
+  }


  /**
--- a/src/components/ReportMap.js
+++ b/src/components/ReportMap.js
@ -9,7 +9,7 @@ const API_KEY = 'AIzaSyAZ_0J01bA6wCbIPK4UBq2RUBC-hIqG4mM';
 const mapStyles = {
    width: '100%',
    height: '100%'
-}
+};

 export class MapContainer extends Component {

@ -68,13 +68,13 @@ export class MapContainer extends Component {
                lat: e.latLng.lat(),
                lng: e.latLng.lng()
            }
-        })
+        });

        let lat = e.latLng.lat();
        let lng = e.latLng.lng();

        if (this.props.onClick) {
-            this.props.onClick(lat,lng);
+            this.props.onClick(lat, lng);
        }
    }

@ -98,36 +98,36 @@ export class MapContainer extends Component {

        return (
            // Render the Google Map, Marker, and InfoWindow components
-            <div className = "report-google-map-container">
+            <div className="report-google-map-container">
                <Map
-                    style = { mapStyles }
-                    google = { this.props.google }
-                    initialCenter = { this.state.myLatLng }
-                    center = { this.state.myLatLng }
-                    defaultZoom = { 15 }
-                    onClick = { this.onMapClick } >
+                    style={mapStyles}
+                    google={this.props.google}
+                    initialCenter={this.state.myLatLng}
+                    center={this.state.myLatLng}
+                    defaultZoom={15}
+                    onClick={this.onMapClick} >

                    <Marker
-                        position = { this.state.markerLatLng }
+                        position={this.state.markerLatLng}
                    />

                    <Marker
-                        position = { this.state.myLatLng }
-                        onClick = { this.onMarkerClick }
-                        title = { 'You are here' }
-                        name = { '' } 
+                        position={this.state.myLatLng}
+                        onClick={this.onMarkerClick}
+                        title={'You are here'}
+                        name={''}
                    />

                    <InfoWindow
-                        marker = { this.state.activeMarker }
-                        visible = { this.state.showingInfoWindow } >
+                        marker={this.state.activeMarker}
+                        visible={this.state.showingInfoWindow} >

                        <Fragment>
-                            <Typography variant = "display1" gutterBottom>
-                                { this.state.selectedPlace.title }
+                            <Typography variant="display1" gutterBottom>
+                                {this.state.selectedPlace.title}
                            </Typography>
-                            <Typography variant = "subheading" gutterBottom>
-                                { this.state.selectedPlace.name }
+                            <Typography variant="subheading" gutterBottom>
+                                {this.state.selectedPlace.name}
                            </Typography>
                        </Fragment>
                    </InfoWindow>
@ -138,6 +138,4 @@ export class MapContainer extends Component {
 }

 // Send the Google Map API Key with the MapContainer component
-export default GoogleApiWrapper({
-    apiKey: (API_KEY)
-})(MapContainer)
+export default GoogleApiWrapper({ apiKey: (API_KEY) })(MapContainer);
--- a/src/components/SightingDetail.js
+++ b/src/components/SightingDetail.js
@ -1,24 +1,154 @@
 import React, { Component, Fragment } from 'react';
 import Disqus from 'disqus-react';
+import moment from 'moment';
 import SightingDetailMap from './SightingDetailMap';

+/** 
+  * Types of sightings. Label is what is
+  * viewed in the application, value is
+  * what is stored in the database.
+  */
+ const sightingTypes = [
+    {
+        value: 'visual',
+        label: 'Visual',
+    },
+    {
+        value: 'roadkill',
+        label: 'Roadkill',
+    },
+    {
+        value: 'trapped',
+        label: 'Trapped',
+    },
+    {
+        value: 'viewed_tracks',
+        label: 'Viewed Tracks',
+    },
+    {
+        value: 'photo',
+        label: 'Photo',
+    },
+    {
+        value: 'other',
+        label: 'Other',
+    },
+];
+
+/** 
+ * 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
+ * what is stored in the database.
+*/
+const confidenceLevels = [
+    {
+        value: '1',
+        label: '1 - Strongly disagree',
+    },
+    {
+        value: '2',
+        label: '2 - Disagree',
+    },
+    {
+        value: '3',
+        label: '3 - Neutral',
+    },
+    {
+        value: '4',
+        label: '4 - Agree',
+    },
+    {
+        value: '5',
+        label: '5 - Strongly agree',
+    },
+];
+
 class SightingDetail 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;
+            }
+        }
+
+    }
+
+    formatDate = date => {
+        return (moment(date, "YYYY-MM").format("MMMM YYYY").toString());
+    }
+
    render() {
        const disqusShortname = 'https-marten-application-netlify-com';
        const disqusConfig = {
            url: `http://localhost:3000/${this.props.detail.id}`,
            identifier: this.props.detail.id,
            title: this.props.detail.id
-        }
+        };

        return (
            <Fragment>
-                <SightingDetailMap lat={this.props.detail.lat} lng={this.props.detail.lng}/>
+                <SightingDetailMap lat={this.props.detail.lat} lng={this.props.detail.lng} />
                <div className='sighting-details-content'>
-                    <p>{`Confidence: ${this.props.detail.confidence}`}</p>
-                    <p>{`When: ${this.props.detail.date}, ${this.props.detail.time}`}</p>
-                    <p>{`Where: ${this.props.detail.lat} degrees N, and ${this.props.detail.lng} degrees E`}</p>
+                    <p><b>Type:</b> {this.getType(this.props.detail.type)}</p>
+                    <p><b>When:</b> {this.formatDate(this.props.detail.date)}, {this.getTime(this.props.detail.time)}</p>
+                    <p><b>Where:</b> {this.props.detail.lat} degrees N, and {this.props.detail.lng} degrees E</p>
+                    <p><b>I am confident of my sighting:</b> {this.getConfidence(this.props.detail.confidence)}</p>
+                    <hr/>
                    <p>{`${this.props.detail.desc}`}</p>
                </div>
                <Disqus.DiscussionEmbed shortname={disqusShortname} config={disqusConfig} />
--- a/src/components/SightingDetailMap.js
+++ b/src/components/SightingDetailMap.js
@ -8,23 +8,23 @@ const API_KEY = 'AIzaSyAZ_0J01bA6wCbIPK4UBq2RUBC-hIqG4mM';
 const mapStyles = {
    width: '100%',
    height: '100%'
-}
+};

 export class MapContainer extends Component {

    render() {
        return (
            // Render the Google Map, Marker, and InfoWindow components
-            <div className = "sighting-detail-google-map-container">
+            <div className="sighting-detail-google-map-container">
                <Map
-                    style = { mapStyles }
-                    google = { this.props.google }
-                    initialCenter = {{ lat: this.props.lat, lng: this.props.lng }}
-                    center = {{ lat: this.props.lat, lng: this.props.lng }}
-                    defaultZoom = { 15 }>
+                    style={mapStyles}
+                    google={this.props.google}
+                    initialCenter={{ lat: this.props.lat, lng: this.props.lng }}
+                    center={{ lat: this.props.lat, lng: this.props.lng }}
+                    defaultZoom={15}>

                    <Marker
-                        position = {{ lat: this.props.lat, lng: this.props.lng }}
+                        position={{ lat: this.props.lat, lng: this.props.lng }}
                    />
                </Map>
            </div>
@ -33,6 +33,4 @@ export class MapContainer extends Component {
 }

 // Send the Google Map API Key with the MapContainer component
-export default GoogleApiWrapper({
-    apiKey: (API_KEY)
-})(MapContainer)
+export default GoogleApiWrapper({ apiKey: (API_KEY) })(MapContainer);
--- a/src/components/SightingMap.js
+++ b/src/components/SightingMap.js
@ -1,6 +1,6 @@
 import React, { Component, Fragment } from 'react';
 import { Map, InfoWindow, Marker, GoogleApiWrapper } from 'google-maps-react';
-import moment from 'moment'
+import moment from 'moment';
 import Typography from '@material-ui/core/Typography';
 import firebase from '../firebase.js';

@ -11,7 +11,7 @@ const API_KEY = 'AIzaSyAZ_0J01bA6wCbIPK4UBq2RUBC-hIqG4mM';
 const mapStyles = {
    width: '100%',
    height: '100%'
-}
+};

 /** 
  * Types of sightings. Label is what is
@ -81,23 +81,23 @@ const timeTypes = [
 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',
    },
 ];

@ -112,9 +112,8 @@ export class MapContainer extends Component {
                        lat: position.coords.latitude,
                        lng: position.coords.longitude
                    }
-                }
-                );
-            })
+                });
+            });
        } else {
            // If browser doesn't support geolocation or if user does not allow it, 
            // center map on Grand Rapids, Michigan
@ -123,8 +122,7 @@ export class MapContainer extends Component {
                    lat: 42.9634,
                    lng: 85.6681
                }
-            }
-            );
+            });
        }
    }

@ -210,7 +208,7 @@ export class MapContainer extends Component {
    }

    formatDate = date => {
-        return (moment(date, "YYYY-MM").format("MMMM YYYY").toString())
+        return (moment(date, "YYYY-MM").format("MMMM YYYY").toString());
    }

    // Set the state of the component to contain user coordinates and initial 
@ -224,7 +222,7 @@ export class MapContainer extends Component {
        activeMarker: {},
        selectedPlace: {},
        sightings: []
-    }
+    };

    render() {
        return (
@ -236,7 +234,8 @@ export class MapContainer extends Component {
                    initialCenter={this.state.myLatLng}
                    center={this.state.myLatLng}
                    defaultZoom={15}
-                    onClick={this.onMapClick} >
+                    onClick={this.onMapClick}
+                >

                    <Marker
                        position={this.state.myLatLng}
@ -251,9 +250,9 @@ export class MapContainer extends Component {
                                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>}
+                                confidence={<Fragment><b>I am confident of my sighting:</b> {this.getConfidence(sighting.confidence)}</Fragment>}
                                description={<Fragment><b>Description:</b> {sighting.desc}</Fragment>}
                            />
                        )
@ -267,15 +266,15 @@ export class MapContainer extends Component {
                            <Typography variant="display1" gutterBottom>
                                {this.state.selectedPlace.type}
                            </Typography>
-                            <Typography variant="subheading" gutterBottom>
-                                {this.state.selectedPlace.confidence}
-                            </Typography>
                            <Typography variant="subheading" gutterBottom>
                                {this.state.selectedPlace.date}
                            </Typography>
                            <Typography variant="subheading" gutterBottom>
                                {this.state.selectedPlace.time}
                            </Typography>
+                            <Typography variant="subheading" gutterBottom>
+                                {this.state.selectedPlace.confidence}
+                            </Typography>
                            <Typography variant="subheading" gutterBottom>
                                {this.state.selectedPlace.description}
                            </Typography>
@ -288,6 +287,4 @@ export class MapContainer extends Component {
 }

 // Send the Google Map API Key with the MapContainer component
-export default GoogleApiWrapper({
-    apiKey: (API_KEY)
-})(MapContainer)
+export default GoogleApiWrapper({ apiKey: (API_KEY) })(MapContainer);
--- a/src/components/ViewSightings.js
+++ b/src/components/ViewSightings.js
@ -16,7 +16,7 @@ class ViewSightings extends Component {
            let newState = [];

            for (let sighting in sightings) {
-                newState.push({
+                newState.unshift({
                    id: sighting,
                    lat: sightings[sighting].lat,
                    lng: sightings[sighting].lng,
@ -62,7 +62,7 @@ class ViewSightings extends Component {
            time: null
        },
        clicked: false
-    }
+    };

    render() {
        return (
@ -77,7 +77,7 @@ class ViewSightings extends Component {
                                        <ListItem button key={ sighting.id } onClick={() => this.getDetail(sighting.id, sighting.lat, sighting.lng, sighting.desc, sighting.type, sighting.confidence, sighting.date, sighting.time)}>
                                            <ListItemText primary={`${sighting.desc}`}/>
                                        </ListItem>
-                                    )
+                                    );
                                })
                            }
                            </List>