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

package-lock.json

@@ -3961,6 +3961,11 @@
       "resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.0.4.tgz",
       "integrity": "sha512-ZIzRpLJrOj7jjP2miAtgqIfmzbxa4ZOr5jJc601zklsfEx9oTzmmj2nVpIPRpNlRTIh8lc1kyViIY7BWSGNmKw=="
     },
+    "detect-passive-events": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/detect-passive-events/-/detect-passive-events-1.0.4.tgz",
+      "integrity": "sha1-btR35uW863kHlzXc01d4nTf5qRo="
+    },
     "detect-port-alt": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/detect-port-alt/-/detect-port-alt-1.1.6.tgz",
@@ -4246,6 +4251,11 @@
         "minimalistic-crypto-utils": "^1.0.0"
       }
     },
+    "emailjs-com": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/emailjs-com/-/emailjs-com-2.3.2.tgz",
+      "integrity": "sha512-dI6vjLGHDNTOOY0vNx6HZm95ey1aKCtkdOPLC2UYkCgV8QSJCuMY/JlxjXD3BXOvu4X4qn+XCN3DTUz1OiewAg=="
+    },
     "emoji-regex": {
       "version": "6.5.1",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-6.5.1.tgz",
@@ -5651,7 +5661,7 @@
         },
         "core-js": {
           "version": "2.5.5",
-          "resolved": "http://registry.npmjs.org/core-js/-/core-js-2.5.5.tgz",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.5.5.tgz",
           "integrity": "sha1-sU3ek2xkDAV5prUMq8wTLdYSfjs="
         },
         "firebase": {
@@ -9686,6 +9696,11 @@
         "lodash._reinterpolate": "~3.0.0"
       }
     },
+    "lodash.throttle": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
+      "integrity": "sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ="
+    },
     "lodash.uniq": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
@@ -12550,6 +12565,18 @@
       "resolved": "https://registry.npmjs.org/react-flow-types/-/react-flow-types-0.2.0-beta.6.tgz",
       "integrity": "sha512-I4f8oJFGxVJYrJLxG4sCPW7vWedNB8Eee1U2v+xBzRPlF7X5IBelqaDIKxBDLzDFb++AzpoU+uu1jFaKy1QssQ=="
     },
+    "react-image-gallery": {
+      "version": "0.8.12",
+      "resolved": "https://registry.npmjs.org/react-image-gallery/-/react-image-gallery-0.8.12.tgz",
+      "integrity": "sha512-jkrsEhRZ3JPxFhLznrwPyAVy/n6HiM204tKBJ1W5z1a8QnWLVVi+j/UXsMETvks4rnSIkAQbW3WPHbrS19nNMQ==",
+      "requires": {
+        "lodash.debounce": "^4.0.8",
+        "lodash.throttle": "^4.1.1",
+        "prop-types": "^15.5.8",
+        "react-swipeable": "^4.2.2",
+        "resize-observer-polyfill": "^1.5.0"
+      }
+    },
     "react-jss": {
       "version": "8.6.1",
       "resolved": "https://registry.npmjs.org/react-jss/-/react-jss-8.6.1.tgz",
@@ -12695,6 +12722,15 @@
         }
       }
     },
+    "react-swipeable": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/react-swipeable/-/react-swipeable-4.3.0.tgz",
+      "integrity": "sha512-L21VMbcDvG+AOVF4ZIbQ8sICGIgiKB/plGKWBMw6dkxt5neS7x74ZlTbJ39U8slz798MZBv/uIoE9Vzgp3PODQ==",
+      "requires": {
+        "detect-passive-events": "^1.0.4",
+        "prop-types": "^15.5.8"
+      }
+    },
     "react-transition-group": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.4.0.tgz",
@@ -13277,6 +13313,11 @@
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
       "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8="
     },
+    "resize-observer-polyfill": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.0.tgz",
+      "integrity": "sha512-M2AelyJDVR/oLnToJLtuDJRBBWUGUvvGigj1411hXhAdyFWqMaqHp7TixW3FpiLuVaikIcR1QL+zqoJoZlOgpg=="
+    },
     "resolve": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.6.0.tgz",

