From 19cba81fff2d2f1aa366f0b1244bdfee28107133 Mon Sep 17 00:00:00 2001
From: Al Duncanson <alexjduncanson@gmail.com>
Date: Tue, 11 Dec 2018 10:20:18 -0500
Subject: [PATCH] implemented react router

---
 src/components/Main.js | 172 ++++++++++++++++++++++++-----------------
 src/css/App.css        |   4 +
 src/css/index.css      |   0
 src/index.js           |   1 -
 4 files changed, 103 insertions(+), 74 deletions(-)
 delete mode 100644 src/css/index.css

diff --git a/src/components/Main.js b/src/components/Main.js
index 94e145c..ac08619 100644
--- a/src/components/Main.js
+++ b/src/components/Main.js
@@ -34,8 +34,14 @@ import ExpandMore from '@material-ui/icons/ExpandMore';
 import Collapse from '@material-ui/core/Collapse';
 import FlameLinkCollectionGallery from '../components/flamelink/FlameLinkCollectionGallery';
 import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
-import Switch from '@material-ui/core/Switch';
+import ThemeSwitch from '@material-ui/core/Switch';
 import { withCookies, Cookies } from 'react-cookie';
+import {
+  BrowserRouter as Router,
+  Route,
+  Link,
+  Switch
+} from 'react-router-dom';
 
 const drawerWidth = 240;
 
