Merge pull request #65 from alDuncanson/refactor/restructure-and-minor-bugfix

Project restructuring and list bugfix.

readme.md

@@ -24,5 +24,6 @@ The application allows for users to post marten sightings. They can attach photo
 * Material-UI
 * Google API
 * Netlify
+* Disqus
 * Flamelink CMS
 * EmailJS

src/App.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import Main from './components/Main';
-import './App.css';
+import './css/App.css';
 import { CookiesProvider } from 'react-cookie';
 
 class App extends Component {

src/components/Main.js

@@ -32,7 +32,7 @@ import CssBaseline from '@material-ui/core/CssBaseline';
 import ExpandLess from '@material-ui/icons/ExpandLess';
 import ExpandMore from '@material-ui/icons/ExpandMore';
 import Collapse from '@material-ui/core/Collapse';
-import FlameLinkCollectionGallery from '../components/FlameLinkCollectionGallery';
+import FlameLinkCollectionGallery from '../components/flamelink/FlameLinkCollectionGallery';
 import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
 import Switch from '@material-ui/core/Switch';
 import { withCookies, Cookies } from 'react-cookie';
@@ -327,7 +327,7 @@ class ResponsiveDrawer extends React.Component {
                         {this.state.key === 'Home' && <Home />}
                         {this.state.key === 'Report' && <Report />}
                         {this.state.key === 'Map' && <ViewMap />}
-                        {this.state.key === 'List' && <SightingList key={this.state.themeName} />}
+                        {this.state.key === 'List' && <SightingList themeName={this.state.themeName} />}
                         {this.state.key === 'About' && <About />}
                         {this.state.key === 'Contact' && <Contact />}
                         {this.state.key === 'Easy-Quiz' && <Quiz difficulty='Easy' />}

src/components/SightingMap.js

@@ -2,7 +2,7 @@ import React, { Component, Fragment } from 'react';
 import { Map, InfoWindow, Marker, GoogleApiWrapper } from 'google-maps-react';
 import moment from 'moment';
 import Typography from '@material-ui/core/Typography';
-import firebase from '../firebase.js';
+import firebase from '../utilities/firebase.js';
 
 // Google Maps API Key
 const API_KEY = 'AIzaSyAZ_0J01bA6wCbIPK4UBq2RUBC-hIqG4mM';
@@ -216,22 +216,22 @@ export class MapContainer extends Component {
 
         switch(type) {
             case 'visual':
-                pinIcon = '/mapicons/marten-icon.png';
+                pinIcon = '/map-icons/marten-icon.png';
                 break;
             case 'roadkill':
-                pinIcon = '/mapicons/tire-icon.png';
+                pinIcon = '/map-icons/tire-icon.png';
                 break;
             case 'viewed_tracks':
-                pinIcon = '/mapicons/paws.png';
+                pinIcon = '/map-icons/paws.png';
                 break;
             case 'trapped':
-                pinIcon = '/mapicons/cage.png';
+                pinIcon = '/map-icons/cage.png';
                 break;
             case 'photo':
-                pinIcon = '/mapicons/photo-icon.png';
+                pinIcon = '/map-icons/photo-icon.png';
                 break;
             case 'other':
-                pinIcon = '/mapicons/other-icon.png';
+                pinIcon = '/map-icons/other-icon.png';
                 break;
             default:
                 break;

src/components/flamelink/FlameLinkCollection.js

@@ -1,5 +1,5 @@
 import React, { Component} from 'react';
-import flamelinkApp from '../flamelink.js';
+import flamelinkApp from '../../utilities/flamelink.js';
 import FlameLinkCollectionComponentCreations from './FlameLinkCollectionComponentCreations';
 
 class FlameLinkCollection extends Component {

src/components/flamelink/FlameLinkCollectionGallery.js

@@ -3,10 +3,10 @@ import Typography from '@material-ui/core/Typography';
 import Grid from '@material-ui/core/Grid';
 import { withStyles } from '@material-ui/core/styles';
 import RenderGallery from './RenderGallery';
-import flamelinkApp from '../flamelink.js';
+import flamelinkApp from '../../utilities/flamelink.js';
 import FlameLinkCollectionGalleryContent from './FlameLinkCollectionGalleryContent';
 import "react-image-gallery/styles/css/image-gallery.css";
-import '../css/FlameLink.css';
+import '../../css/FlameLink.css';
 
 const styles = theme => ({
     flamelinkItem: {

src/components/flamelink/FlameLinkCollectionGalleryContent.js

@@ -1,6 +1,6 @@
 import { Component } from 'react';
-import flamelinkApp from '../flamelink.js';
+import flamelinkApp from '../../utilities/flamelink.js';
-import '../css/FlameLink.css';
+import '../../css/FlameLink.css';
 
 class FlameLinkCollectionGalleryContent extends Component {
     constructor(props) {

src/components/flamelink/FlameLinkCollectionStructure.js

@@ -2,7 +2,7 @@ import React, { Component} from 'react';
 import Grid from '@material-ui/core/Grid';
 import Typography from '@material-ui/core/Typography';
 import { withStyles } from '@material-ui/core/styles';
-import flamelinkApp from '../flamelink.js';
+import flamelinkApp from '../../utilities/flamelink.js';
 import FlameLinkImage from './FlameLinkImage';
 import FlameLinkFieldSet from './FlameLinkFieldSet';
 

src/components/flamelink/FlameLinkImage.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import Typography from '@material-ui/core/Typography';
-import flamelinkApp from '../flamelink.js';
+import flamelinkApp from '../../utilities/flamelink.js';
-import '../css/FlameLink.css';
+import '../../css/FlameLink.css';
 
 class FlameLinkImage extends Component {
     constructor() {

src/components/flamelink/FlameLinkStructure.js

@@ -2,7 +2,7 @@ import React, { Component} from 'react';
 import Grid from '@material-ui/core/Grid';
 import Typography from '@material-ui/core/Typography';
 import { withStyles } from '@material-ui/core/styles';
-import flamelinkApp from '../flamelink.js';
+import flamelinkApp from '../../utilities/flamelink.js';
 import FlameLinkImage from './FlameLinkImage';
 import FlameLinkFieldSet from './FlameLinkFieldSet';
 

src/components/flamelink/RenderGallery.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import ImageGallery from 'react-image-gallery';
 import "react-image-gallery/styles/css/image-gallery.css";
-import '../css/FlameLink.css';
+import '../../css/FlameLink.css';
 
 class RenderGallery extends Component {
     constructor() {

src/components/forms/ContactForm.js

@@ -1,7 +1,7 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import Grid from '@material-ui/core/Grid';
-import emailjs from '../emailjs.js'
+import emailjs from '../../utilities/emailjs.js'
 import { withStyles } from '@material-ui/core/styles';
 import TextField from '@material-ui/core/TextField';
 import CheckCircleIcon from '@material-ui/icons/CheckCircle';

src/components/forms/ReportForm.js

@@ -9,8 +9,8 @@ import Snackbar from '@material-ui/core/Snackbar';
 import IconButton from '@material-ui/core/IconButton';
 import CloseIcon from '@material-ui/icons/Close';
 import Button from '@material-ui/core/Button';
-import firebase from '../firebase.js';
+import firebase from '../../utilities/firebase.js';
-import GoogleMap from '../components/ReportMap';
+import GoogleMap from './ReportMap';
 import Modal from '@material-ui/core/Modal';
 import Typography from '@material-ui/core/Typography';
 

src/components/list/ViewSightings.js

@@ -1,6 +1,6 @@
 import React, { Component, Fragment } from 'react';
 import Grid from '@material-ui/core/Grid';
-import firebase from '../firebase.js';
+import firebase from '../../utilities/firebase.js';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemText from '@material-ui/core/ListItemText';
@@ -64,6 +64,24 @@ class ViewSightings extends Component {
         clicked: false
     };
 
+    componentDidUpdate(props) {
+        if (this.props.themeName !== props.themeName) {
+            this.setState({
+                selectedSighting: {
+                    id: null,
+                    lat: null,
+                    lng: null,
+                    desc: null,
+                    type: null,
+                    confidence: null,
+                    date: null,
+                    time: null
+                },
+                clicked: false
+            });
+        }
+    }
+
     render() {
         return (
             <Fragment>
@@ -74,8 +92,8 @@ class ViewSightings extends Component {
                                 {
                                     this.state.sightings.map((sighting) => {
                                         return (
-                                        <ListItem button key={ sighting.id } onClick={() => this.getDetail(sighting.id, sighting.lat, sighting.lng, sighting.desc, sighting.type, sighting.confidence, sighting.date, sighting.time)}>
+                                            <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}`}/>
+                                                <ListItemText primary={`${sighting.desc}`} />
                                             </ListItem>
                                         );
                                     })
@@ -84,7 +102,7 @@ class ViewSightings extends Component {
                         </Fragment>
                     </Grid>
                     <Grid item xs={12} md={6} className='sighting-details'>
-                        {this.state.clicked === true && <SightingDetail detail={ this.state.selectedSighting }/>}
+                        {this.state.clicked === true && <SightingDetail detail={this.state.selectedSighting} />}
                     </Grid>
                 </Grid>
             </Fragment>

src/emailjs.js

@@ -1,5 +0,0 @@
-import * as emailjs from 'emailjs-com'
-
-emailjs.init("user_4d5R86dmu6vgeJP4euxSA");
-
-export default emailjs;

src/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
+import './css/index.css';
-import App from './App';
+import App from './App.js';
 import registerServiceWorker from './registerServiceWorker';
 
 ReactDOM.render(<App/>, document.getElementById('root'));

src/pages/About.js

@@ -1,6 +1,6 @@
 import React, { Component, Fragment } from 'react';
-import FlameLinkComponentCreations from '../components/FlameLinkComponentCreations';
+import FlameLinkComponentCreations from '../components/flamelink/FlameLinkComponentCreations';
-import flamelinkApp from '../flamelink.js';
+import flamelinkApp from '../utilities/flamelink.js';
 
 class About extends Component {
     constructor() {

src/pages/Contact.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import ContactForm from '../components/ContactForm.js'
+import ContactForm from '../components/forms/ContactForm.js'
 
 class Contact extends Component {
     componentDidMount() {

src/pages/Home.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
-import FlameLinkComponentCreations from '../components/FlameLinkComponentCreations';
+import FlameLinkComponentCreations from '../components/flamelink/FlameLinkComponentCreations';
-import FlameLinkCollectionGallery from '../components/FlameLinkCollectionGallery';
+import FlameLinkCollectionGallery from '../components/flamelink/FlameLinkCollectionGallery';
-import flamelinkApp from '../flamelink';
+import flamelinkApp from '../utilities/flamelink';
 import Grid from '@material-ui/core/Grid';
 
 class Home extends Component {

src/pages/Info.js

@@ -1,5 +1,5 @@
 import React, { Component, Fragment } from 'react';
-import FlameLinkComponentCreations from '../components/FlameLinkComponentCreations';
+import FlameLinkComponentCreations from '../components/flamelink/FlameLinkComponentCreations';
 import flamelinkApp from '../flamelink.js';
 
 class Info extends Component {

src/pages/Report.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import ReportForm from '../components/ReportForm';
+import ReportForm from '../components/forms/ReportForm';
 
 class Report extends Component {
     componentDidMount() {

src/pages/SightingList.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import ViewSightings from '../components/ViewSightings.js';
+import ViewSightings from '../components/list/ViewSightings.js';
 
 class Sighting extends Component {
     componentDidMount() {
@@ -8,7 +8,7 @@ class Sighting extends Component {
 
     render() {
         return (
-            <ViewSightings/>
+            <ViewSightings themeName={this.props.themeName}/>
         );
     }
 }

src/quiz/advancedQuiz.js

@@ -4,7 +4,7 @@ const advancedQuiz = {
     "quizTitle": "Trail Cam Quiz: Advanced",
     "questions": [
         {
-            "question": <Fragment>What animal is this?<br /><br /><img src="/quizimages/advanced/question1.jpg" alt=""></img></Fragment>,
+            "question": <Fragment>What animal is this?<br /><br /><img src="/quiz-images/advanced/question1.jpg" alt=""></img></Fragment>,
             "questionType": "text",
             "answers": [
                 "American marten",
@@ -15,7 +15,7 @@ const advancedQuiz = {
             "correctAnswer": "1"
         },
         {
-            "question": <Fragment>What animal is this?<br /><br /><img src="/quizimages/advanced/question2.jpg" alt=""></img></Fragment>,
+            "question": <Fragment>What animal is this?<br /><br /><img src="/quiz-images/advanced/question2.jpg" alt=""></img></Fragment>,
             "questionType": "text",
             "answers": [
                 "American marten",
@@ -26,7 +26,7 @@ const advancedQuiz = {
             "correctAnswer": "1"
         },
         {
-            "question": <Fragment>What animal is this?<br /><br /><img src="/quizimages/advanced/question3.jpg" alt=""></img></Fragment>,
+            "question": <Fragment>What animal is this?<br /><br /><img src="/quiz-images/advanced/question3.jpg" alt=""></img></Fragment>,
             "questionType": "text",
             "answers": [
                 "American marten",
@@ -37,7 +37,7 @@ const advancedQuiz = {
             "correctAnswer": "1"
         },
         {
-            "question": <Fragment>What animal is this?<br /><br /><img src="/quizimages/advanced/question4.jpg" alt=""></img></Fragment>,
+            "question": <Fragment>What animal is this?<br /><br /><img src="/quiz-images/advanced/question4.jpg" alt=""></img></Fragment>,
             "questionType": "text",
             "answers": [
                 "American Robin",
@@ -48,7 +48,7 @@ const advancedQuiz = {
             "correctAnswer": "1"
         },
         {
-            "question": <Fragment>What is in the marten's mouth?<br /><br /><img src="/quizimages/advanced/question5.jpg" alt=""></img></Fragment>,
+            "question": <Fragment>What is in the marten's mouth?<br /><br /><img src="/quiz-images/advanced/question5.jpg" alt=""></img></Fragment>,
             "questionType": "text",
             "answers": [
                 "American Woodcock",
@@ -59,7 +59,7 @@ const advancedQuiz = {
             "correctAnswer": "1"
         },
         {
-            "question": <Fragment>What animal is this?<br /><br /><img src="/quizimages/advanced/question6.jpg" alt=""></img></Fragment>,
+            "question": <Fragment>What animal is this?<br /><br /><img src="/quiz-images/advanced/question6.jpg" alt=""></img></Fragment>,
             "questionType": "text",
             "answers": [
                 "Black bear",
@@ -70,7 +70,7 @@ const advancedQuiz = {
             "correctAnswer": "1"
         },
         {
-            "question": <Fragment>What animal is this?<br /><br /><img src="/quizimages/advanced/question7.jpg" alt=""></img></Fragment>,
+            "question": <Fragment>What animal is this?<br /><br /><img src="/quiz-images/advanced/question7.jpg" alt=""></img></Fragment>,
             "questionType": "text",
             "answers": [
                 "Black bear",
@@ -81,7 +81,7 @@ const advancedQuiz = {
             "correctAnswer": "1"
         },
         {
-            "question": <Fragment>What animal is this?<br /><br /><img src="/quizimages/advanced/question8.jpg" alt=""></img></Fragment>,
+            "question": <Fragment>What animal is this?<br /><br /><img src="/quiz-images/advanced/question8.jpg" alt=""></img></Fragment>,
             "questionType": "text",
             "answers": [
                 "Coyote",
@@ -92,7 +92,7 @@ const advancedQuiz = {
             "correctAnswer": "1"
         },
         {
-            "question": <Fragment>What animal is this?<br /><br /><img src="/quizimages/advanced/question9.jpg" alt=""></img></Fragment>,
+            "question": <Fragment>What animal is this?<br /><br /><img src="/quiz-images/advanced/question9.jpg" alt=""></img></Fragment>,
             "questionType": "text",
             "answers": [
                 "Eastern chipmunk",
@@ -103,7 +103,7 @@ const advancedQuiz = {
             "correctAnswer": "1"
         },
         {
-            "question": <Fragment>What animal is this?<br /><br /><img src="/quizimages/advanced/question10.jpg" alt=""></img></Fragment>,
+            "question": <Fragment>What animal is this?<br /><br /><img src="/quiz-images/advanced/question10.jpg" alt=""></img></Fragment>,
             "questionType": "text",
             "answers": [
                 "Eastern chipmunk",
@@ -114,7 +114,7 @@ const advancedQuiz = {
             "correctAnswer": "1"
         },
         {
-            "question": <Fragment>What animal is this?<br /><br /><img src="/quizimages/advanced/question11.jpg" alt=""></img></Fragment>,
+            "question": <Fragment>What animal is this?<br /><br /><img src="/quiz-images/advanced/question11.jpg" alt=""></img></Fragment>,
             "questionType": "text",
             "answers": [
                 "American marten",
@@ -125,7 +125,7 @@ const advancedQuiz = {
             "correctAnswer": "2"
         },
         {
-            "question": <Fragment>What animal is this?<br /><br /><img src="/quizimages/advanced/question12.jpg" alt=""></img></Fragment>,
+            "question": <Fragment>What animal is this?<br /><br /><img src="/quiz-images/advanced/question12.jpg" alt=""></img></Fragment>,
             "questionType": "text",
             "answers": [
                 "American marten",
@@ -136,7 +136,7 @@ const advancedQuiz = {
             "correctAnswer": "4"
         },
         {
-            "question": <Fragment>What animal is this?<br /><br /><img src="/quizimages/advanced/question13.jpg" alt=""></img></Fragment>,
+            "question": <Fragment>What animal is this?<br /><br /><img src="/quiz-images/advanced/question13.jpg" alt=""></img></Fragment>,
             "questionType": "text",
             "answers": [
                 "Hermit Thrush",
@@ -147,7 +147,7 @@ const advancedQuiz = {
             "correctAnswer": "3"
         },
         {
-            "question": <Fragment>What animal is this?<br /><br /><img src="/quizimages/advanced/question14.jpg" alt=""></img></Fragment>,
+            "question": <Fragment>What animal is this?<br /><br /><img src="/quiz-images/advanced/question14.jpg" alt=""></img></Fragment>,
             "questionType": "text",
             "answers": [
                 "American beaver",
@@ -158,7 +158,7 @@ const advancedQuiz = {
             "correctAnswer": "3"
         },
         {
-            "question": <Fragment>What animal is this?<br /><br /><img src="/quizimages/advanced/question15.jpg" alt=""></img></Fragment>,
+            "question": <Fragment>What animal is this?<br /><br /><img src="/quiz-images/advanced/question15.jpg" alt=""></img></Fragment>,
             "questionType": "text",
             "answers": [
                 "American badger",
@@ -169,7 +169,7 @@ const advancedQuiz = {
             "correctAnswer": "2"
         },
         {
-            "question": <Fragment>What animal is this?<br /><br /><img src="/quizimages/advanced/question16.jpg" alt=""></img></Fragment>,
+            "question": <Fragment>What animal is this?<br /><br /><img src="/quiz-images/advanced/question16.jpg" alt=""></img></Fragment>,
             "questionType": "text",
             "answers": [
                 "Eastern fox squirrel",
@@ -180,7 +180,7 @@ const advancedQuiz = {
             "correctAnswer": "4"
         },
         {
-            "question": <Fragment>What animal is this?<br /><br /><img src="/quizimages/advanced/question17.jpg" alt=""></img></Fragment>,
+            "question": <Fragment>What animal is this?<br /><br /><img src="/quiz-images/advanced/question17.jpg" alt=""></img></Fragment>,
             "questionType": "text",
             "answers": [
                 "American Woodcock",
@@ -191,7 +191,7 @@ const advancedQuiz = {
             "correctAnswer": "4"
         },
         {
-            "question": <Fragment>What animal is this?<br /><br /><img src="/quizimages/advanced/question18.jpg" alt=""></img></Fragment>,
+            "question": <Fragment>What animal is this?<br /><br /><img src="/quiz-images/advanced/question18.jpg" alt=""></img></Fragment>,
             "questionType": "text",
             "answers": [
                 "Eastern fox squirrel",
@@ -202,7 +202,7 @@ const advancedQuiz = {
             "correctAnswer": "3"
         },
         {
-            "question": <Fragment>What animal is this?<br /><br /><img src="/quizimages/advanced/question19.jpg" alt=""></img></Fragment>,
+            "question": <Fragment>What animal is this?<br /><br /><img src="/quiz-images/advanced/question19.jpg" alt=""></img></Fragment>,
             "questionType": "text",
             "answers": [
                 "House mouse",
@@ -213,7 +213,7 @@ const advancedQuiz = {
             "correctAnswer": "3"
         },
         {
-            "question": <Fragment>What is in the marten's mouth?<br /><br /><img src="/quizimages/advanced/question20.jpg" alt=""></img></Fragment>,
+            "question": <Fragment>What is in the marten's mouth?<br /><br /><img src="/quiz-images/advanced/question20.jpg" alt=""></img></Fragment>,
             "questionType": "text",
             "answers": [
                 "Eastern chipmunk",