Fixed minor bug with theme swap and restructured components folder.

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';
 
@@ -278,7 +278,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/flamelink/FlameLinkCollection.js

@@ -1,5 +1,5 @@
 import React, { Component} from 'react';
-import flamelinkApp from '../flamelink.js';
+import flamelinkApp from '../../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 '../../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 '../css/FlameLink.css';
+import flamelinkApp from '../../flamelink.js';
+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 '../../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 '../css/FlameLink.css';
+import flamelinkApp from '../../flamelink.js';
+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 '../../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 '../../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 GoogleMap from '../components/ReportMap';
+import firebase from '../../firebase.js';
+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 '../../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>
@@ -71,20 +89,20 @@ class ViewSightings extends Component {
                     <Grid item xs={12} md={6} className='sighting-list'>
                         <Fragment>
                             <List>
-                            { 
-                                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)}>
-                                            <ListItemText primary={`${sighting.desc}`}/>
-                                        </ListItem>
-                                    );
-                                })
-                            }
+                                {
+                                    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)}>
+                                                <ListItemText primary={`${sighting.desc}`} />
+                                            </ListItem>
+                                        );
+                                    })
+                                }
                             </List>
                         </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/pages/About.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 About extends Component {

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,6 +1,6 @@
 import React, { Component } from 'react';
-import FlameLinkComponentCreations from '../components/FlameLinkComponentCreations';
-import FlameLinkCollectionGallery from '../components/FlameLinkCollectionGallery';
+import FlameLinkComponentCreations from '../components/flamelink/FlameLinkComponentCreations';
+import FlameLinkCollectionGallery from '../components/flamelink/FlameLinkCollectionGallery';
 import flamelinkApp from '../flamelink';
 import Grid from '@material-ui/core/Grid';
 

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