Merge pull request #34 from alDuncanson/feature/nav-bar

Feature/nav bar

.gitignore

@@ -1,2 +1,3 @@
 node_modules/
 .vscode/
+.netlify

package-lock.json

@@ -392,6 +392,30 @@
         "warning": "^4.0.1"
       }
     },
+    "@material-ui/icons": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-3.0.1.tgz",
+      "integrity": "sha512-1kNcxYiIT1x8iDPEAlgmKrfRTIV8UyK6fLVcZ9kMHIKGWft9I451V5mvSrbCjbf7MX1TbLWzZjph0aVCRf9MqQ==",
+      "requires": {
+        "@babel/runtime": "7.0.0",
+        "recompose": "^0.29.0"
+      },
+      "dependencies": {
+        "recompose": {
+          "version": "0.29.0",
+          "resolved": "https://registry.npmjs.org/recompose/-/recompose-0.29.0.tgz",
+          "integrity": "sha512-J/qLXNU4W+AeHCDR70ajW8eMd1uroqZaECTj6qqDLPMILz3y0EzpYlvrnxKB9DnqcngWrtGwjXY9JeXaW9kS1A==",
+          "requires": {
+            "@babel/runtime": "^7.0.0",
+            "change-emitter": "^0.1.2",
+            "fbjs": "^0.8.1",
+            "hoist-non-react-statics": "^2.3.1",
+            "react-lifecycles-compat": "^3.0.2",
+            "symbol-observable": "^1.0.4"
+          }
+        }
+      }
+    },
     "@mrmlnc/readdir-enhanced": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",
@@ -6076,8 +6100,7 @@
         },
         "ansi-regex": {
           "version": "2.1.1",
-          "bundled": true,
+          "bundled": true
-          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -6429,8 +6452,7 @@
         },
         "safe-buffer": {
           "version": "5.1.1",
-          "bundled": true,
+          "bundled": true
-          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -6477,7 +6499,6 @@
         "strip-ansi": {
           "version": "3.0.1",
           "bundled": true,
-          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -6516,13 +6537,11 @@
         },
         "wrappy": {
           "version": "1.0.2",
-          "bundled": true,
+          "bundled": true
-          "optional": true
         },
         "yallist": {
           "version": "3.0.2",
-          "bundled": true,
+          "bundled": true
-          "optional": true
         }
       }
     },
@@ -11871,6 +11890,11 @@
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
       "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
     },
+    "react-quiz-component": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/react-quiz-component/-/react-quiz-component-0.2.0.tgz",
+      "integrity": "sha512-oWUos0A4NtYNBNoSqAbjjpZC9ndEuw5SebYRDhX2EUv4I41iqWWVNMbY2Pu7qT6I7MuELfWHrpV+5p0XwaChaQ=="
+    },
     "react-router": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-4.3.1.tgz",

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@material-ui/core": "^3.1.0",
+    "@material-ui/icons": "^3.0.1",
     "firebase": "^5.5.2",
     "firebase-admin": "^6.0.0",
     "flamelink": "^0.19.2",

src/App.css

@@ -2,11 +2,15 @@ body {
     margin: 0;
 }
 