package.json

@@ -7,6 +7,7 @@
     "@material-ui/icons": "^3.0.1",
     "ajv": "^6.0.0",
     "disqus-react": "^1.0.5",
+    "emailjs-com": "^2.3.2",
     "firebase": "^5.5.2",
     "firebase-admin": "^6.1.0",
     "flamelink": "^0.19.6",
@@ -17,6 +18,7 @@
     "moment": "^2.22.2",
     "react": "^16.5.1",
     "react-dom": "^16.5.1",
+    "react-image-gallery": "^0.8.12",
     "react-quiz-component": "0.2.0",
     "react-router": "^4.3.1",
     "react-router-dom": "^4.3.1",

readme.md

@@ -1,25 +1,28 @@
 # Marten Application
 ### Background
-Given some recent research into the American marten, there is a need for a web application that is able to document marten sightings. Graduate research has produced a model that predicts habitat suitability for the northern Lower Peninsula, but a lack of anything besides anecdotal evidence makes testing the model difficult. This application would allow for "citizen science". This is the outsourcing of research efforts to the public. This would allow people to log marten sightings for research purposes. The project will be a web platform and certain groups including hunters, hunting club members, wildlife managers and state park personnel will be targeted for citizen science. This application will hopefully help bolster research efforts for the American marten.
+Given recent research into the American marten, there was a need for a web application that is able to document marten sightings. Graduate research has produced a model that predicts habitat suitability for the northern Lower Peninsula, but a lack of anything besides anecdotal evidence makes testing the model difficult. This application allows for "citizen science". This is the outsourcing of research efforts to the public. This would allow people to log marten sightings for research purposes. The project is a public web application and certain groups including hunters, hunting club members, wildlife managers and state park personnel will be targeted for citizen science. This application will hopefully help bolster research efforts for the American marten.
 
-The application will allow for users to post marten sightings. They can attach photos and make comments on said photos. They also can include the location where the sighting occurred and rank their confidence in the sighting. This will all be stored in some type of database that can be queried for research purposes. We also will integrate a map API to allow for users to see where marten sightings have occurred.
+The application allows for users to post marten sightings. They can attach photos and make comments on said photos using Disqus. They also can include the location where the sighting occurred and rank their confidence in the sighting. This is all stored in Google Firebase. We additionally utilize Google Maps, which allows for users to see where marten sightings have occurred. A trail-cam quiz with multiple difficulty settings incentivizes participation in the application. There is also information concerning martens and photo galleries with pictures of them built using the Flamelink CMS.
 
 ### URL
 
