Merge pull request #72 from alDuncanson/bugfix/router

The final PR
This commit is contained in:
Alex Duncanson 2018-12-11 17:02:22 -05:00 committed by GitHub
commit 72bc8d6552
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 49 additions and 47 deletions

View File

@ -224,17 +224,17 @@ 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>
<Link to='/quiz-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='/quiz-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='/quiz-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>
@ -262,22 +262,22 @@ 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>
<Link to='galleries-martens-and-kits'> <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='galleries-martens-at-night'> <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='galleries-martens-by-day'> <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='galleries-species-similar-to-martens'> <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>
@ -348,19 +348,19 @@ class ResponsiveDrawer extends React.Component {
<main className={classes.content}> <main className={classes.content}>
<div className={classes.toolbar} /> <div className={classes.toolbar} />
<Switch> <Switch>
<Route path="/" exact={true} component={Home} /> <Route path="/" component={Home} exact={true} />
<Route path="/report" component={ () => { return <Report/> }} /> <Route path="/report" component={Report} />
<Route path="/view-map" component={ () => { return <ViewMap/> }} /> <Route path="/view-map" component={ViewMap} />
<Route path="/sighting-list" component={ () => { return <SightingList themeName={this.state.themeName}/> }} /> <Route path="/sighting-list" component={SightingList} />
<Route path="/about" component={ () => { return <About/> }} /> <Route path="/about" component={About} />
<Route path="/contact" component={ () => { return <Contact/> }} /> <Route path="/contact" component={Contact} />
<Route path="/quiz-easy" component={ () => { return <Quiz difficulty='Easy'/> }} /> <Route path="/quiz-easy" component={Quiz} key={"Easy"}/>
<Route path="/quiz-intermediate" component={ () => { return <Quiz difficulty='Intermediate'/> }} /> <Route path="/quiz-intermediate" component={Quiz} key={"Intermediate"}/>
<Route path="/quiz-advanced" component={ () => { return <Quiz difficulty='Advanced'/> }} /> <Route path="/quiz-advanced" component={Quiz} key={"Advanced"} />
<Route path="/galleries-martens-and-kits" component={ () => { return <FlameLinkCollectionGallery galleryName={'martensAndKits'}/> }} /> <Route path="/galleries-martens-and-kits" component={FlameLinkCollectionGallery} key={"martensAndKits"}/>
<Route path="/galleries-martens-at-night" component={ () => { return <FlameLinkCollectionGallery galleryName={'martensAtNight'}/> }} /> <Route path="/galleries-martens-at-night" component={FlameLinkCollectionGallery} key={"martensAtNight"} />
<Route path="/galleries-martens-by-day" component={ () => { return <FlameLinkCollectionGallery galleryName={'martensBeingMartens'}/> }} /> <Route path="/galleries-martens-by-day" component={FlameLinkCollectionGallery} key={"martensByDay"} />
<Route path="/galleries-species-similar-to-martens" component={ () => { return <FlameLinkCollectionGallery galleryName={'similarSpecies'}/> }} /> <Route path="/galleries-species-similar-to-martens" component={FlameLinkCollectionGallery} key={"similarSpecies"} />
</Switch> </Switch>
</main> </main>
</div> </div>

View File

@ -297,8 +297,8 @@ export class MapContainer extends Component {
description={<Fragment><b>Description:</b> {sighting.desc}</Fragment>} description={<Fragment><b>Description:</b> {sighting.desc}</Fragment>}
icon={{ icon={{
url: pinIcon, url: pinIcon,
anchor: new google.maps.Point(48,48), anchor: new google.maps.Point(32,32),
scaledSize: new google.maps.Size(48,48) scaledSize: new google.maps.Size(32,32)
}} }}
/> />
) )

View File

@ -41,51 +41,52 @@ const styles = theme => ({
}); });
class FlameLinkCollectionGallery extends Component { class FlameLinkCollectionGallery extends Component {
getPageTitle = galleryName => {
switch (galleryName) {
case 'martensAndKits':
document.title = 'Marten Tracker | Martens and Kits';
break;
case 'martensAtNight':
document.title = 'Marten Tracker | Martens at Night';
break;
case 'martensBeingMartens':
document.title = 'Marten Tracker | Martens Being Martens';
break;
default:
document.title = 'Marten Tracker | Galleries';
break;
}
}
constructor(props) { constructor(props) {
super(props); super(props);
var galleryName, showTitle;
if (this.props.galleryName !== undefined) {
galleryName = this.props.galleryName;
} else {
galleryName = this.props.location.state.galleryName;
}
if (this.props.showTitle !== undefined) {
showTitle = this.props.showTitle;
} else {
showTitle = this.props.location.state.showTitle;
}
this.state = { this.state = {
galleryName: galleryName,
showTitle: showTitle,
schemaDetails: '', schemaDetails: '',
schemaContent: '', schemaContent: '',
schemaDescription: '', schemaDescription: '',
}; };
flamelinkApp.schemas.getFields(this.props.galleryName, { fields: ['title', 'key', 'type', 'gridColumns', 'description', 'options'] }) flamelinkApp.schemas.getFields(this.state.galleryName, { fields: ['title', 'key', 'type', 'gridColumns', 'description', 'options'] })
.then(result => this.setState({ .then(result => this.setState({
schemaDetails: result schemaDetails: result
})) }))
flamelinkApp.content.get(this.props.galleryName) flamelinkApp.content.get(this.state.galleryName)
.then(result => this.setState({ .then(result => this.setState({
schemaContent: result schemaContent: result
})) }))
if (this.props.showTitle === false) { if (this.state.showTitle === false) {
} else { } else {
flamelinkApp.schemas.get(this.props.galleryName) flamelinkApp.schemas.get(this.state.galleryName)
.then(result => this.setState({ .then(result => this.setState({
schemaDescription: result.title schemaDescription: result.title
})) }))
} }
}
this.getPageTitle(this.props.galleryName); componentDidMount() {
document.title = 'Marten Tracker | Galleries';
} }
getGalleryInfo(schemaDetails, schemaContent) { getGalleryInfo(schemaDetails, schemaContent) {

View File

@ -130,7 +130,7 @@ class ContactForm extends React.Component {
<Fragment> <Fragment>
<Typography variant="headline" align="center"> <Typography variant="headline" align="center">
{<br/>} {<br/>}
Send us an email! Feel free to contact us if you have any questions about American martens,{<br/>}encountered any difficulties with the website, or if you have any ideas for future marten research.
<form className={classes.container} autoComplete="off" onSubmit={this.handleSubmit}> <form className={classes.container} autoComplete="off" onSubmit={this.handleSubmit}>
<Grid container className="contact-form"> <Grid container className="contact-form">

View File

@ -3,13 +3,14 @@ import QuizGame from '../components/QuizGame';
class QuizPage extends Component { class QuizPage extends Component {
componentDidMount() { componentWillMount() {
document.title = 'Marten Tracker | Quiz'; document.title = 'Marten Tracker | Quiz';
this.setState({difficulty: this.props.location.state.difficulty});
} }
render() { render() {
return ( return (
<QuizGame difficulty={this.props.difficulty}/> <QuizGame difficulty={this.state.difficulty}/>
); );
} }
} }