@@ -121,7 +127,6 @@ class ResponsiveDrawer extends React.Component {
 
         this.setState({
             mobileOpen: false,
-            key: 'Home',
             open: false,
             open2: false,
             theme: newTheme,
@@ -142,17 +147,9 @@ class ResponsiveDrawer extends React.Component {
         this.setState(state => ({ open2: !state.open2, open: false }));
     }
 
-    nav = (text) => {
-        this.setState({
-            key: text
-        });
-    }
-
     handleChange = name => event => {
         const { cookies } = this.props;
 
-        this.setState({ [name]: event.target.checked });
-
         var newTheme, newName;
 
         if (this.state.themeName === 'light') {
@@ -189,28 +186,35 @@ class ResponsiveDrawer extends React.Component {
 
     render() {
         const { classes } = this.props;
-
         const drawer = (
             <Typography component="div">
                 <div className={classes.toolbar} />
                 <Divider />
                 <List>
-                    <ListItem button key='Home' onClick={() => this.nav('Home')}>
-                        <ListItemIcon><HomeIcon /></ListItemIcon>
-                        <ListItemText primary='Home' />
-                    </ListItem>
-                    <ListItem button key='Report' onClick={() => this.nav('Report')}>
-                        <ListItemIcon><AssignmentIcon /></ListItemIcon>
-                        <ListItemText primary='Report' />
-                    </ListItem>
-                    <ListItem button key='Map' onClick={() => this.nav('Map')}>
-                        <ListItemIcon><MapIcon /></ListItemIcon>
-                        <ListItemText primary='Map' />
-                    </ListItem>
-                    <ListItem button key='List' onClick={() => this.nav('List')}>
-                        <ListItemIcon><ListIcon /></ListItemIcon>
-                        <ListItemText primary='List' />
-                    </ListItem>
+                    <Link to='/'>
+                      <ListItem button>
+                          <ListItemIcon><HomeIcon /></ListItemIcon>
+                          <ListItemText primary='Home' />
+                      </ListItem>
+                    </Link>
+                    <Link to='/report'>
+                      <ListItem button>
+                          <ListItemIcon><AssignmentIcon /></ListItemIcon>
+                          <ListItemText primary='Report' />
+                      </ListItem>
+                    </Link>
+                    <Link to='/view-map'>
+                      <ListItem button>
+                          <ListItemIcon><MapIcon /></ListItemIcon>
+                          <ListItemText primary='Map' />
+                      </ListItem>
+                    </Link>
+                    <Link to='/sighting-list'>
+                      <ListItem button>
+                          <ListItemIcon><ListIcon /></ListItemIcon>
+                          <ListItemText primary='List' />
+                      </ListItem>
+                    </Link>
                     <ListItem button onClick={this.handleClick}>
                         <ListItemIcon>
                             <SlideshowIcon />
@@ -218,27 +222,37 @@ 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>
-                            <ListItem button className={classes.nested} onClick={() => this.nav('Easy-Quiz')}>
-                                <ListItemText inset primary="Easy" />
-                            </ListItem>
-                            <ListItem button className={classes.nested} onClick={() => this.nav('Intermediate-Quiz')}>
-                                <ListItemText inset primary="Intermediate" />
-                            </ListItem>
-                            <ListItem button className={classes.nested} onClick={() => this.nav('Advanced-Quiz')}>
-                                <ListItemText inset primary="Advanced" />
-                            </ListItem>
+                            <Link to='/quiz-easy'>
+                              <ListItem button className={classes.nested}>
+                                  <ListItemText inset primary="Easy" />
+                              </ListItem>
+                            </Link>
+                            <Link to='/quiz-intermediate'>
+                              <ListItem button className={classes.nested}>
+                                  <ListItemText inset primary="Intermediate" />
+                              </ListItem>
+                            </Link>
+                            <Link to='/quiz-advanced'>
+                              <ListItem button className={classes.nested}>
+                                  <ListItemText inset primary="Advanced" />
+                              </ListItem>
+                            </Link>
                         </List>
                     </Collapse>
-                    <ListItem button key='Contact' onClick={() => this.nav('Contact')}>
-                        <ListItemIcon><EmailIcon /></ListItemIcon>
-                        <ListItemText primary='Contact' />
-                    </ListItem>
-                    <ListItem button key='About' onClick={() => this.nav('About')}>
-                        <ListItemIcon><InfoIcon /></ListItemIcon>
-                        <ListItemText primary='About' />
-                    </ListItem>
+                    <Link to='/contact'>
+                      <ListItem button>
+                          <ListItemIcon><EmailIcon /></ListItemIcon>
+                          <ListItemText primary='Contact' />
+                      </ListItem>
+                    </Link>
+                    <Link to='/about'>
+                      <ListItem button>
+                          <ListItemIcon><InfoIcon /></ListItemIcon>
+                          <ListItemText primary='About' />
+                      </ListItem>
+                    </Link>
                     <ListItem button onClick={this.handleClick2}>
                         <ListItemIcon>
                             <PhotoLibraryIcon />
@@ -246,20 +260,28 @@ 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>
-                            <ListItem button className={classes.nested} onClick={() => this.nav('Gallery1')}>
-                                <ListItemText inset primary="Martens and Kits" />
-                            </ListItem>
-                            <ListItem button className={classes.nested} onClick={() => this.nav('Gallery2')}>
-                                <ListItemText inset primary="Martens at Night" />
-                            </ListItem>
-                            <ListItem button className={classes.nested} onClick={() => this.nav('Gallery3')}>
-                                <ListItemText inset primary="Martens Being Martens" />
-                            </ListItem>
-                            <ListItem button className={classes.nested} onClick={() => this.nav('Gallery4')}>
-                                <ListItemText inset primary="Species Similar to Martens" />
-                            </ListItem>
+                            <Link to='galleries-martens-and-kits'>
+                              <ListItem button className={classes.nested}>
+                                  <ListItemText inset primary="Martens and Kits" />
+                              </ListItem>
+                            </Link>
+                            <Link to='galleries-martens-at-night'>
+                              <ListItem button className={classes.nested}>
+                                  <ListItemText inset primary="Martens at Night" />
+                              </ListItem>
+                            </Link>
+                            <Link to='galleries-martens-being-martens'>
+                              <ListItem button className={classes.nested}>
+                                  <ListItemText inset primary="Martens Being Martens" />
+                              </ListItem>
+                            </Link>
+                            <Link to='galleries-species-similar-to-martens'>
+                              <ListItem button className={classes.nested}>
+                                  <ListItemText inset primary="Species Similar to Martens" />
+                              </ListItem>
+                            </Link>
                         </List>
                     </Collapse>
                 </List>
@@ -268,6 +290,7 @@ class ResponsiveDrawer extends React.Component {
         );
 
         return (
+          <Router>
             <MuiThemeProvider theme={this.state.theme}>
                 <div className={classes.root}>
                     <CssBaseline />
@@ -279,12 +302,12 @@ class ResponsiveDrawer extends React.Component {
                                 onClick={this.handleDrawerToggle}
                                 className={classes.menuButton}
                             >
-                                <MenuIcon />
+                            <MenuIcon />
                             </IconButton>
                             <Typography variant="title" color="inherit" noWrap>
                                 Marten Tracker
                             </Typography>
-                            <Switch
+                            <ThemeSwitch
                                 checked={this.state.themeChecked}
                                 onChange={this.handleChange('themeChecked')}
                                 value="themeChecked"
@@ -324,22 +347,25 @@ class ResponsiveDrawer extends React.Component {
                     </nav>
                     <main className={classes.content}>
                         <div className={classes.toolbar} />
-                        {this.state.key === 'Home' && <Home />}
-                        {this.state.key === 'Report' && <Report />}
-                        {this.state.key === 'Map' && <ViewMap />}
-                        {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' />}
-                        {this.state.key === 'Intermediate-Quiz' && <Quiz difficulty='Intermediate' />}
-                        {this.state.key === 'Advanced-Quiz' && <Quiz difficulty='Advanced' />}
-                        {this.state.key === 'Gallery1' && <FlameLinkCollectionGallery galleryName={'martensAndKits'} />}
-                        {this.state.key === 'Gallery2' && <FlameLinkCollectionGallery galleryName={'martensAtNight'} />}
-                        {this.state.key === 'Gallery3' && <FlameLinkCollectionGallery galleryName={'martensBeingMartens'} />}
-                        {this.state.key === 'Gallery4' && <FlameLinkCollectionGallery galleryName={'similarSpecies'} />}
+                        <Switch>
+                          <Route path="/" exact={true} component={Home} />
+                          <Route path="/report" component={ () => { return <Report/> }} />
+                          <Route path="/view-map" component={ () => { return <ViewMap/> }} />
+                          <Route path="/sighting-list" component={ () => { return <SightingList themeName={this.state.themeName}/> }} />
+                          <Route path="/about" component={ () => { return <About/> }} />
+                          <Route path="/contact" component={ () => { return <Contact/> }} />
+                          <Route path="/quiz-easy" component={ () => { return <Quiz difficulty='Easy'/> }} />
+                          <Route path="/quiz-intermediate" component={ () => { return <Quiz difficulty='Intermediate'/> }} />
+                          <Route path="/quiz-advanced" component={ () => { return <Quiz difficulty='Advanced'/> }} />
+                          <Route path="/galleries-martens-and-kits" component={ () => { return <FlameLinkCollectionGallery galleryName={'martensAndKits'}/> }} />
+                          <Route path="/galleries-martens-at-night" component={ () => { return <FlameLinkCollectionGallery galleryName={'martensAtNight'}/> }} />
+                          <Route path="/galleries-martens-being-martens" component={ () => { return <FlameLinkCollectionGallery galleryName={'martensBeingMartens'}/> }} />
+                          <Route path="/galleries-similar-species" component={ () => { return <FlameLinkCollectionGallery galleryName={'similarSpecies'}/> }} />
+                        </Switch>
                     </main>
                 </div>
             </MuiThemeProvider>
+          </Router>
         );
     }
 }
diff --git a/src/css/App.css b/src/css/App.css
index 6a79e73..d5aaa08 100644
--- a/src/css/App.css
+++ b/src/css/App.css
@@ -2,6 +2,10 @@ body {
     margin: 0;
 }
 
+a {
+  text-decoration: none;
+}
+
 @media (min-width: 600px) {
     .sighting-google-map-container > div {
         width: calc(100% - 240px) !important;
diff --git a/src/css/index.css b/src/css/index.css
deleted file mode 100644
index e69de29..0000000
diff --git a/src/index.js b/src/index.js
index c7183e0..35e39b3 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './css/index.css';
 import App from './App.js';
 import registerServiceWorker from './registerServiceWorker';