GVSU/marten-application
GVSU
/
marten-application
1
0
Fork 0
Code Pull Requests Releases Activity

implemented react router

This commit is contained in:
Al Duncanson 2018-12-11 10:20:18 -05:00
parent fa84b6ce71
commit 19cba81fff
4 changed files with 103 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

172
src/components/Main.js
View File

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

4
src/css/App.css
View File

@ -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;

0
src/css/index.css
View File

1
src/index.js
View File

@ -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';