Merge branch 'master' of https://github.com/alDuncanson/marten-application

package-lock.json

@@ -12513,9 +12513,9 @@
       }
     },
     "react-cookie": {
-      "version": "3.0.7",
+      "version": "3.0.8",
-      "resolved": "https://registry.npmjs.org/react-cookie/-/react-cookie-3.0.7.tgz",
+      "resolved": "https://registry.npmjs.org/react-cookie/-/react-cookie-3.0.8.tgz",
-      "integrity": "sha512-c4lGOqIPC54kUocE7kbuqZNeIdXtZGzXQMA7BSWhaJ/5tWeoW5fJ7mF/pR+rU5fYDF9kktTHCIbovwSsNYblOg==",
+      "integrity": "sha512-Gdop2Cf2pBFA0r4L9l5DRghKsPVMNKRM3x2aeyJ4JSaENpWWPP4v9LJvvtxXs3AboOGCuMj19oUw04Z9cVQQTg==",
       "requires": {
         "@types/hoist-non-react-statics": "^3.0.1",
         "hoist-non-react-statics": "^3.0.0",
@@ -12523,9 +12523,9 @@
       },
       "dependencies": {
         "hoist-non-react-statics": {
-          "version": "3.2.0",
+          "version": "3.2.1",
-          "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.2.0.tgz",
+          "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.2.1.tgz",
-          "integrity": "sha512-3IascCRfaEkbmHjJnUxWSspIUE1okLPjGTMVXW8zraUo1t3yg1BadKAxAGILHwgoBzmMnzrgeeaDGBvpuPz6dA==",
+          "integrity": "sha512-TFsu3TV3YLY+zFTZDrN8L2DTFanObwmBLpWvJs1qfUuEQ5bTAdFcwfx2T/bsCXfM9QHSLvjfP+nihEl0yvozxw==",
           "requires": {
             "react-is": "^16.3.2"
           }

package.json

@@ -17,7 +17,7 @@
     "material-ui-icons": "^1.0.0-beta.36",
     "moment": "^2.22.2",
     "react": "^16.5.1",
-    "react-cookie": "^3.0.7",
+    "react-cookie": "^3.0.8",
     "react-dom": "^16.5.1",
     "react-image-gallery": "^0.8.12",
     "react-quiz-component": "0.2.0",

public/index.html

@@ -40,7 +40,6 @@
         You need to enable JavaScript to run this app.
     </noscript>
     <div id="root"></div>
-    <!-- Hotjar Tracking Code for https://marten-application.netlify.com/ -->
     <!-- Hotjar Tracking Code for https://marten-tracker.netlify.com/ -->
     <script>
       (function(h,o,t,j,a,r){

src/components/Main.js

@@ -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,12 +147,6 @@ 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;
 
@@ -189,28 +188,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')}>
+                    <Link to='/'>
-                        <ListItemIcon><HomeIcon /></ListItemIcon>
+                        <ListItem button>
-                        <ListItemText primary='Home' />
+                            <ListItemIcon><HomeIcon /></ListItemIcon>
-                    </ListItem>
+                            <ListItemText primary='Home' />
-                    <ListItem button key='Report' onClick={() => this.nav('Report')}>
+                        </ListItem>
-                        <ListItemIcon><AssignmentIcon /></ListItemIcon>
+                    </Link>
-                        <ListItemText primary='Report' />
+                    <Link to='/report'>
-                    </ListItem>
+                        <ListItem button>
-                    <ListItem button key='Map' onClick={() => this.nav('Map')}>
+                            <ListItemIcon><AssignmentIcon /></ListItemIcon>
-                        <ListItemIcon><MapIcon /></ListItemIcon>
+                            <ListItemText primary='Report' />
-                        <ListItemText primary='Map' />
+                        </ListItem>
-                    </ListItem>
+                    </Link>
-                    <ListItem button key='List' onClick={() => this.nav('List')}>
+                    <Link to='/view-map'>
-                        <ListItemIcon><ListIcon /></ListItemIcon>
+                        <ListItem button>
-                        <ListItemText primary='List' />
+                            <ListItemIcon><MapIcon /></ListItemIcon>
-                    </ListItem>
+                            <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 />
@@ -220,25 +226,35 @@ class ResponsiveDrawer extends React.Component {
                     </ListItem>
                     <Collapse in={this.state.open} timeout="auto" unmountOnExit>
                         <List component="div" disablePadding>
-                            <ListItem button className={classes.nested} onClick={() => this.nav('Easy-Quiz')}>
+                            <Link to={{ pathname: '/quiz-easy', state: { difficulty: 'Easy' } }}>
-                                <ListItemText inset primary="Easy" />
+                                <ListItem button className={classes.nested}>
-                            </ListItem>
+                                    <ListItemText inset primary="Easy" />
-                            <ListItem button className={classes.nested} onClick={() => this.nav('Intermediate-Quiz')}>
+                                </ListItem>
-                                <ListItemText inset primary="Intermediate" />
+                            </Link>
-                            </ListItem>
+                            <Link to={{ pathname: '/quiz-intermediate', state: { difficulty: 'Intermediate' } }}>
-                            <ListItem button className={classes.nested} onClick={() => this.nav('Advanced-Quiz')}>
+                                <ListItem button className={classes.nested}>
-                                <ListItemText inset primary="Advanced" />
+                                    <ListItemText inset primary="Intermediate" />
-                            </ListItem>
+                                </ListItem>
+                            </Link>
+                            <Link to={{ pathname: '/quiz-advanced', state: { difficulty: 'Advanced' } }}>
+                                <ListItem button className={classes.nested}>
+                                    <ListItemText inset primary="Advanced" />
+                                </ListItem>
+                            </Link>
                         </List>
                     </Collapse>
-                    <ListItem button key='Contact' onClick={() => this.nav('Contact')}>
+                    <Link to='/contact'>
-                        <ListItemIcon><EmailIcon /></ListItemIcon>
+                        <ListItem button>
-                        <ListItemText primary='Contact' />
+                            <ListItemIcon><EmailIcon /></ListItemIcon>
-                    </ListItem>
+                            <ListItemText primary='Contact' />
-                    <ListItem button key='About' onClick={() => this.nav('About')}>
+                        </ListItem>
-                        <ListItemIcon><InfoIcon /></ListItemIcon>
+                    </Link>
-                        <ListItemText primary='About' />
+                    <Link to='/about'>
-                    </ListItem>
+                        <ListItem button>
+                            <ListItemIcon><InfoIcon /></ListItemIcon>
+                            <ListItemText primary='About' />
+                        </ListItem>
+                    </Link>
                     <ListItem button onClick={this.handleClick2}>
                         <ListItemIcon>
                             <PhotoLibraryIcon />
@@ -248,18 +264,26 @@ class ResponsiveDrawer extends React.Component {
                     </ListItem>
                     <Collapse in={this.state.open2} timeout="auto" unmountOnExit>
                         <List component="div" disablePadding>
-                            <ListItem button className={classes.nested} onClick={() => this.nav('Gallery1')}>
+                            <Link to={{ pathname: 'galleries-martens-and-kits', state: { galleryName: 'martensAndKits' } }}>
-                                <ListItemText inset primary="Martens and Kits" />
+                                <ListItem button className={classes.nested}>
-                            </ListItem>
+                                    <ListItemText inset primary="Martens and Kits" />
-                            <ListItem button className={classes.nested} onClick={() => this.nav('Gallery2')}>
+                                </ListItem>
-                                <ListItemText inset primary="Martens at Night" />
+                            </Link>
-                            </ListItem>
+                            <Link to={{ pathname: 'galleries-martens-at-night', state: { galleryName: 'martensAtNight' } }}>
-                            <ListItem button className={classes.nested} onClick={() => this.nav('Gallery3')}>
+                                <ListItem button className={classes.nested}>
-                                <ListItemText inset primary="Martens Being Martens" />
+                                    <ListItemText inset primary="Martens at Night" />
-                            </ListItem>
+                                </ListItem>
-                            <ListItem button className={classes.nested} onClick={() => this.nav('Gallery4')}>
+                            </Link>
-                                <ListItemText inset primary="Species Similar to Martens" />
+                            <Link to={{ pathname: 'galleries-martens-by-day', state: { galleryName: 'martensBeingMartens' } }}>
-                            </ListItem>
+                                <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>
                         </List>
                     </Collapse>
                 </List>
@@ -268,78 +292,82 @@ class ResponsiveDrawer extends React.Component {
         );
 
         return (
-            <MuiThemeProvider theme={this.state.theme}>
+            <Router>
-                <div className={classes.root}>
+                <MuiThemeProvider theme={this.state.theme}>
-                    <CssBaseline />
+                    <div className={classes.root}>
-                    <AppBar position="fixed" color="primary" className={classes.appBar}>
+                        <CssBaseline />
-                        <Toolbar>
+                        <AppBar position="fixed" color="primary" className={classes.appBar}>
-                            <IconButton
+                            <Toolbar>
-                                color="inherit"
+                                <IconButton
-                                aria-label="Open drawer"
+                                    color="inherit"
-                                onClick={this.handleDrawerToggle}
+                                    aria-label="Open drawer"
-                                className={classes.menuButton}
+                                    onClick={this.handleDrawerToggle}
-                            >
+                                    className={classes.menuButton}
-                                <MenuIcon />
+                                >
-                            </IconButton>
+                                    <MenuIcon />
-                            <Typography variant="title" color="inherit" noWrap>
+                                </IconButton>
-                                Marten Tracker
+                                <Typography variant="title" color="inherit" noWrap>
+                                    Marten Tracker
                             </Typography>
-                            <Switch
+                                <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} />
-                        {this.state.key === 'Home' && <Home />}
+                            <Switch>
-                        {this.state.key === 'Report' && <Report />}
+                                <Route path="/" component={Home} exact={true} />
-                        {this.state.key === 'Map' && <ViewMap />}
+                                <Route path="/report" component={Report} />
-                        {this.state.key === 'List' && <SightingList themeName={this.state.themeName} />}
+                                <Route path="/view-map" component={ViewMap} />
-                        {this.state.key === 'About' && <About />}
+                                <Route path="/sighting-list" component={SightingList} key={this.state.themeName} />
-                        {this.state.key === 'Contact' && <Contact />}
+                                <Route path="/about" component={About} />
-                        {this.state.key === 'Easy-Quiz' && <Quiz difficulty='Easy' />}
+                                <Route path="/contact" component={Contact} />
-                        {this.state.key === 'Intermediate-Quiz' && <Quiz difficulty='Intermediate' />}
+                                <Route path="/quiz-easy" component={Quiz} key={"Easy"} />
-                        {this.state.key === 'Advanced-Quiz' && <Quiz difficulty='Advanced' />}
+                                <Route path="/quiz-intermediate" component={Quiz} key={"Intermediate"} />
-                        {this.state.key === 'Gallery1' && <FlameLinkCollectionGallery galleryName={'martensAndKits'} />}
+                                <Route path="/quiz-advanced" component={Quiz} key={"Advanced"} />
-                        {this.state.key === 'Gallery2' && <FlameLinkCollectionGallery galleryName={'martensAtNight'} />}
+                                <Route path="/galleries-martens-and-kits" component={FlameLinkCollectionGallery} key={"martensAndKits"} />
-                        {this.state.key === 'Gallery3' && <FlameLinkCollectionGallery galleryName={'martensBeingMartens'} />}
+                                <Route path="/galleries-martens-at-night" component={FlameLinkCollectionGallery} key={"martensAtNight"} />
-                        {this.state.key === 'Gallery4' && <FlameLinkCollectionGallery galleryName={'similarSpecies'} />}
+                                <Route path="/galleries-martens-by-day" component={FlameLinkCollectionGallery} key={"martensByDay"} />
-                    </main>
+                                <Route path="/galleries-species-similar-to-martens" component={FlameLinkCollectionGallery} key={"similarSpecies"} />
-                </div>
+                            </Switch>
-            </MuiThemeProvider>
+                        </main>
+                    </div>
+                </MuiThemeProvider>
+            </Router>
         );
     }
 }

src/components/flamelink/FlameLinkCollection.js

@@ -1,55 +1,61 @@
-import React, { Component} from 'react';
+import React, { Component } from 'react';
 import flamelinkApp from '../../utilities/flamelink.js';
+import Grid from '@material-ui/core/Grid';
 import FlameLinkCollectionComponentCreations from './FlameLinkCollectionComponentCreations';
 
 class FlameLinkCollection extends Component {
-    constructor() {
+    constructor(props) {
-        super();
+        super(props);
-        
         
         this.state = {
           schemaContent: '',
         }
 
-        flamelinkApp.content.get(global.schemaName)
+        flamelinkApp.content.get(this.props.schemaName)
         .then(result => this.setState({
           schemaContent: result
         }))
       }
 
-    getCollectionContent(schemaData){
+    getCollectionContent(schemaData) {
         var arr2 = [];
         var collectionInfo = [schemaData, this.state.schemaContent];
-        for (var val in this.state.schemaContent){
+        for (var val in this.state.schemaContent) {
-            arr2[this.state.schemaContent[val]['order']] = val;
+            if ( this.state.schemaContent[val].hasOwnProperty('order') ) {   
+                arr2[this.state.schemaContent[val]['order']] = val;
+            }
+            else{
+                arr2.push(val);
+            }
         }
         return arr2.map(this.getCollectionComponentInfo, collectionInfo);
     }
 
-    getCollectionComponentInfo(num){
+    getCollectionComponentInfo(num) {
         var arr3 = [];
-        for (var val in this[0]){
+        for (var val in this[0]) {
             arr3.push(val);
         }
+        
         return <FlameLinkCollectionComponentCreations schemaData={this[0]} schemaContent={this[1][num]} arr={arr3} key={num} />
     }
 
     countProperties(obj) {
-    var count = 0;
+        var count = 0;
 
-    for(var prop in obj) {
+        for (var prop in obj) {
-        if(obj.hasOwnProperty(prop))
+            if (obj.hasOwnProperty(prop))
-            ++count;
+                ++count;
+        }
+
+        return count;
     }
 
-    return count;
-}
-
     render() {
-        return(
+        return (
-            <div>
+            <Grid container>
                 {this.getCollectionContent(this.props.schemaData)}
-            </div>
+            </Grid>
         );
     }
 }

src/components/flamelink/FlameLinkCollectionComponentCreations.js

@@ -1,25 +1,48 @@
-import React, { Component} from 'react';
+import React, { Component } from 'react';
 import Grid from '@material-ui/core/Grid';
 import FlameLinkCollectionStructure from './FlameLinkCollectionStructure';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import Paper from '@material-ui/core/Paper';
+
+const styles = theme => ({
+    root: {
+        ...theme.mixins.gutters(),
+        margin: theme.spacing.unit * 2,
+        paddingTop: theme.spacing.unit * 2,
+        paddingBottom: theme.spacing.unit * 2,
+        width: '100%'
+    },
+});
 
 class FlameLinkCollectionComponentCreations extends Component {
 
-    createCollectionEntries(schemaData, schemaContent, arr){
+    createCollectionEntries(schemaData, schemaContent, arr) {
         var collectionInfo = [schemaData, schemaContent];
         return arr.map(this.createCollectionComponents, collectionInfo);
     }
 
-    createCollectionComponents(num){
+    createCollectionComponents(num) {
-        return <FlameLinkCollectionStructure schemaData={this[0]} schemaContent={this[1]} field={this[0][num]} type={this[0][num].type} key={this[0][num].key} />
+        return (
+            <FlameLinkCollectionStructure schemaData={this[0]} schemaContent={this[1]} field={this[0][num]} type={this[0][num].type} key={this[0][num].key} />
+        );
     }
 
     render() {
-        return(
+        const { classes } = this.props;
+
+        return (
+            <Paper className={classes.root} elevation={4}>
                 <Grid container>
                     {this.createCollectionEntries(this.props.schemaData, this.props.schemaContent, this.props.arr)}
                 </Grid>
+            </Paper>
         );
     }
 }
 
-export default FlameLinkCollectionComponentCreations;
+FlameLinkCollectionComponentCreations.propTypes = {
+    classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(FlameLinkCollectionComponentCreations);

src/components/flamelink/FlameLinkCollectionGallery.js

@@ -41,51 +41,52 @@ const styles = theme => ({
 });
 
 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) {
         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 = {
+            galleryName: galleryName,
+            showTitle: showTitle,
             schemaDetails: '',
             schemaContent: '',
             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({
                 schemaDetails: result
             }))
 
-        flamelinkApp.content.get(this.props.galleryName)
+        flamelinkApp.content.get(this.state.galleryName)
             .then(result => this.setState({
                 schemaContent: result
             }))
 
-        if (this.props.showTitle === false) {
+        if (this.state.showTitle === false) {
         } else {
-            flamelinkApp.schemas.get(this.props.galleryName)
+            flamelinkApp.schemas.get(this.state.galleryName)
                 .then(result => this.setState({
                     schemaDescription: result.title
                 }))
         }
+    }
 
-        this.getPageTitle(this.props.galleryName);
+    componentDidMount() {
+        document.title = 'Marten Tracker | Galleries';
     }
 
     getGalleryInfo(schemaDetails, schemaContent) {

src/components/flamelink/FlameLinkCollectionStructure.js

@@ -1,4 +1,4 @@
-import React, { Component} from 'react';
+import React, { Component } from 'react';
 import Grid from '@material-ui/core/Grid';
 import Typography from '@material-ui/core/Typography';
 import { withStyles } from '@material-ui/core/styles';
@@ -7,102 +7,100 @@ import FlameLinkImage from './FlameLinkImage';
 import FlameLinkFieldSet from './FlameLinkFieldSet';
 
 const styles = theme => ({
-        flamelinkItem: {
+    flamelinkItem: {
-            paddingRight: 20,
+        paddingRight: 20,
-            paddingLeft: 20,
+        paddingLeft: 20,
-            paddingTop: 20,
+        paddingTop: 20,
-        },
+    },
-    });
+});
 
 class FlameLinkCollectionStructure extends Component {
-    constructor() {
+    state = {
-        super();
+        schemaContent: '',
+    }
 
+    componentDidMount() {
         global.mediaID = '';
 
-        this.state = {
+        flamelinkApp.content.get(this.props.schemaName)
-          schemaContent: '',
+            .then(result => this.setState({
+                schemaContent: result
+            }))
+    }
+
+    getContent(content, field, key, type, description) {
+        if (type === 'text') {
+            if (description === 'h1') {
+                return (
+                    <Typography variant='display4' id={key}>
+                        {content[key]}
+                    </Typography>
+                )
+            }
+            if (description === 'h2') {
+                return (
+                    <Typography variant='display3' id={key}>
+                        {content[key]}
+                    </Typography>
+                )
+            }
+            if (description === 'h3') {
+                return (
+                    <Typography variant='display2' id={key}>
+                        {content[key]}
+                    </Typography>
+                )
+            }
+            if (description === 'h4') {
+                return (
+                    <Typography variant='display1' id={key}>
+                        {content[key]}
+                    </Typography>
+                )
+            }
+            if (description === 'h5') {
+                return (
+                    <Typography variant='headline' id={key}>
+                        {content[key]}
+                    </Typography>
+                )
+            }
+            if (description === 'h6') {
+                return (
+                    <Typography variant='title' id={key}>
+                        {content[key]}
+                    </Typography>
+                )
+            }
+            else {
+                return (
+                    <Typography variant='body2' component="p" id={key}>
+                        {content[key]}
+                    </Typography>
+                )
+            }
         }
-
+        if (type === 'textarea') {
-        flamelinkApp.content.get(global.schemaName)
+            return (
-        .then(result => this.setState({
+                <Typography variant='body2' component="p" id={key}>
-          schemaContent: result
+                    {content[key]}
-        }))
+                </Typography>
-      }
+            )
-
+        }
-    getContent(content, field, key, type, description){
+        if (type === 'media') {
-        if (type === 'text'){
+            for (var val in content[key]) {
-                if(description === 'h1'){
+                global.mediaID = content[key][val];
-                    return  (
+                return <FlameLinkImage />
-                            <Typography variant='display4' id={key}>
-                                {content[key]}
-                            </Typography>
-                            )                
-                }
-                if(description === 'h2'){
-                    return  (
-                            <Typography variant='display3' id={key}>
-                                {content[key]}
-                            </Typography>
-                            )                
-                }
-                if(description === 'h3'){
-                    return  (
-                            <Typography variant='display2' id={key}>
-                                {content[key]}
-                            </Typography>
-                            )                
-                }
-                if(description === 'h4'){
-                    return  (
-                            <Typography variant='display1' id={key}>
-                                {content[key]}
-                            </Typography>
-                            )                
-                }
-                if(description === 'h5'){
-                    return  (
-                            <Typography variant='headline' id={key}>
-                                {content[key]}
-                            </Typography>
-                            )                
-                }
-                if(description === 'h6'){
-                    return  (
-                            <Typography variant='title' id={key}>
-                                {content[key]}
-                            </Typography>
-                            )                
-                }
-                else{
-                    return  (
-                            <Typography variant='body2' component="p" id={key}>
-                                {content[key]}
-                            </Typography>
-                            )
-                }
             }
-            if(type === 'textarea'){
+        }
-                return  (
+        if (type === 'fieldset') {
-                        <Typography variant='body2' component="p" id={key}>
+            if (content === '') {
-                            {content[key]}
+                return
-                        </Typography>
-                        )               
             }
-            if (type === 'media'){
+            else {
-                for (var val in content[key]){
+                return <FlameLinkFieldSet field={content[key]} field2={field.options} />
-                    global.mediaID = content[key][val];
-                    return <FlameLinkImage/>
-                } 
-            }
-            if (type === 'fieldset'){
-                if(content === ''){
-                    return
-                }
-                else{
-                    return <FlameLinkFieldSet field={content[key]} field2={field.options}/>
-                }
             }
+        }
     }
 
     render() {
@@ -112,9 +110,9 @@ class FlameLinkCollectionStructure extends Component {
         const md = this.props.field.gridColumns.md;
         const sm = this.props.field.gridColumns.sm;
         const xs = this.props.field.gridColumns.xs;
-        return(
+        return (
             <Grid item lg={lg} md={md} sm={sm} xs={xs} className={classes.flamelinkItem}>
-                    {this.getContent(this.props.schemaContent, this.props.field, this.props.field.key, this.props.type, this.props.field.description)}
+                {this.getContent(this.props.schemaContent, this.props.field, this.props.field.key, this.props.type, this.props.field.description)}
             </Grid>
         );
     }

src/components/flamelink/FlameLinkComponentCreations.js

@@ -1,40 +1,40 @@
-import React, { Component} from 'react';
+import React, { Component } from 'react';
 import FlameLinkStructure from './FlameLinkStructure';
 import FlameLinkCollection from './FlameLinkCollection';
 import Grid from '@material-ui/core/Grid';
 
 class FlameLinkComponentCreations extends Component {
 
-    getSchemaFieldData(schemaData, schemaType){
+    getSchemaFieldData(schemaData, schemaType) {
         var arr = [];
-        for (var val in schemaData){
+        for (var val in schemaData) {
             arr.push(val);
         }
 
-        if(schemaType === 'single'){
+        if (schemaType === 'single') {
             return arr.map(this.createSingleTypeSchemaComponents, schemaData);
         }
-        if(schemaType === 'collection'){
+        if (schemaType === 'collection') {
             return this.createCollectionTypeSchemaComponents(schemaData);
         }
-        else{
+        else {
             return
         }
     }
 
-    createSingleTypeSchemaComponents(num){
+    createSingleTypeSchemaComponents(num) {
         return <FlameLinkStructure schemaData={this} field={this[num]} type={this[num].type} key={this[num].key} />
     }
 
-    createCollectionTypeSchemaComponents(schemaData){  
+    createCollectionTypeSchemaComponents = schemaData => {
-        return <FlameLinkCollection schemaData={schemaData} />
+        return <FlameLinkCollection schemaName={this.props.schemaName} schemaData={schemaData} />
     }
 
     render() {
-        return(
+        return (
-                <Grid container>
+            <Grid container>
-                    {this.getSchemaFieldData(this.props.schemaDetails, this.props.schemaType)}
+                {this.getSchemaFieldData(this.props.schemaDetails, this.props.schemaType)}
-                </Grid>
+            </Grid>
         );
     }
 }

src/components/forms/ContactForm.js

@@ -130,7 +130,7 @@ class ContactForm extends React.Component {
             <Fragment>
                 <Typography variant="headline" align="center">
                 {<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}>
                     <Grid container className="contact-form">

src/components/list/ViewSightings.js

@@ -64,28 +64,10 @@ 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>
-                <Grid container>
+                <Grid container className='sighting-container'>
                     <Grid item xs={12} md={6} className='sighting-list'>
                         <Fragment>
                             <List>

src/css/App.css

@@ -2,6 +2,14 @@ body {
     margin: 0;
 }
 
+a {
+  text-decoration: none;
+}
+
+.sighting-google-map-container > div {
+  height: calc(100% - 64px) !important;
+}
+
 @media (min-width: 600px) {
     .sighting-google-map-container > div {
         width: calc(100% - 240px) !important;
@@ -9,15 +17,9 @@ body {
     }
 }
 
-@media (min-width: 960px) {
-    .report-google-map-container > div {
-        width: calc(100% - 50% - 120px) !important;
-    }
-}
-
 #disqus_thread {
     width: 89% !important;
-    margin: 0 auto;
+    margin: 0 auto 0 auto;
 }
 
 #disqus_thread a,
@@ -30,18 +32,42 @@ body {
 .sighting-list {
     height: calc(50vh - 64px);
     overflow-y: scroll;
+
 }
 
 @media (min-width: 960px) {
+
+    .sighting-container {
+        height: calc(100vh - 64px);
+    }
+
     .sighting-list {
         height: calc(100vh - 64px);
         overflow-y: scroll;
     }
+
+    .sighting-details {
+        height: calc(100vh - 64px);
+        overflow-y: scroll;
+    }
+
+    .report-google-map-container > div {
+      height: calc(100% - 64px) !important;
+      width: calc(100% - 50% - 120px) !important;
+    }
+
+    .sighting-detail-google-map-container > div {
+      height: 300px !important;
+    }
+
+    .sighting-detail-google-map-container {
+      position: relative;
+    }
 }
 
 .sighting-details-content {
     width: 89%;
-    margin: 330px auto 0 auto;
+    margin: 320px auto 0 auto;
 }
 
 .sighting-detail-google-map-container > div {
@@ -53,10 +79,3 @@ body {
     max-width: 100%;
     overflow: hidden;
 }
-
-@media (min-width: 960px) {
-    .sighting-detail-google-map-container > div {
-        width: calc(100% - 50% - 120px) !important;
-        height: 300px !important;
-    }
-}

src/index.js

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

src/pages/About.js

@@ -1,43 +1,89 @@
 import React, { Component, Fragment } from 'react';
 import FlameLinkComponentCreations from '../components/flamelink/FlameLinkComponentCreations';
 import flamelinkApp from '../utilities/flamelink.js';
+import PropTypes from 'prop-types';
+import { Typography } from '@material-ui/core';
+import { withStyles } from '@material-ui/core/styles';
+
+const styles = theme => ({
+    header: {
+        paddingRight: 20,
+        paddingLeft: 20,
+        paddingTop: 20,
+    },
+});
 
 class About extends Component {
-    constructor() {
+    state = {
-        super();
+        summarySchemaName: 'martenAboutSummary',
-
+        researcherSchemaName: 'martenAbout',
-        global.schemaName = 'martenAbout';
+        developerSchemaName: 'martenAboutDevelopers',
-
+        summarySchemaDetails: '',
-        this.state = {
+        summarySchemaType: '',
-          schemaDetails: '',
+        researcherSchemaDetails: '',
-          schemaType: '',
+        researcherSchemaType: '',
-        }
+        developerSchemaDetails: '',
-
+        developerSchemaType: ''
-        flamelinkApp.schemas.getFields(global.schemaName, { fields: [ 'title', 'key', 'type', 'gridColumns', 'description', 'options' ] })
-        .then(result => this.setState({
-          schemaDetails: result
-        }))
-        
-        flamelinkApp.schemas.get(global.schemaName)
-        .then(result => this.setState({
-          schemaType: result.type
-        }))
     }
 
     componentDidMount() {
         document.title = 'Marten Tracker | About';
+
+
+        // Pulling in schema details for summary
+        flamelinkApp.schemas.getFields(this.state.summarySchemaName, { fields: ['title', 'key', 'type', 'gridColumns', 'description', 'options'] })
+            .then(result => this.setState({
+                summarySchemaDetails: result
+            }))
+
+        flamelinkApp.schemas.get(this.state.summarySchemaName)
+            .then(result => this.setState({
+                summarySchemaType: result.type
+            }))
+        
+        
+        // Pulling in schema details for researchers
+        flamelinkApp.schemas.getFields(this.state.researcherSchemaName, { fields: ['title', 'key', 'type', 'gridColumns', 'description', 'options'] })
+            .then(result => this.setState({
+                researcherSchemaDetails: result
+            }))
+
+        flamelinkApp.schemas.get(this.state.researcherSchemaName)
+            .then(result => this.setState({
+                researcherSchemaType: result.type
+            }))
+
+
+        // Pulling in schema details for developers
+        flamelinkApp.schemas.getFields(this.state.developerSchemaName, { fields: ['title', 'key', 'type', 'gridColumns', 'description', 'options'] })
+            .then(result => this.setState({
+                developerSchemaDetails: result
+            }))
+
+        flamelinkApp.schemas.get(this.state.developerSchemaName)
+            .then(result => this.setState({
+                developerSchemaType: result.type
+            }))
     }
 
     render() {
+        const { classes } = this.props;
 
         return (
-            <div>
+            <Fragment>
-                <Fragment>
+                <Typography variant="display1" className={classes.header}>Introduction</Typography>
-                    <FlameLinkComponentCreations schemaDetails = {this.state.schemaDetails} schemaType = {this.state.schemaType}/>
+                <FlameLinkComponentCreations schemaDetails={this.state.summarySchemaDetails} schemaType={this.state.summarySchemaType} schemaName={this.state.summarySchemaName} />
-                </Fragment>
+                <Typography variant="display1" className={classes.header}>Researchers</Typography>
-            </div>
+                <FlameLinkComponentCreations schemaDetails={this.state.researcherSchemaDetails} schemaType={this.state.researcherSchemaType} schemaName={this.state.researcherSchemaName} />
+                <Typography variant="display1" className={classes.header}>Developers</Typography>
+                <FlameLinkComponentCreations schemaDetails={this.state.developerSchemaDetails} schemaType={this.state.developerSchemaType} schemaName={this.state.developerSchemaName} />
+            </Fragment>
         );
     }
 }
 
-export default About;
+About.propTypes = {
+    classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(About);

src/pages/QuizPage.js

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

src/quiz/advancedQuiz.js

@@ -111,7 +111,7 @@ const advancedQuiz = {
                 "Eastern gray squirrel",
                 "Red squirrel"
             ],
-            "correctAnswer": "1"
+            "correctAnswer": "3"
         },
         {
             "question": <Fragment>What animal is this?<br /><br /><img src="/quiz-images/advanced/question11.jpg" alt=""></img></Fragment>,

src/quiz/intermediateQuiz.js

@@ -100,7 +100,7 @@ const intermediateQuiz = {
                 "Common Grackle",
                 "Common Raven"
             ],
-            "correctAnswer": "1"
+            "correctAnswer": "4"
         },
         {
             "question": <Fragment>What animal is this?<br /><br /><img src="/quiz-images/intermediate/question10.jpg" alt=""></img></Fragment>,