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

implemented react router

Browse Source
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

102
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 Collapse from '@material-ui/core/Collapse';
import FlameLinkCollectionGallery from '../components/flamelink/FlameLinkCollectionGallery'; import FlameLinkCollectionGallery from '../components/flamelink/FlameLinkCollectionGallery';
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'; 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 { withCookies, Cookies } from 'react-cookie';
import {
BrowserRouter as Router,
Route,
Link,
Switch
} from 'react-router-dom';
const drawerWidth = 240; const drawerWidth = 240;
@ -121,7 +127,6 @@ class ResponsiveDrawer extends React.Component {
this.setState({ this.setState({
mobileOpen: false, mobileOpen: false,
key: 'Home',
open: false, open: false,
open2: false, open2: false,
theme: newTheme, theme: newTheme,
@ -142,17 +147,9 @@ class ResponsiveDrawer extends React.Component {
this.setState(state => ({ open2: !state.open2, open: false })); this.setState(state => ({ open2: !state.open2, open: false }));
} }
nav = (text) => {
this.setState({
key: text
});
}
handleChange = name => event => { handleChange = name => event => {
const { cookies } = this.props; const { cookies } = this.props;
this.setState({ [name]: event.target.checked });
var newTheme, newName; var newTheme, newName;
if (this.state.themeName === 'light') { if (this.state.themeName === 'light') {
@ -189,28 +186,35 @@ class ResponsiveDrawer extends React.Component {
render() { render() {
const { classes } = this.props; const { classes } = this.props;
const drawer = ( const drawer = (
<Typography component="div"> <Typography component="div">
<div className={classes.toolbar} /> <div className={classes.toolbar} />
<Divider /> <Divider />
<List> <List>
<ListItem button key='Home' onClick={() => this.nav('Home')}> <Link to='/'>
<ListItem button>
<ListItemIcon><HomeIcon /></ListItemIcon> <ListItemIcon><HomeIcon /></ListItemIcon>
<ListItemText primary='Home' /> <ListItemText primary='Home' />
</ListItem> </ListItem>
<ListItem button key='Report' onClick={() => this.nav('Report')}> </Link>
<Link to='/report'>
<ListItem button>
<ListItemIcon><AssignmentIcon /></ListItemIcon> <ListItemIcon><AssignmentIcon /></ListItemIcon>
<ListItemText primary='Report' /> <ListItemText primary='Report' />
</ListItem> </ListItem>
<ListItem button key='Map' onClick={() => this.nav('Map')}> </Link>
<Link to='/view-map'>
<ListItem button>
<ListItemIcon><MapIcon /></ListItemIcon> <ListItemIcon><MapIcon /></ListItemIcon>
<ListItemText primary='Map' /> <ListItemText primary='Map' />
</ListItem> </ListItem>
<ListItem button key='List' onClick={() => this.nav('List')}> </Link>
<Link to='/sighting-list'>
<ListItem button>
<ListItemIcon><ListIcon /></ListItemIcon> <ListItemIcon><ListIcon /></ListItemIcon>
<ListItemText primary='List' /> <ListItemText primary='List' />
</ListItem> </ListItem>
</Link>
<ListItem button onClick={this.handleClick}> <ListItem button onClick={this.handleClick}>
<ListItemIcon> <ListItemIcon>
<SlideshowIcon /> <SlideshowIcon />
@ -220,25 +224,35 @@ class ResponsiveDrawer extends React.Component {
</ListItem> </ListItem>
<Collapse in={this.state.open} timeout="auto" unmountOnExit> <Collapse in={this.state.open} timeout="auto" unmountOnExit>
<List component="div" disablePadding> <List component="div" disablePadding>
<ListItem button className={classes.nested} onClick={() => this.nav('Easy-Quiz')}> <Link to='/quiz-easy'>
<ListItem button className={classes.nested}>
<ListItemText inset primary="Easy" /> <ListItemText inset primary="Easy" />
</ListItem> </ListItem>
<ListItem button className={classes.nested} onClick={() => this.nav('Intermediate-Quiz')}> </Link>
<Link to='/quiz-intermediate'>
<ListItem button className={classes.nested}>
<ListItemText inset primary="Intermediate" /> <ListItemText inset primary="Intermediate" />
</ListItem> </ListItem>
<ListItem button className={classes.nested} onClick={() => this.nav('Advanced-Quiz')}> </Link>
<Link to='/quiz-advanced'>
<ListItem button className={classes.nested}>
<ListItemText inset primary="Advanced" /> <ListItemText inset primary="Advanced" />
</ListItem> </ListItem>
</Link>
</List> </List>
</Collapse> </Collapse>
<ListItem button key='Contact' onClick={() => this.nav('Contact')}> <Link to='/contact'>
<ListItem button>
<ListItemIcon><EmailIcon /></ListItemIcon> <ListItemIcon><EmailIcon /></ListItemIcon>
<ListItemText primary='Contact' /> <ListItemText primary='Contact' />
</ListItem> </ListItem>
<ListItem button key='About' onClick={() => this.nav('About')}> </Link>
<Link to='/about'>
<ListItem button>
<ListItemIcon><InfoIcon /></ListItemIcon> <ListItemIcon><InfoIcon /></ListItemIcon>
<ListItemText primary='About' /> <ListItemText primary='About' />
</ListItem> </ListItem>
</Link>
<ListItem button onClick={this.handleClick2}> <ListItem button onClick={this.handleClick2}>
<ListItemIcon> <ListItemIcon>
<PhotoLibraryIcon /> <PhotoLibraryIcon />
@ -248,18 +262,26 @@ class ResponsiveDrawer extends React.Component {
</ListItem> </ListItem>
<Collapse in={this.state.open2} timeout="auto" unmountOnExit> <Collapse in={this.state.open2} timeout="auto" unmountOnExit>
<List component="div" disablePadding> <List component="div" disablePadding>
<ListItem button className={classes.nested} onClick={() => this.nav('Gallery1')}> <Link to='galleries-martens-and-kits'>
<ListItem button className={classes.nested}>
<ListItemText inset primary="Martens and Kits" /> <ListItemText inset primary="Martens and Kits" />
</ListItem> </ListItem>
<ListItem button className={classes.nested} onClick={() => this.nav('Gallery2')}> </Link>
<Link to='galleries-martens-at-night'>
<ListItem button className={classes.nested}>
<ListItemText inset primary="Martens at Night" /> <ListItemText inset primary="Martens at Night" />
</ListItem> </ListItem>
<ListItem button className={classes.nested} onClick={() => this.nav('Gallery3')}> </Link>
<Link to='galleries-martens-being-martens'>
<ListItem button className={classes.nested}>
<ListItemText inset primary="Martens Being Martens" /> <ListItemText inset primary="Martens Being Martens" />
</ListItem> </ListItem>
<ListItem button className={classes.nested} onClick={() => this.nav('Gallery4')}> </Link>
<Link to='galleries-species-similar-to-martens'>
<ListItem button className={classes.nested}>
<ListItemText inset primary="Species Similar to Martens" /> <ListItemText inset primary="Species Similar to Martens" />
</ListItem> </ListItem>
</Link>
</List> </List>
</Collapse> </Collapse>
</List> </List>
@ -268,6 +290,7 @@ class ResponsiveDrawer extends React.Component {
); );
return ( return (
<Router>
<MuiThemeProvider theme={this.state.theme}> <MuiThemeProvider theme={this.state.theme}>
<div className={classes.root}> <div className={classes.root}>
<CssBaseline /> <CssBaseline />
@ -284,7 +307,7 @@ class ResponsiveDrawer extends React.Component {
<Typography variant="title" color="inherit" noWrap> <Typography variant="title" color="inherit" noWrap>
Marten Tracker Marten Tracker
</Typography> </Typography>
<Switch <ThemeSwitch
checked={this.state.themeChecked} checked={this.state.themeChecked}
onChange={this.handleChange('themeChecked')} onChange={this.handleChange('themeChecked')}
value="themeChecked" value="themeChecked"
@ -324,22 +347,25 @@ class ResponsiveDrawer extends React.Component {
</nav> </nav>
<main className={classes.content}> <main className={classes.content}>
<div className={classes.toolbar} /> <div className={classes.toolbar} />
{this.state.key === 'Home' && <Home />} <Switch>
{this.state.key === 'Report' && <Report />} <Route path="/" exact={true} component={Home} />
{this.state.key === 'Map' && <ViewMap />} <Route path="/report" component={ () => { return <Report/> }} />
{this.state.key === 'List' && <SightingList themeName={this.state.themeName} />} <Route path="/view-map" component={ () => { return <ViewMap/> }} />
{this.state.key === 'About' && <About />} <Route path="/sighting-list" component={ () => { return <SightingList themeName={this.state.themeName}/> }} />
{this.state.key === 'Contact' && <Contact />} <Route path="/about" component={ () => { return <About/> }} />
{this.state.key === 'Easy-Quiz' && <Quiz difficulty='Easy' />} <Route path="/contact" component={ () => { return <Contact/> }} />
{this.state.key === 'Intermediate-Quiz' && <Quiz difficulty='Intermediate' />} <Route path="/quiz-easy" component={ () => { return <Quiz difficulty='Easy'/> }} />
{this.state.key === 'Advanced-Quiz' && <Quiz difficulty='Advanced' />} <Route path="/quiz-intermediate" component={ () => { return <Quiz difficulty='Intermediate'/> }} />
{this.state.key === 'Gallery1' && <FlameLinkCollectionGallery galleryName={'martensAndKits'} />} <Route path="/quiz-advanced" component={ () => { return <Quiz difficulty='Advanced'/> }} />
{this.state.key === 'Gallery2' && <FlameLinkCollectionGallery galleryName={'martensAtNight'} />} <Route path="/galleries-martens-and-kits" component={ () => { return <FlameLinkCollectionGallery galleryName={'martensAndKits'}/> }} />
{this.state.key === 'Gallery3' && <FlameLinkCollectionGallery galleryName={'martensBeingMartens'} />} <Route path="/galleries-martens-at-night" component={ () => { return <FlameLinkCollectionGallery galleryName={'martensAtNight'}/> }} />
{this.state.key === 'Gallery4' && <FlameLinkCollectionGallery galleryName={'similarSpecies'} />} <Route path="/galleries-martens-being-martens" component={ () => { return <FlameLinkCollectionGallery galleryName={'martensBeingMartens'}/> }} />
<Route path="/galleries-similar-species" component={ () => { return <FlameLinkCollectionGallery galleryName={'similarSpecies'}/> }} />
</Switch>
</main> </main>
</div> </div>
</MuiThemeProvider> </MuiThemeProvider>
</Router>
); );
} }
} }

4
src/css/App.css
View File

@ -2,6 +2,10 @@ body {
margin: 0; margin: 0;
} }
a {
text-decoration: none;
}
@media (min-width: 600px) { @media (min-width: 600px) {
.sighting-google-map-container > div { .sighting-google-map-container > div {
width: calc(100% - 240px) !important; 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 React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import './css/index.css';
import App from './App.js'; import App from './App.js';
import registerServiceWorker from './registerServiceWorker'; import registerServiceWorker from './registerServiceWorker';