-[Marten Tracker](https://marten-application.netlify.com/ "Click here to see the application in action.")
+[Marten Tracker](https://marten-tracker.netlify.com/ "Click here to see the application in action.")
 
-### Intended Features
+### Features
 * Ability to log marten sightings.
-* Include type of sighting on marten sighting post.
+* Metadata on marten sighting posts.
-* Attach photos to marten sighting post.
 * A map per sighting post for location of marten sighting.
-* Map for all marten sighting posts.
+* State-wide map for all marten sighting posts.
-* Comments on photos.
+* Disqus threads on marten sighting posts.
 * Quiz game for learning more about martens.
+* Information section on martens.
+* Photo galleries of martens.
 
 ### Technologies
 * ReactJS
 * Firebase
+* Material-UI
 * Google API
 * Netlify
 * Flamelink CMS
+* EmailJS

src/App.css

@@ -42,6 +42,11 @@ body {
     height: 300px !important;
 }
 
+.contact-form {
+    max-width: 100%;
+    overflow: hidden;
+}
+
 @media (min-width: 960px) {
     .sighting-detail-google-map-container > div {
         width: calc(100% - 50% - 120px) !important;

src/components/ContactForm.js

@@ -0,0 +1,227 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import Grid from '@material-ui/core/Grid';
+import emailjs from '../emailjs.js'
+import { withStyles } from '@material-ui/core/styles';
+import TextField from '@material-ui/core/TextField';
+import CheckCircleIcon from '@material-ui/icons/CheckCircle';
+import Snackbar from '@material-ui/core/Snackbar';
+import IconButton from '@material-ui/core/IconButton';
+import CloseIcon from '@material-ui/icons/Close';
+import Button from '@material-ui/core/Button';
+import { Typography } from '@material-ui/core';
+
+/**
+ * Styles that the different
+ * Material UI components pull
+ * in. Mostly used for spacing.
+ */
+const styles = theme => ({
+    container: {
+        display: 'flex',
+        flexWrap: 'wrap'
+    },
+    textField: {
+        marginLeft: theme.spacing.unit,
+        marginRight: theme.spacing.unit,
+        marginTop: theme.spacing.unit,
+        flexBasis: 280,
+        width: '90%'
+    },
+    button: {
+        marginLeft: theme.spacing.unit,
+        marginRight: theme.spacing.unit,
+        marginTop: theme.spacing.unit,
+    },
+    close: {
+        padding: theme.spacing.unit / 2,
+    },
+    icon: {
+        fontSize: 20,
+        marginRight: theme.spacing.unit,
+    },
+    message: {
+        display: 'flex',
+        alignItems: 'center',
+    },
+    menu: {
+        width: 200,
+    },
+    paper: {
+        position: 'absolute',
+        width: theme.spacing.unit * 50,
+        backgroundColor: theme.palette.background.paper,
+        boxShadow: theme.shadows[5],
+        padding: theme.spacing.unit * 4,
+    }
+});
+
+/**
+ * The form component.
+ */
+class ContactForm extends React.Component {
+
+    /**
+     * State of form components.
+     */
+    state = {
+        name: "",
+        email: "",
+        comments: "",
+        open: false
+    };
+
+    /**
+     * Handles state change in form
+     * components.
+     */
+    handleChange = name => event => {
+        this.setState({
+            [name]: event.target.value,
+        });
+    };
+
+    /**
+     * Handles closing the toast.
+     */
+    handleClose = (event, reason) => {
+        if (reason === 'clickaway') {
+            return;
+        }
+
+        this.setState({ open: false });
+    };
+
+    /**
+     * Event listener for form.
+     * When the form is submitted,
+     * this function passes the
+     * data along to EmailJS.
+     */
+    handleSubmit = e => {
+        e.preventDefault();
+
+        const templateParams = {
+            from_name: this.state.name,
+            from_email: this.state.email,
+            message_html: this.state.comments
+        };
+
+        emailjs.send('default_service', 'template_XaKOJGSf', templateParams);
+
+        this.setState({
+            name: "",
+            email: "",
+            comments: "",
+            open: true
+        });
+    };
+
+    /**
+     * The render method for this component.
+     */
+    render() {
+        const { classes } = this.props;
+
+        /**
+         * The actual form.
+         */
+        return (
+            <Fragment>
+                <Typography variant="headline" align="center">
+                {<br/>}
+                Send us an email!
+
+                <form className={classes.container} autoComplete="off" onSubmit={this.handleSubmit}>
+                    <Grid container className="contact-form">
+                        <Grid item xs={12}>
+                            <Grid container spacing={8}>
+                                <Grid item xs={12}>
+                                    <TextField
+                                        id="name"
+                                        required
+                                        label="Name"
+                                        name="message-name"
+                                        placeholder="John Doe"
+                                        value={this.state.name}
+                                        className={classes.textField}
+                                        onChange={this.handleChange('name')}
+                                        margin="normal"
+                                        variant="outlined"
+                                    />
+                                    <TextField
+                                        id="email"
+                                        required
+                                        label="Email"
+                                        name="message-email"
+                                        type="email"
+                                        autoComplete="email"
+                                        placeholder="example@mail.com"
+                                        value={this.state.email}
+                                        className={classes.textField}
+                                        onChange={this.handleChange('email')}
+                                        margin="normal"
+                                        variant="outlined"
+                                    />
+                                    <TextField
+                                        id="comments"
+                                        required
+                                        label="Comments"
+                                        name="message-comments"
+                                        multiline
+                                        rows="5"
+                                        placeholder="The message you would like to send us."
+                                        value={this.state.comments}
+                                        className={classes.textField}
+                                        onChange={this.handleChange('comments')}
+                                        margin="normal"
+                                        variant="outlined"
+                                        InputLabelProps={{
+                                            shrink: true,
+                                        }}
+                                    />
+                                </Grid>
+                                <Grid item xs={12}>
+                                    <Button variant="contained" type="submit" color="primary" className={classes.button}>
+                                        Submit
+                                    </Button>
+                                </Grid>
+                            </Grid>
+                        </Grid>
+                    </Grid>
+                </form>
+                </Typography>
+                <Snackbar
+                    anchorOrigin={{
+                        vertical: 'bottom',
+                        horizontal: 'left',
+                    }}
+                    open={this.state.open}
+                    autoHideDuration={6000}
+                    onClose={this.handleClose}
+                    ContentProps={{
+                        'aria-describedby': 'message-id',
+                    }}
+                    message={<span id="message-id" className={classes.message}><CheckCircleIcon className={classes.icon} />Message sent.</span>}
+                    action={[
+                        <IconButton
+                            key="close"
+                            aria-label="Close"
+                            color="inherit"
+                            className={classes.close}
+                            onClick={this.handleClose}
+                        >
+                            <CloseIcon />
+                        </IconButton>,
+                    ]}
+                />
+            </Fragment>
+        );
+    }
+}
+
+ContactForm.propTypes = {
+    classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(ContactForm);

src/components/FlameLinkCollection.js

@@ -0,0 +1,47 @@
+import React, { Component} from 'react';
+import flamelinkApp from '../flamelink.js';
+import FlameLinkCollectionComponentCreations from './FlameLinkCollectionComponentCreations';
+
+class FlameLinkCollection extends Component {
+    constructor() {
+        super();
+        
+        global.mediaID = '';
+
+        this.state = {
+          schemaContent: '',
+        }
+
+        flamelinkApp.content.get(global.schemaName)
+        .then(result => this.setState({
+          schemaContent: result
+        }))
+      }
+
+    getCollectionContent(schemaData){
+        var arr2 = [];
+        var collectionInfo = [schemaData, this.state.schemaContent];
+        for (var val in this.state.schemaContent){
+            arr2.push(val);
+        }
+        return arr2.map(this.getCollectionComponentInfo, collectionInfo);
+    }
+
+    getCollectionComponentInfo(num){
+        var arr3 = [];
+        for (var val in this[0]){
+            arr3.push(val);
+        }
+        return <FlameLinkCollectionComponentCreations schemaData={this[0]} schemaContent={this[1][num]} arr={arr3} key={num} />
+    }
+
+    render() {
+        return(
+            <div>
+                {this.getCollectionContent(this.props.schemaData)}
+            </div>
+        );
+    }
+}
+
+export default FlameLinkCollection;

src/components/FlameLinkCollectionComponentCreations.js

@@ -0,0 +1,25 @@
+import React, { Component} from 'react';
+import Grid from '@material-ui/core/Grid';
+import FlameLinkCollectionStructure from './FlameLinkCollectionStructure';
+
+class FlameLinkCollectionComponentCreations extends Component {
+
+    createCollectionEntries(schemaData, schemaContent, arr){
+        var collectionInfo = [schemaData, schemaContent];
+        return arr.map(this.createCollectionComponents, collectionInfo);
+    }
+
+    createCollectionComponents(num){
+        return <FlameLinkCollectionStructure schemaData={this[0]} schemaContent={this[1]} field={this[0][num]} type={this[0][num].type} key={this[0][num].key} />
+    }
+
+    render() {
+        return(
+                <Grid container>
+                    {this.createCollectionEntries(this.props.schemaData, this.props.schemaContent, this.props.arr)}
+                </Grid>
+        );
+    }
+}
+
+export default FlameLinkCollectionComponentCreations;

src/components/FlameLinkCollectionGallery.js

@@ -0,0 +1,123 @@
+import React, { Component } from 'react';
+import Typography from '@material-ui/core/Typography';
+import Grid from '@material-ui/core/Grid';
+import { withStyles } from '@material-ui/core/styles';
+import RenderGallery from './RenderGallery';
+import flamelinkApp from '../flamelink.js';
+import FlameLinkCollectionGalleryContent from './FlameLinkCollectionGalleryContent';
+import "react-image-gallery/styles/css/image-gallery.css";
+import '../css/FlameLink.css';
+
+const styles = theme => ({
+    flamelinkItem: {
+        marginRight: 20,
+        marginLeft: 20,
+        marginTop: 20,
+    },
+
+    flamelinkGallery: {
+        marginRight: "auto",
+        marginLeft: "auto",
+    },
+
+    flamelinkGalleryContainer: {
+        backgroundColor: 'black',
+        marginTop: 20,
+    },
+});
+
+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);
+
+        this.state = {
+            schemaDetails: '',
+            schemaContent: '',
+            schemaDescription: '',
+        }
+
+        flamelinkApp.schemas.getFields(this.props.galleryName, { fields: ['title', 'key', 'type', 'gridColumns', 'description', 'options'] })
+            .then(result => this.setState({
+                schemaDetails: result
+            }))
+
+        flamelinkApp.content.get(this.props.galleryName)
+            .then(result => this.setState({
+                schemaContent: result
+            }))
+
+        if (this.props.showTitle === false) {
+        } else {
+            flamelinkApp.schemas.get(this.props.galleryName)
+                .then(result => this.setState({
+                    schemaDescription: result.title
+                }))
+        }
+
+        this.getPageTitle(this.props.galleryName);
+    }
+
+    getGalleryInfo(schemaDetails, schemaContent) {
+        var key;
+        var mediaNums = [];
+        var mediaIDs = [];
+
+        for (var val in schemaDetails) {
+            key = schemaDetails[val].key
+        }
+        for (var val1 in schemaContent) {
+            for (var val2 in schemaContent[val1][key]) {
+                mediaIDs.push(schemaContent[val1][key][val2]);
+            }
+        }
+        for (var val3 in mediaIDs) {
+            mediaNums.push(val3)
+        }
+
+        return mediaNums.map(this.createGallery, mediaIDs);
+    }
+
+    createGallery(num) {
+        if (num === '0') {
+            global.galleryImages = [];
+        }
+        return <FlameLinkCollectionGalleryContent mediaIDs={this} num={num} key={this[num]} />;
+    }
+
+    render() {
+        const { classes } = this.props;
+
+        return (
+            <Grid container>
+                {this.getGalleryInfo(this.state.schemaDetails, this.state.schemaContent)}
+                <Typography variant='display2' className={classes.flamelinkItem}>
+                    {this.state.schemaDescription}
+                </Typography>
+                <Grid container className={classes.flamelinkGalleryContainer}>
+                    <Grid item lg={8} md={8} sm={12} xs={12} className={classes.flamelinkGallery} >
+                        <RenderGallery key={Math.random()} />
+                    </Grid>
+                </Grid>
+            </Grid>
+        );
+    }
+}
+
+export default withStyles(styles)(FlameLinkCollectionGallery);

src/components/FlameLinkCollectionGalleryContent.js

@@ -0,0 +1,38 @@
+import { Component } from 'react';
+import flamelinkApp from '../flamelink.js';
+import '../css/FlameLink.css';
+
+class FlameLinkCollectionGalleryContent extends Component {
+    constructor(props) {
+        super(props);
+
+        global.galleryImages = [];
+
+        this.state = {
+            mediaURL: '',
+        }
+
+        flamelinkApp.storage.getURL(this.props.mediaIDs[this.props.num])
+            .then(url => this.setState({
+                mediaURL: url
+            }))
+    }
+
+    addURLs = () => {
+        if (this.state.mediaURL === '') {
+        } 
+        else {
+            var element = {}
+            element.original = this.state.mediaURL;
+            global.galleryImages.push(element);
+        }
+        
+        return null;
+    }
+
+    render() {
+        return this.addURLs();
+    }
+}
+
+export default FlameLinkCollectionGalleryContent;

src/components/FlameLinkCollectionStructure.js

@@ -0,0 +1,128 @@
+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';
+import flamelinkApp from '../flamelink.js';
+import FlameLinkImage from './FlameLinkImage';
+import FlameLinkFieldSet from './FlameLinkFieldSet';
+
+const styles = theme => ({
+        flamelinkItem: {
+            paddingRight: 20,
+            paddingLeft: 20,
+            paddingTop: 20,
+        },
+    });
+
+class FlameLinkCollectionStructure extends Component {
+    constructor() {
+        super();
+        
+        global.mediaID = '';
+
+        this.state = {
+          schemaContent: '',
+        }
+
+        flamelinkApp.content.get(global.schemaName)
+        .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'){
+                return  (
+                        <Typography variant='body2' component="p" id={key}>
+                            {content[key]}
+                        </Typography>
+                        )               
+            }
+            if (type === 'media'){
+                for (var val in content[key]){
+                    global.mediaID = content[key][val];
+                    return <FlameLinkImage/>
+                } 
+            }
+            if (type === 'fieldset'){
+                if(content === ''){
+                    return
+                }
+                else{
+                    return <FlameLinkFieldSet field={content[key]} field2={field.options}/>
+                }
+            }
+        console.log('Content: ', content)
+        console.log('Field: ', field)
+        console.log('Key: ', key)
+        console.log('Type: ', type)
+        console.log('Description: ', description)
+    }
+
+    render() {
+        const { classes } = this.props;
+
+        const lg = this.props.field.gridColumns.lg;
+        const md = this.props.field.gridColumns.md;
+        const sm = this.props.field.gridColumns.sm;
+        const xs = this.props.field.gridColumns.xs;
+        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)}
+            </Grid>
+        );
+    }
+}
+
+export default withStyles(styles)(FlameLinkCollectionStructure);

