Merge pull request #42 from alDuncanson/feature/massive-refactor
Big refactor
This commit is contained in:
Alex Duncanson
GitHub
commit
c7cbe42d51
|
|
@ -2,7 +2,6 @@ import { Component } from 'react';
|
|||
|
||||
class Flamelink extends Component {
|
||||
render() {
|
||||
|
||||
return(null);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
@ -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;
|
||||
|
|
@ -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);
|
||||
|
|
@ -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);
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue