From 0e9a85e8038ce10d851729725fa73d1b6ff1fa88 Mon Sep 17 00:00:00 2001
From: wildscotsmen <thewildscotsmen@gmail.com>
Date: Tue, 11 Dec 2018 23:54:52 -0500
Subject: [PATCH] Fixed issue with sighting list, although I hate my solution.

---
 src/components/Main.js               | 266 +++++++++++++--------------
 src/components/list/ViewSightings.js |  18 --
 2 files changed, 133 insertions(+), 151 deletions(-)

diff --git a/src/components/Main.js b/src/components/Main.js
index 6193cd0..5cce9a7 100644
--- a/src/components/Main.js
+++ b/src/components/Main.js
@@ -37,10 +37,10 @@ import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
 import ThemeSwitch from '@material-ui/core/Switch';
 import { withCookies, Cookies } from 'react-cookie';
 import {
-  BrowserRouter as Router,
-  Route,
-  Link,
-  Switch
+    BrowserRouter as Router,
+    Route,
+    Link,
+    Switch
 } from 'react-router-dom';
 
 const drawerWidth = 240;
@@ -194,28 +194,28 @@ class ResponsiveDrawer extends React.Component {
                 <Divider />
                 <List>
                     <Link to='/'>
-                      <ListItem button>
-                          <ListItemIcon><HomeIcon /></ListItemIcon>
-                          <ListItemText primary='Home' />
-                      </ListItem>
+                        <ListItem button>
+                            <ListItemIcon><HomeIcon /></ListItemIcon>
+                            <ListItemText primary='Home' />
+                        </ListItem>
                     </Link>
                     <Link to='/report'>
-                      <ListItem button>
-                          <ListItemIcon><AssignmentIcon /></ListItemIcon>
-                          <ListItemText primary='Report' />
-                      </ListItem>
+                        <ListItem button>
+                            <ListItemIcon><AssignmentIcon /></ListItemIcon>
+                            <ListItemText primary='Report' />
+                        </ListItem>
                     </Link>
                     <Link to='/view-map'>
-                      <ListItem button>
-                          <ListItemIcon><MapIcon /></ListItemIcon>
-                          <ListItemText primary='Map' />
-                      </ListItem>
+                        <ListItem button>
+                            <ListItemIcon><MapIcon /></ListItemIcon>
+                            <ListItemText primary='Map' />
+                        </ListItem>
                     </Link>
                     <Link to='/sighting-list'>
-                      <ListItem button>
-                          <ListItemIcon><ListIcon /></ListItemIcon>
-                          <ListItemText primary='List' />
-                      </ListItem>
+                        <ListItem button>
+                            <ListItemIcon><ListIcon /></ListItemIcon>
+                            <ListItemText primary='List' />
+                        </ListItem>
                     </Link>
                     <ListItem button onClick={this.handleClick}>
                         <ListItemIcon>
@@ -224,36 +224,36 @@ class ResponsiveDrawer extends React.Component {
                         <ListItemText inset primary="Quiz" />
                         {this.state.open ? <ExpandLess /> : <ExpandMore />}
                     </ListItem>
-                      <Collapse in={this.state.open} timeout="auto" unmountOnExit>
+                    <Collapse in={this.state.open} timeout="auto" unmountOnExit>
                         <List component="div" disablePadding>
-                            <Link to={{pathname: '/quiz-easy', state: {difficulty: 'Easy'}}}>
-                              <ListItem button className={classes.nested}>
-                                  <ListItemText inset primary="Easy" />
-                              </ListItem>
+                            <Link to={{ pathname: '/quiz-easy', state: { difficulty: 'Easy' } }}>
+                                <ListItem button className={classes.nested}>
+                                    <ListItemText inset primary="Easy" />
+                                </ListItem>
                             </Link>
-                            <Link to={{pathname: '/quiz-intermediate', state: {difficulty: 'Intermediate'}}}>
-                              <ListItem button className={classes.nested}>
-                                  <ListItemText inset primary="Intermediate" />
-                              </ListItem>
+                            <Link to={{ pathname: '/quiz-intermediate', state: { difficulty: 'Intermediate' } }}>
+                                <ListItem button className={classes.nested}>
+                                    <ListItemText inset primary="Intermediate" />
+                                </ListItem>
                             </Link>
-                            <Link to={{pathname: '/quiz-advanced', state: {difficulty: 'Advanced'}}}>
-                              <ListItem button className={classes.nested}>
-                                  <ListItemText inset primary="Advanced" />
-                              </ListItem>
+                            <Link to={{ pathname: '/quiz-advanced', state: { difficulty: 'Advanced' } }}>
+                                <ListItem button className={classes.nested}>
+                                    <ListItemText inset primary="Advanced" />
+                                </ListItem>
                             </Link>
                         </List>
                     </Collapse>
                     <Link to='/contact'>
-                      <ListItem button>
-                          <ListItemIcon><EmailIcon /></ListItemIcon>
-                          <ListItemText primary='Contact' />
-                      </ListItem>
+                        <ListItem button>
+                            <ListItemIcon><EmailIcon /></ListItemIcon>
+                            <ListItemText primary='Contact' />
+                        </ListItem>
                     </Link>
                     <Link to='/about'>
-                      <ListItem button>
-                          <ListItemIcon><InfoIcon /></ListItemIcon>
-                          <ListItemText primary='About' />
-                      </ListItem>
+                        <ListItem button>
+                            <ListItemIcon><InfoIcon /></ListItemIcon>
+                            <ListItemText primary='About' />
+                        </ListItem>
                     </Link>
                     <ListItem button onClick={this.handleClick2}>
                         <ListItemIcon>
@@ -262,27 +262,27 @@ class ResponsiveDrawer extends React.Component {
                         <ListItemText inset primary="Galleries" />
                         {this.state.open2 ? <ExpandLess /> : <ExpandMore />}
                     </ListItem>
-                      <Collapse in={this.state.open2} timeout="auto" unmountOnExit>
+                    <Collapse in={this.state.open2} timeout="auto" unmountOnExit>
                         <List component="div" disablePadding>
-                            <Link to={{pathname: 'galleries-martens-and-kits', state: {galleryName: 'martensAndKits'}}}>
-                              <ListItem button className={classes.nested}>
-                                  <ListItemText inset primary="Martens and Kits" />
-                              </ListItem>
+                            <Link to={{ pathname: 'galleries-martens-and-kits', state: { galleryName: 'martensAndKits' } }}>
+                                <ListItem button className={classes.nested}>
+                                    <ListItemText inset primary="Martens and Kits" />
+                                </ListItem>
                             </Link>
-                            <Link to={{pathname: 'galleries-martens-at-night', state: {galleryName: 'martensAtNight'}}}>
-                              <ListItem button className={classes.nested}>
-                                  <ListItemText inset primary="Martens at Night" />
-                              </ListItem>
+                            <Link to={{ pathname: 'galleries-martens-at-night', state: { galleryName: 'martensAtNight' } }}>
+                                <ListItem button className={classes.nested}>
+                                    <ListItemText inset primary="Martens at Night" />
+                                </ListItem>
                             </Link>
-                            <Link to={{pathname: 'galleries-martens-by-day', state: {galleryName: 'martensBeingMartens'}}}>
-                              <ListItem button className={classes.nested}>
-                                  <ListItemText inset primary="Martens by Day" />
-                              </ListItem>
+                            <Link to={{ pathname: 'galleries-martens-by-day', state: { galleryName: 'martensBeingMartens' } }}>
+                                <ListItem button className={classes.nested}>
+                                    <ListItemText inset primary="Martens by Day" />
+                                </ListItem>
                             </Link>
-                            <Link to={{pathname: 'galleries-species-similar-to-martens', state: {galleryName: 'similarSpecies'}}}>
-                              <ListItem button className={classes.nested}>
-                                  <ListItemText inset primary="Species Similar to Martens" />
-                              </ListItem>
+                            <Link to={{ pathname: 'galleries-species-similar-to-martens', state: { galleryName: 'similarSpecies' } }}>
+                                <ListItem button className={classes.nested}>
+                                    <ListItemText inset primary="Species Similar to Martens" />
+                                </ListItem>
                             </Link>
                         </List>
                     </Collapse>
@@ -292,82 +292,82 @@ class ResponsiveDrawer extends React.Component {
         );
 
         return (
-          <Router>
-            <MuiThemeProvider theme={this.state.theme}>
-                <div className={classes.root}>
-                    <CssBaseline />
-                    <AppBar position="fixed" color="primary" className={classes.appBar}>
-                        <Toolbar>
-                            <IconButton
-                                color="inherit"
-                                aria-label="Open drawer"
-                                onClick={this.handleDrawerToggle}
-                                className={classes.menuButton}
-                            >
-                            <MenuIcon />
-                            </IconButton>
-                            <Typography variant="title" color="inherit" noWrap>
-                                Marten Tracker
+            <Router>
+                <MuiThemeProvider theme={this.state.theme}>
+                    <div className={classes.root}>
+                        <CssBaseline />
+                        <AppBar position="fixed" color="primary" className={classes.appBar}>
+                            <Toolbar>
+                                <IconButton
+                                    color="inherit"
+                                    aria-label="Open drawer"
+                                    onClick={this.handleDrawerToggle}
+                                    className={classes.menuButton}
+                                >
+                                    <MenuIcon />
+                                </IconButton>
+                                <Typography variant="title" color="inherit" noWrap>
+                                    Marten Tracker
                             </Typography>
-                            <ThemeSwitch
-                                checked={this.state.themeChecked}
-                                onChange={this.handleChange('themeChecked')}
-                                value="themeChecked"
-                                color="default"
-                            />
-                        </Toolbar>
-                    </AppBar>
-                    <nav className={classes.drawer}>
-                        <Hidden smUp implementation="css">
-                            <Drawer
-                                container={this.props.container}
-                                variant="temporary"
-                                anchor={this.state.theme.direction === 'rtl' ? 'right' : 'left'}
-                                open={this.state.mobileOpen}
-                                onClose={this.handleDrawerToggle}
-                                classes={{
-                                    paper: classes.drawerPaper,
-                                }}
-                                ModalProps={{
-                                    keepMounted: true, // Better open performance on mobile.
-                                }}
-                            >
-                                {drawer}
-                            </Drawer>
-                        </Hidden>
-                        <Hidden xsDown implementation="css">
-                            <Drawer
-                                classes={{
-                                    paper: classes.drawerPaper,
-                                }}
-                                variant="permanent"
-                                open
-                            >
-                                {drawer}
-                            </Drawer>
-                        </Hidden>
-                    </nav>
-                    <main className={classes.content}>
-                        <div className={classes.toolbar} />
-                        <Switch>
-                          <Route path="/" component={Home} exact={true} />
-                          <Route path="/report" component={Report} />
-                          <Route path="/view-map" component={ViewMap} />
-                          <Route path="/sighting-list" component={SightingList} />
-                          <Route path="/about" component={About} />
-                          <Route path="/contact" component={Contact} />
-                          <Route path="/quiz-easy" component={Quiz} key={"Easy"}/>
-                          <Route path="/quiz-intermediate" component={Quiz} key={"Intermediate"}/>
-                          <Route path="/quiz-advanced" component={Quiz} key={"Advanced"} />
-                          <Route path="/galleries-martens-and-kits" component={FlameLinkCollectionGallery} key={"martensAndKits"}/>
-                          <Route path="/galleries-martens-at-night" component={FlameLinkCollectionGallery} key={"martensAtNight"} />
-                          <Route path="/galleries-martens-by-day" component={FlameLinkCollectionGallery} key={"martensByDay"} />
-                          <Route path="/galleries-species-similar-to-martens" component={FlameLinkCollectionGallery} key={"similarSpecies"} />
-                        </Switch>
-                    </main>
-                </div>
-            </MuiThemeProvider>
-          </Router>
+                                <ThemeSwitch
+                                    checked={this.state.themeChecked}
+                                    onChange={this.handleChange('themeChecked')}
+                                    value="themeChecked"
+                                    color="default"
+                                />
+                            </Toolbar>
+                        </AppBar>
+                        <nav className={classes.drawer}>
+                            <Hidden smUp implementation="css">
+                                <Drawer
+                                    container={this.props.container}
+                                    variant="temporary"
+                                    anchor={this.state.theme.direction === 'rtl' ? 'right' : 'left'}
+                                    open={this.state.mobileOpen}
+                                    onClose={this.handleDrawerToggle}
+                                    classes={{
+                                        paper: classes.drawerPaper,
+                                    }}
+                                    ModalProps={{
+                                        keepMounted: true, // Better open performance on mobile.
+                                    }}
+                                >
+                                    {drawer}
+                                </Drawer>
+                            </Hidden>
+                            <Hidden xsDown implementation="css">
+                                <Drawer
+                                    classes={{
+                                        paper: classes.drawerPaper,
+                                    }}
+                                    variant="permanent"
+                                    open
+                                >
+                                    {drawer}
+                                </Drawer>
+                            </Hidden>
+                        </nav>
+                        <main className={classes.content}>
+                            <div className={classes.toolbar} />
+                            <Switch>
+                                <Route path="/" component={Home} exact={true} />
+                                <Route path="/report" component={Report} />
+                                <Route path="/view-map" component={ViewMap} />
+                                <Route path="/sighting-list" component={SightingList} key={this.state.themeName} />
+                                <Route path="/about" component={About} />
+                                <Route path="/contact" component={Contact} />
+                                <Route path="/quiz-easy" component={Quiz} key={"Easy"} />
+                                <Route path="/quiz-intermediate" component={Quiz} key={"Intermediate"} />
+                                <Route path="/quiz-advanced" component={Quiz} key={"Advanced"} />
+                                <Route path="/galleries-martens-and-kits" component={FlameLinkCollectionGallery} key={"martensAndKits"} />
+                                <Route path="/galleries-martens-at-night" component={FlameLinkCollectionGallery} key={"martensAtNight"} />
+                                <Route path="/galleries-martens-by-day" component={FlameLinkCollectionGallery} key={"martensByDay"} />
+                                <Route path="/galleries-species-similar-to-martens" component={FlameLinkCollectionGallery} key={"similarSpecies"} />
+                            </Switch>
+                        </main>
+                    </div>
+                </MuiThemeProvider>
+            </Router>
         );
     }
 }
diff --git a/src/components/list/ViewSightings.js b/src/components/list/ViewSightings.js
index e97bb16..0d19118 100644
--- a/src/components/list/ViewSightings.js
+++ b/src/components/list/ViewSightings.js
@@ -64,24 +64,6 @@ 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>