src/components/FlameLinkComponentCreations.js

@@ -1,25 +1,39 @@
 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){
+    getSchemaFieldData(schemaData, schemaType){
         var arr = [];
         for (var val in schemaData){
             arr.push(val);
         }
-        return arr.map(this.createComponents, schemaData);
+
+        if(schemaType === 'single'){
+            return arr.map(this.createSingleTypeSchemaComponents, schemaData);
+        }
+        if(schemaType === 'collection'){
+            return this.createCollectionTypeSchemaComponents(schemaData);
+        }
+        else{
+            return
+        }
     }
 
-    createComponents(num){
+    createSingleTypeSchemaComponents(num){
         return <FlameLinkStructure schemaData={this} field={this[num]} type={this[num].type} key={this[num].key} />
     }
 
+    createCollectionTypeSchemaComponents(schemaData){  
+        return <FlameLinkCollection schemaData={schemaData} />
+    }
+
     render() {
         return(
                 <Grid container>
-                    {this.getSchemaFieldData(this.props.schemaDetails)}
+                    {this.getSchemaFieldData(this.props.schemaDetails, this.props.schemaType)}
                 </Grid>
         );
     }

src/components/FlameLinkImage.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import Typography from '@material-ui/core/Typography';
 import flamelinkApp from '../flamelink.js';
-import '../css/FlameLinkImage.css';
+import '../css/FlameLink.css';
 
 class FlameLinkImage extends Component {
     constructor() {

src/components/Main.js

@@ -14,6 +14,8 @@ 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 EmailIcon from '@material-ui/icons/Email';
+import PhotoLibraryIcon from '@material-ui/icons/PhotoLibrary';
 import AssignmentIcon from '@material-ui/icons/Assignment';
 import MapIcon from '@material-ui/icons/Map';
 import InfoIcon from '@material-ui/icons/Info';
@@ -23,12 +25,14 @@ import Home from '../pages/Home';
 import ViewMap from '../pages/ViewMap';
 import About from '../pages/About';
 import Quiz from '../pages/QuizPage';
+import Contact from '../pages/Contact';
 import SightingList from '../pages/SightingList';
 import Report from '../pages/Report';
 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';
+import FlameLinkCollectionGallery from '../components/FlameLinkCollectionGallery';
 
 const drawerWidth = 240;
 
@@ -71,7 +75,8 @@ class ResponsiveDrawer extends React.Component {
     state = {
         mobileOpen: false,
         key: 'Home',
-        open: false
+        open: false,
+        open2: false,
     };
 
     handleDrawerToggle = () => {
@@ -82,6 +87,10 @@ class ResponsiveDrawer extends React.Component {
         this.setState(state => ({ open: !state.open }));
     }
 
+    handleClick2 = () => {
+        this.setState(state => ({ open2: !state.open2 }));
+    }
+
     nav = (text) => {
         this.setState({
             key: text
@@ -112,10 +121,6 @@ class ResponsiveDrawer extends React.Component {
                         <ListItemIcon><ListIcon /></ListItemIcon>
                         <ListItemText primary='List' />
                     </ListItem>
-                    <ListItem button key='About' onClick={() => this.nav('About')}>
-                        <ListItemIcon><InfoIcon /></ListItemIcon>
-                        <ListItemText primary='About' />
-                    </ListItem>
                     <ListItem button onClick={this.handleClick}>
                         <ListItemIcon>
                             <SlideshowIcon />
@@ -136,6 +141,37 @@ class ResponsiveDrawer extends React.Component {
                             </ListItem>
                         </List>
                     </Collapse>
+                    <ListItem button key='Contact' onClick={() => this.nav('Contact')}>
+                        <ListItemIcon><EmailIcon /></ListItemIcon>
+                        <ListItemText primary='Contact' />
+                    </ListItem>
+                    <ListItem button key='About' onClick={() => this.nav('About')}>
+                        <ListItemIcon><InfoIcon /></ListItemIcon>
+                        <ListItemText primary='About' />
+                    </ListItem>
+                    <ListItem button onClick={this.handleClick2}>
+                        <ListItemIcon>
+                            <PhotoLibraryIcon />
+                        </ListItemIcon>
+                        <ListItemText inset primary="Galleries" />
+                        {this.state.open2 ? <ExpandLess /> : <ExpandMore />}
+                    </ListItem>
+                    <Collapse in={this.state.open2} timeout="auto" unmountOnExit>
+                        <List component="div" disablePadding>
+                            <ListItem button className={classes.nested} onClick={() => this.nav('Gallery1')}>
+                                <ListItemText inset primary="Martens and Kits" />
+                            </ListItem>
+                            <ListItem button className={classes.nested} onClick={() => this.nav('Gallery2')}>
+                                <ListItemText inset primary="Martens at Night" />
+                            </ListItem>
+                            <ListItem button className={classes.nested} onClick={() => this.nav('Gallery3')}>
+                                <ListItemText inset primary="Martens Being Martens" />
+                            </ListItem>
+                            <ListItem button className={classes.nested} onClick={() => this.nav('Gallery4')}>
+                                <ListItemText inset primary="Species Similar to Martens" />
+                            </ListItem>
+                        </List>
+                    </Collapse>
                 </List>
                 <Divider />
             </div>
@@ -196,9 +232,14 @@ class ResponsiveDrawer extends React.Component {
                     {this.state.key === 'Map' && <ViewMap />}
                     {this.state.key === 'List' && <SightingList />}
                     {this.state.key === 'About' && <About />}
+                    {this.state.key === 'Contact' && <Contact />}
                     {this.state.key === 'Easy-Quiz' && <Quiz difficulty='Easy'/>}
                     {this.state.key === 'Intermediate-Quiz' && <Quiz difficulty='Intermediate'/>}
                     {this.state.key === 'Advanced-Quiz' && <Quiz difficulty='Advanced'/>}
+                    {this.state.key === 'Gallery1' && <FlameLinkCollectionGallery galleryName={'martensAndKits'}/>}
+                    {this.state.key === 'Gallery2' && <FlameLinkCollectionGallery galleryName={'martensAtNight'}/>}
+                    {this.state.key === 'Gallery3' && <FlameLinkCollectionGallery galleryName={'martensBeingMartens'}/>}
+                    {this.state.key === 'Gallery4' && <FlameLinkCollectionGallery galleryName={'similarSpecies'}/>}
                 </main>
             </div>
         );

src/components/RenderGallery.js

@@ -0,0 +1,39 @@
+import React, { Component } from 'react';
+import ImageGallery from 'react-image-gallery';
+import "react-image-gallery/styles/css/image-gallery.css";
+import '../css/FlameLink.css';
+
+class RenderGallery extends Component {
+    constructor() {
+        super();
+
+        this.state = {
+            showThumbnails: false,
+            showIndex: true,
+            showBullets: true,
+            mounted: false,
+        }
+    }
+
+    componentDidMount() {
+        this.setState({ mounted: true })
+    }
+
+    _onImageLoad = event => {
+        console.debug('loaded image', event.target.src);
+    }
+
+    render() {
+        return (
+            <ImageGallery
+                items={global.galleryImages}
+                showThumbnails={this.state.showThumbnails}
+                showIndex={this.state.showIndex}
+                showBullets={this.state.showBullets}
+                onImageLoad={this._onImageLoad}
+            />
+        );
+    }
+}
+
+export default RenderGallery;

src/components/SightingMap.js

@@ -272,9 +272,8 @@ export class MapContainer extends Component {
                     initialCenter={this.state.myLatLng}
                     center={this.state.myLatLng}
                     minZoom={6}
-                    zoom={6}
+                    zoom={7}
                     onClick={this.onMapClick}
-                    defaultZoom={15}
                 >
                     <Marker
                         position={this.state.myLatLng}

src/emailjs.js

@@ -0,0 +1,5 @@
+import * as emailjs from 'emailjs-com'
+
+emailjs.init("user_4d5R86dmu6vgeJP4euxSA");
+
+export default emailjs;

src/pages/About.js

@@ -6,16 +6,26 @@ class About extends Component {
     constructor() {
         super();
 
-        global.schemaName = 'martenSchemaDemo';
+        global.schemaName = 'martenAbout';
 
         this.state = {
           schemaDetails: '',
+          schemaType: '',
         }
 
         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';
     }
 
     render() {
@@ -23,9 +33,8 @@ class About extends Component {
         return (
             <div>
                 <Fragment>
-                    <FlameLinkComponentCreations schemaDetails = {this.state.schemaDetails}/>
+                    <FlameLinkComponentCreations schemaDetails = {this.state.schemaDetails} schemaType = {this.state.schemaType}/>
                 </Fragment>
-          
             </div>
         );
     }

src/pages/Contact.js

@@ -0,0 +1,14 @@
+import React, { Component } from 'react';
+import ContactForm from '../components/ContactForm.js'
+
+class Contact extends Component {
+    componentDidMount() {
+        document.title = 'Marten Tracker | Contact';
+    }
+
+    render() {
+        return <ContactForm />;
+    }
+}
+
+export default Contact;

src/pages/Home.js

@@ -1,6 +1,8 @@
 import React, { Component } from 'react';
 import FlameLinkComponentCreations from '../components/FlameLinkComponentCreations';
+import FlameLinkCollectionGallery from '../components/FlameLinkCollectionGallery';
 import flamelinkApp from '../flamelink';
+import Grid from '@material-ui/core/Grid';
 
 class Home extends Component {
     constructor() {
@@ -10,12 +12,18 @@ class Home extends Component {
 
         this.state = {
             schemaDetails: '',
+            schemaType: '',
         }
 
         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() {
@@ -24,7 +32,10 @@ class Home extends Component {
 
     render() {
         return (
-            <FlameLinkComponentCreations schemaDetails={this.state.schemaDetails} />
+            <Grid container>
+                <FlameLinkCollectionGallery galleryName={'martenHomeGallery'} showTitle={false}/>
+                <FlameLinkComponentCreations schemaDetails={this.state.schemaDetails} schemaType = {this.state.schemaType}/>
+            </Grid>
         );
     }
 }