GVSU/marten-application
GVSU
/
marten-application
1
0
Fork 0
Code Pull Requests Releases Activity

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

This commit is contained in:
WildScotsmen 2018-10-31 18:52:37 -04:00
parent a9bf3aa5e4
commit bfbb27842a
9 changed files with 222 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/Flamelink.js
View File

@ -2,7 +2,6 @@ import { Component } from 'react';
class Flamelink extends Component {
render() {
return(null);
}
}

8
src/components/Main.js
View File

@ -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>
);

26
src/components/QuizGame.js
View File

@ -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() {

6
src/components/ReportForm.js
View File

@ -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
});
};
}
/**

70
src/components/ReportMap.js
View File

@ -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
<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 }
<Marker
position={this.state.markerLatLng}
/>
<Marker
position = { this.state.myLatLng }
onClick = { this.onMarkerClick }
title = { 'You are here' }
name = { '' }
<Marker
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);

142
src/components/SightingDetail.js
View File

@ -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} />
@ -27,4 +157,4 @@ class SightingDetail extends Component {
}
}
export default SightingDetail;
export default SightingDetail;

22
src/components/SightingDetailMap.js
View File

@ -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 }}
<Marker
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);

41
src/components/SightingMap.js
View File

@ -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);

6
src/components/ViewSightings.js
View File

@ -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>