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

Fixed issue with sighting list, although I hate my solution.

This commit is contained in:
wildscotsmen 2018-12-11 23:54:52 -05:00
parent e9b5e1f9cd
commit 0e9a85e803
2 changed files with 133 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

266
src/components/Main.js
View File

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

18
src/components/list/ViewSightings.js
View File

@ -64,24 +64,6 @@ class ViewSightings extends Component {
clicked: false 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() { render() {
return ( return (
<Fragment> <Fragment>