Fixed issue with sighting list, although I hate my solution.
This commit is contained in:
wildscotsmen
parent
e9b5e1f9cd
commit
0e9a85e803
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue