From bfbb27842ad8f23e6f490621ac84a5f31c38805f Mon Sep 17 00:00:00 2001 From: WildScotsmen Date: Wed, 31 Oct 2018 18:52:37 -0400 Subject: [PATCH] Cleaned up code according to what we decided on. Also formatted raw database data in SightingDetail component. Finally, ordered list in reverse order. --- src/components/Flamelink.js | 1 - src/components/Main.js | 8 +- src/components/QuizGame.js | 26 ++--- src/components/ReportForm.js | 6 +- src/components/ReportMap.js | 70 +++++++------- src/components/SightingDetail.js | 142 ++++++++++++++++++++++++++-- src/components/SightingDetailMap.js | 22 ++--- src/components/SightingMap.js | 41 ++++---- src/components/ViewSightings.js | 6 +- 9 files changed, 222 insertions(+), 100 deletions(-) diff --git a/src/components/Flamelink.js b/src/components/Flamelink.js index fd3187d..3958057 100644 --- 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); } } diff --git a/src/components/Main.js b/src/components/Main.js index be9617f..cfe31d7 100644 --- 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' && } {this.state.key === 'Map' && } {this.state.key === 'List' && } - {this.state.key === 'Easy-Quiz' && } - {this.state.key === 'Medium-Quiz' && } - {this.state.key === 'Hard-Quiz' && } + {this.state.key === 'Easy-Quiz' && } + {this.state.key === 'Medium-Quiz' && } + {this.state.key === 'Hard-Quiz' && } ); diff --git a/src/components/QuizGame.js b/src/components/QuizGame.js index 1339978..88f8bbe 100644 --- 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() { diff --git a/src/components/ReportForm.js b/src/components/ReportForm.js index 9068eec..d55625f 100644 --- 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 }); - }; + } /** diff --git a/src/components/ReportMap.js b/src/components/ReportMap.js index 882a49f..f4848ee 100644 --- 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 { @@ -18,22 +18,22 @@ export class MapContainer extends Component { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition((position) => { this.setState({ - myLatLng: { - lat: position.coords.latitude, - lng: position.coords.longitude - } + myLatLng: { + 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 this.setState({ - myLatLng: { - lat: 42.9634, - lng: 85.6681 - } + myLatLng: { + lat: 42.9634, + lng: 85.6681 } + } ); } } @@ -52,7 +52,7 @@ export class MapContainer extends Component { showingInfoWindow: true }); } - + // When the user clicks on the map, if a info window is visible then close it // and 'unactive' that marker onMapClick = (props, map, e) => { @@ -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(); + 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 -
+
+ style={mapStyles} + google={this.props.google} + initialCenter={this.state.myLatLng} + center={this.state.myLatLng} + defaultZoom={15} + onClick={this.onMapClick} > - - + marker={this.state.activeMarker} + visible={this.state.showingInfoWindow} > - - { this.state.selectedPlace.title } + + {this.state.selectedPlace.title} - - { this.state.selectedPlace.name } + + {this.state.selectedPlace.name} @@ -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) \ No newline at end of file +export default GoogleApiWrapper({ apiKey: (API_KEY) })(MapContainer); \ No newline at end of file diff --git a/src/components/SightingDetail.js b/src/components/SightingDetail.js index 73df886..01618b8 100644 --- 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 ( - +
-

{`Confidence: ${this.props.detail.confidence}`}

-

{`When: ${this.props.detail.date}, ${this.props.detail.time}`}

-

{`Where: ${this.props.detail.lat} degrees N, and ${this.props.detail.lng} degrees E`}

+

Type: {this.getType(this.props.detail.type)}

+

When: {this.formatDate(this.props.detail.date)}, {this.getTime(this.props.detail.time)}

+

Where: {this.props.detail.lat} degrees N, and {this.props.detail.lng} degrees E

+

I am confident of my sighting: {this.getConfidence(this.props.detail.confidence)}

+

{`${this.props.detail.desc}`}

@@ -27,4 +157,4 @@ class SightingDetail extends Component { } } -export default SightingDetail; +export default SightingDetail; \ No newline at end of file diff --git a/src/components/SightingDetailMap.js b/src/components/SightingDetailMap.js index aaa4c50..775e7ee 100644 --- 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 -
+
+ 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}> -
@@ -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) \ No newline at end of file +export default GoogleApiWrapper({ apiKey: (API_KEY) })(MapContainer); \ No newline at end of file diff --git a/src/components/SightingMap.js b/src/components/SightingMap.js index 2d00465..85b7410 100644 --- 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} + > Confidence: {this.getConfidence(sighting.confidence)}} date={Date: {this.formatDate(sighting.date)}} time={Time: {this.getTime(sighting.time)}} + confidence={I am confident of my sighting: {this.getConfidence(sighting.confidence)}} description={Description: {sighting.desc}} /> ) @@ -267,15 +266,15 @@ export class MapContainer extends Component { {this.state.selectedPlace.type} - - {this.state.selectedPlace.confidence} - {this.state.selectedPlace.date} {this.state.selectedPlace.time} + + {this.state.selectedPlace.confidence} + {this.state.selectedPlace.description} @@ -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) \ No newline at end of file +export default GoogleApiWrapper({ apiKey: (API_KEY) })(MapContainer); \ No newline at end of file diff --git a/src/components/ViewSightings.js b/src/components/ViewSightings.js index e245e6b..ec5d3c2 100644 --- 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 { this.getDetail(sighting.id, sighting.lat, sighting.lng, sighting.desc, sighting.type, sighting.confidence, sighting.date, sighting.time)}> - ) + ); }) }