-.report-google-map-container > div {
+@media (min-width: 600px) {
-    height: 92% !important;
+    .sighting-google-map-container > div {
-    width: 50% !important;
+        width: calc(100% - 240px) !important;
+        height: calc(100% - 64px) !important;
+    }
 }
 
-.sighting-google-map-container > div {
+@media (min-width: 960px) {
-    height: 92% !important;
+    .report-google-map-container > div {
+        width: calc(100% - 50% - 120px) !important;
+    }
 }

src/components/Main.js

@@ -1,75 +1,209 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
+import Drawer from '@material-ui/core/Drawer';
 import AppBar from '@material-ui/core/AppBar';
-import Tabs from '@material-ui/core/Tabs';
+import Toolbar from '@material-ui/core/Toolbar';
-import Tab from '@material-ui/core/Tab';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemText from '@material-ui/core/ListItemText';
 import Typography from '@material-ui/core/Typography';
+import IconButton from '@material-ui/core/IconButton';
+import Hidden from '@material-ui/core/Hidden';
+import Divider from '@material-ui/core/Divider';
+import MenuIcon from '@material-ui/icons/Menu';
+import HomeIcon from '@material-ui/icons/Home';
+import AssignmentIcon from '@material-ui/icons/Assignment';
+import MapIcon from '@material-ui/icons/Map';
+import ListIcon from '@material-ui/icons/List';
+import SlideshowIcon from '@material-ui/icons/Slideshow';
 import Home from '../pages/Home';
 import ViewMap from '../pages/ViewMap';
-import QuizPage from '../pages/QuizPage';
+import Quiz from '../pages/QuizPage';
 import SightingList from '../pages/SightingList';
 import Report from '../pages/Report';
-import Info from '../pages/Info';
+import CssBaseline from '@material-ui/core/CssBaseline';
+import ExpandLess from '@material-ui/icons/ExpandLess';
+import ExpandMore from '@material-ui/icons/ExpandMore';
+import Collapse from '@material-ui/core/Collapse';
 
-function TabContainer(props) {
+const drawerWidth = 240;
-    return (
-        <Typography component="div" style={{ padding: 8 * 3 }}>
-            {props.children}
-        </Typography>
-    );
-}
-
-TabContainer.propTypes = {
-    children: PropTypes.node.isRequired,
-};
 
 const styles = theme => ({
     root: {
+        display: 'flex',
+    },
+    drawer: {
+        [theme.breakpoints.up('sm')]: {
+            width: drawerWidth,
+            flexShrink: 0,
+        },
+    },
+    nested: {
+        paddingLeft: theme.spacing.unit * 4,
+    },
+    appBar: {
+        marginLeft: drawerWidth,
+        [theme.breakpoints.up('sm')]: {
+            width: `calc(100% - ${drawerWidth}px)`,
+        },
+    },
+    menuButton: {
+        marginRight: 20,
+        [theme.breakpoints.up('sm')]: {
+            display: 'none',
+        },
+    },
+    toolbar: theme.mixins.toolbar,
+    drawerPaper: {
+        width: drawerWidth,
+    },
+    content: {
         flexGrow: 1,
-        backgroundColor: theme.palette.background.paper,
+        width: '60%'
     },
 });
 
-class SimpleTabs extends React.Component {
+class ResponsiveDrawer extends React.Component {
     state = {
-        value: 0,
+        mobileOpen: false,
+        key: '',
+        open: false
     };
 
-    handleChange = (event, value) => {
+    handleDrawerToggle = () => {
-        this.setState({ value });
+        this.setState(state => ({ mobileOpen: !state.mobileOpen }));
-    };
+    }
+
+    handleClick = () => {
+        this.setState(state => ({ open: !state.open }));
+    }
+
+    nav = (text) => {
+        this.setState({
+            key: text
+        })
+    }
 
     render() {
-        const { classes } = this.props;
+        const { classes, theme } = this.props;
-        const { value } = this.state;
+
+        const drawer = (
+            <div>
+                <div className={classes.toolbar} />
+                <Divider />
+                <List>
+                    <ListItem button key='Home' onClick={() => this.nav('Home')}>
+                        <ListItemIcon><HomeIcon /></ListItemIcon>
+                        <ListItemText primary='Home' />
+                    </ListItem>
+                    <ListItem button key='Report' onClick={() => this.nav('Report')}>
+                        <ListItemIcon><AssignmentIcon /></ListItemIcon>
+                        <ListItemText primary='Report' />
+                    </ListItem>
+                    <ListItem button key='Map' onClick={() => this.nav('Map')}>
+                        <ListItemIcon><MapIcon /></ListItemIcon>
+                        <ListItemText primary='Map' />
+                    </ListItem>
+                    <ListItem button key='List' onClick={() => this.nav('List')}>
+                        <ListItemIcon><ListIcon /></ListItemIcon>
+                        <ListItemText primary='List' />
+                    </ListItem>
+                    <ListItem button onClick={this.handleClick}>
+                        <ListItemIcon>
+                            <SlideshowIcon />
+                        </ListItemIcon>
+                        <ListItemText inset primary="Quiz" />
+                        {this.state.open ? <ExpandLess /> : <ExpandMore />}
+                    </ListItem>
+                    <Collapse in={this.state.open} timeout="auto" unmountOnExit>
+                        <List component="div" disablePadding>
+                            <ListItem button className={classes.nested} onClick={() => this.nav('Easy-Quiz')}>
+                                <ListItemText inset primary="Easy" />
+                            </ListItem>
+                            <ListItem button className={classes.nested} onClick={() => this.nav('Medium-Quiz')}>
+                                <ListItemText inset primary="Medium" />
+                            </ListItem>
+                            <ListItem button className={classes.nested} onClick={() => this.nav('Hard-Quiz')}>
+                                <ListItemText inset primary="Hard" />
+                            </ListItem>
+                        </List>
+                    </Collapse>
+                </List>
+                <Divider />
+            </div>
+        );
 
         return (
             <div className={classes.root}>
-                <AppBar position="static">
+                <CssBaseline />
-                    <Tabs value={value} onChange={this.handleChange} centered>
+                <AppBar position="fixed" className={classes.appBar}>
-                        <Tab label="Home" />
+                    <Toolbar>
-                        <Tab label="Report a Sighting" />
+                        <IconButton
-                        <Tab label="Sightings" />
+                            color="inherit"
-                        <Tab label="Trail-Cam Quiz" />
+                            aria-label="Open drawer"
-                        <Tab label="View Map" />
+                            onClick={this.handleDrawerToggle}
-                        <Tab label="Marten Info" />
+                            className={classes.menuButton}
-                    </Tabs>
+                        >
+                            <MenuIcon />
+                        </IconButton>
+                        <Typography variant="title" color="inherit" noWrap>
+                            The American Marten
+                        </Typography>
+                    </Toolbar>
                 </AppBar>
-                {value === 0 && <Home />}
+                <nav className={classes.drawer}>
-                {value === 1 && <Report />}
+                    <Hidden smUp implementation="css">
-                {value === 2 && <SightingList />}
+                        <Drawer
-                {value === 3 && <QuizPage />}
+                            container={this.props.container}
-                {value === 4 && <ViewMap />}
+                            variant="temporary"
-                {value === 5 && <Info />}
+                            anchor={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} />
+                    {this.state.key === 'Home' && <Home />}
+                    {this.state.key === 'Report' && <Report />}
+                    {this.state.key === 'Map' && <ViewMap />}
+                    {this.state.key === 'List' && <SightingList />}
+                    {this.state.key === 'Easy-Quiz' && <Quiz difficulty='Easy'/>}
+                    {this.state.key === 'Medium-Quiz' && <Quiz difficulty='Medium'/>}
+                    {this.state.key === 'Hard-Quiz' && <Quiz difficulty='Hard'/>}
+                </main>
             </div>
         );
     }
 }
 
-SimpleTabs.propTypes = {
+ResponsiveDrawer.propTypes = {
     classes: PropTypes.object.isRequired,
+    // Injected by the documentation to work in an iframe.
+    // You won't need it on your project.
+    container: PropTypes.object,
+    theme: PropTypes.object.isRequired,
 };
 
-export default withStyles(styles)(SimpleTabs);
+export default withStyles(styles, { withTheme: true })(ResponsiveDrawer);
-

src/components/QuizGame.js

@@ -2,10 +2,6 @@ import React, { Fragment } from 'react';
 import Grid from '@material-ui/core/Grid';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
-import Typography from '@material-ui/core/Typography';
-import AppBar from '@material-ui/core/AppBar';
-import Tabs from '@material-ui/core/Tabs';
-import Tab from '@material-ui/core/Tab';
 import Quiz from 'react-quiz-component';
 
 /**
@@ -23,18 +19,6 @@ function shuffleArray(array) {
     return array;
 }
 
-function TabContainer(props) {
-    return (
-        <Typography component="div" variant='headline' align='center' style={{ padding: 8 }}>
-            {props.children}
-        </Typography>
-    );
-}
-
-TabContainer.propTypes = {
-    children: PropTypes.node.isRequired,
-};
-
 // Style for the tabs.
 const styles = theme => ({
     root: {
@@ -44,18 +28,8 @@ const styles = theme => ({
 });
 
 class QuizGame extends React.Component {
-    // The state of the component.
-    state = {
-        value: 0,
-    };
 
-    // Handles tab changes.
+    easy = {
-    handleChange = (event, value) => {
-        this.setState({ value });
-    };
-
-    // Object that contains the easy quiz material.
-    easyQuiz = {
         "quizTitle": "Trail Cam Quiz: Easy",
         "questions": shuffleArray([
             {
@@ -114,37 +88,166 @@ class QuizGame extends React.Component {
                 "correctAnswer": "3"
             },
         ])
-    };
+    }
+
+    medium = {
+        "quizTitle": "Trail Cam Quiz: Medium",
+        "questions": shuffleArray([
+            {
+                "question": <Fragment>What animal is this?<br /><br /><img src="/quizimages/question1.jpg" alt=""></img></Fragment>,
+                "questionType": "text",
+                "answers": [
+                    "Black bear",
+                    "Common wombat",
+                    "Raccoon",
+                    "White-tailed deer"
+                ],
+                "correctAnswer": "1"
+            },
+            {
+                "question": <Fragment>What animal is this?<br /><br /><img src="/quizimages/question2.jpg" alt=""></img></Fragment>,
+                "questionType": "text",
+                "answers": [
+                    "American beaver",
+                    "Muskrat",
+                    "Porcupine",
+                    "Woodchuck"
+                ],
+                "correctAnswer": "3"
+            },
+            {
+                "question": <Fragment>What animal is this?<br /><br /><img src="/quizimages/question3.jpg" alt=""></img></Fragment>,
+                "questionType": "text",
+                "answers": [
+                    "American badger",
+                    "Raccoon",
+                    "Striped skunk",
+                    "Virginia opossum"
+                ],
+                "correctAnswer": "2"
+            },
+            {
+                "question": <Fragment>What animal is this?<br /><br /><img src="/quizimages/question4.jpg" alt=""></img></Fragment>,
+                "questionType": "text",
+                "answers": [
+                    "Eastern fox squirrel",
+                    "Eastern gray squirrel",
+                    "Red squirrel",
+                    "Southern flying squirrel"
+                ],
+                "correctAnswer": "3"
+            },
+            {
+                "question": <Fragment>What animal is this?<br /><br /><img src="/quizimages/question5.jpg" alt=""></img></Fragment>,
+                "questionType": "text",
+                "answers": [
+                    "American Crow",
+                    "Black Vulture",
+                    "Turkey Vulture",
+                    "Northern Raven"
+                ],
+                "correctAnswer": "3"
+            },
+        ])
+    }
+
+    hard = {
+        "quizTitle": "Trail Cam Quiz: Hard",
+        "questions": shuffleArray([
+            {
+                "question": <Fragment>What animal is this?<br /><br /><img src="/quizimages/question1.jpg" alt=""></img></Fragment>,
+                "questionType": "text",
+                "answers": [
+                    "Black bear",
+                    "Common wombat",
+                    "Raccoon",
+                    "White-tailed deer"
+                ],
+                "correctAnswer": "1"
+            },
+            {
+                "question": <Fragment>What animal is this?<br /><br /><img src="/quizimages/question2.jpg" alt=""></img></Fragment>,
+                "questionType": "text",
+                "answers": [
+                    "American beaver",
+                    "Muskrat",
+                    "Porcupine",
+                    "Woodchuck"
+                ],
+                "correctAnswer": "3"
+            },
+            {
+                "question": <Fragment>What animal is this?<br /><br /><img src="/quizimages/question3.jpg" alt=""></img></Fragment>,
+                "questionType": "text",
+                "answers": [
+                    "American badger",
+                    "Raccoon",
+                    "Striped skunk",
+                    "Virginia opossum"
+                ],
+                "correctAnswer": "2"
+            },
+            {
+                "question": <Fragment>What animal is this?<br /><br /><img src="/quizimages/question4.jpg" alt=""></img></Fragment>,
+                "questionType": "text",
+                "answers": [
+                    "Eastern fox squirrel",
+                    "Eastern gray squirrel",
+                    "Red squirrel",
+                    "Southern flying squirrel"
+                ],
+                "correctAnswer": "3"
+            },
+            {
+                "question": <Fragment>What animal is this?<br /><br /><img src="/quizimages/question5.jpg" alt=""></img></Fragment>,
+                "questionType": "text",
+                "answers": [
+                    "American Crow",
+                    "Black Vulture",
+                    "Turkey Vulture",
+                    "Northern Raven"
+                ],
+                "correctAnswer": "3"
+            },
+        ])
+    }
+
+    pickDifficulty = difficulty => {
+        let level
+
+        switch (difficulty) {
+            case 'Easy':
+                level = this.easy
+                break
+            case 'Medium':
+                level = this.medium
+                break
+            case 'Hard':
+                level = this.hard
+                break
+            default:
+                break
+        }
+
+        return level
+    }
+
+    // The state of the component.
+    state = {
+        //difficulty: pickDifficulty(this.props.difficulty)
+        difficulty: this.pickDifficulty(this.props.difficulty)
+    }
 
     // Renders the quiz component.
     render() {
         const { classes } = this.props;
-        const { value } = this.state;
 
         return (
             // Tabs
             <div className={classes.root}>
-                <AppBar position="static">
-                    <Tabs
-                        value={value}
-                        centered
-                        fullWidth
-                        onChange={this.handleChange}
-                    >
-                        <Tab label="Easy" />
-                        <Tab label="Medium" />
-                        <Tab label="Hard" />
-                    </Tabs>
-                </AppBar>
-                {value === 0 && <TabContainer>
-                    <Fragment>
                 <Grid container justify="center">
-                            <Quiz quiz={this.easyQuiz} />
+                    <Quiz quiz={this.state.difficulty} />
                 </Grid>
-                    </Fragment>
-                </TabContainer>}
-                {value === 1 && <TabContainer>Medium Quiz</TabContainer>}
-                {value === 2 && <TabContainer>Hard Quiz</TabContainer>}
             </div>
         );
     }

src/components/ReportForm.js

@@ -16,7 +16,7 @@ import GoogleMap from '../components/ReportMap';
 const styles = theme => ({
   container: {
     display: 'flex',
-    flexWrap: 'wrap',
+    flexWrap: 'wrap'
   },
   textField: {
     marginLeft: theme.spacing.unit * 2,
@@ -292,7 +292,7 @@ class ReportForm extends React.Component {
       <Fragment>
         <form className={classes.container} autoComplete="off" onSubmit={this.handleSubmit}>
           <Grid container>
-            <Grid item xs={6}>
+            <Grid item xs={12} md={6}>
               <Grid container spacing={8}>
                 <Grid item xs={12}>
                   <TextField
@@ -435,7 +435,7 @@ class ReportForm extends React.Component {
                 </Grid>
               </Grid>
             </Grid>
-            <Grid item xs={6}>
+            <Grid item xs={12} md={6}>
               <GoogleMap onClick={this.getCoordinates} />
             </Grid>
           </Grid>

src/pages/QuizPage.js

@@ -5,7 +5,7 @@ import QuizGame from '../components/QuizGame';
 class QuizPage extends Component {
     render() {
         return (
-      <QuizGame />
+            <QuizGame difficulty={this.props.difficulty}/>
         );
     }
 }