fixed merge conflicts

package.json

@@ -5,11 +5,15 @@
   "dependencies": {
     "@material-ui/core": "^3.1.0",
     "@material-ui/icons": "^3.0.1",
+    "ajv": "^6.0.0",
     "disqus-react": "^1.0.5",
     "firebase": "^5.5.2",
-    "firebase-admin": "^6.0.0",
+    "firebase-admin": "^6.1.0",
     "flamelink": "^0.19.2",
     "google-maps-react": "^2.0.2",
+    "grpc": "^1.15.1",
+    "material-ui": "^1.0.0-beta.16",
+    "material-ui-icons": "^1.0.0-beta.36",
     "moment": "^2.22.2",
     "react": "^16.5.1",
     "react-dom": "^16.5.1",

src/App.js

@@ -3,6 +3,10 @@ import Main from './components/Main';
 import './App.css';
 
 class App extends Component {
+    componentDidMount() {
+        document.title = 'Marten Tracker';
+    }
+
     render() {
         return (
         <div>

src/components/FlameLinkComponentCreations.js

@@ -0,0 +1,28 @@
+import React, { Component} from 'react';
+import FlameLinkStructure from './FlameLinkStructure';
+import Grid from '@material-ui/core/Grid';
+
+class FlameLinkComponentCreations extends Component {
+
+    getSchemaFieldData(schemaData){
+        var arr = [];
+        for (var val in schemaData){
+            arr.push(val);
+        }
+        return arr.map(this.createComponents, schemaData);
+    }
+
+    createComponents(num){
+        return <FlameLinkStructure schemaData={this} field={this[num]} type={this[num].type} key={this[num].key} />
+    }
+
+    render() {
+        return(
+                <Grid container>
+                    {this.getSchemaFieldData(this.props.schemaDetails)}
+                </Grid>
+        );
+    }
+}
+
+export default FlameLinkComponentCreations;

src/components/FlameLinkFieldSet.js

@@ -0,0 +1,31 @@
+import React, { Component} from 'react';
+import Grid from '@material-ui/core/Grid';
+import FlameLinkFieldSetContent from './FlameLinkFieldSetContent';
+
+
+class FlameLinkFieldSet extends Component {
+
+
+    getFieldSetContent(content1, content2){
+        var arr = [];
+        for (var val in content2){
+            arr.push(val);
+        }  
+        var arrContent = [content1, content2];
+        return arr.map(this.createFieldSetComponents, arrContent);
+    }
+
+    createFieldSetComponents(num){
+        return <FlameLinkFieldSetContent field={this[1][num]} type={this[1][num].type} key={this[1][num].key} fieldKey={this[1][num].key} data={this[0]}/>
+    }
+
+    render() {
+        return(
+            <Grid item xs={12}>
+                    {this.getFieldSetContent(this.props.field, this.props.field2)}
+            </Grid>
+        );
+    }
+}
+
+export default FlameLinkFieldSet;

src/components/FlameLinkFieldSetContent.js

@@ -0,0 +1,52 @@
+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 FlameLinkImage from './FlameLinkImage';
+
+const styles = theme => ({
+        flamelinkFieldSetItem: {
+            paddingBottom: 10,
+        },
+    });
+
+class FlameLinkFieldSetContent extends Component {
+
+    getContent(key, type, description, fieldsetContent){
+        if (type === 'text'){
+                return  (
+                        <Typography variant='body2' component="p" id={this.props.field.key}>
+                        {fieldsetContent[key]}
+                        </Typography>
+                        )
+        }
+        if(type === 'textarea'){
+            return  (
+                    <Typography variant='body2' component="p" id={this.props.field.key} gutterBottom>
+                    {fieldsetContent[key]}
+                    </Typography>
+                    )               
+        }
+        if (type === 'media'){
+            for (var val in fieldsetContent[key]){
+                return <FlameLinkImage content={fieldsetContent[key][val]}/>
+            } 
+        }
+    }
+
+    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.flamelinkFieldSetItem}>
+                    {this.getContent(this.props.fieldKey, this.props.type, this.props.field.description, this.props.data)}
+            </Grid>
+        );
+    }
+}
+
+export default withStyles(styles)(FlameLinkFieldSetContent);

src/components/FlameLinkImage.js

@@ -0,0 +1,29 @@
+import React, { Component } from 'react';
+import Typography from '@material-ui/core/Typography';
+import flamelinkApp from '../flamelink.js';
+
+
+class FlameLinkImage extends Component {
+    constructor() {
+        super();
+
+        this.state = {
+          mediaURL: '',
+        }
+
+        flamelinkApp.storage.getURL(global.mediaID)
+                    .then(url => this.setState({
+                      mediaURL: url
+                    }))
+      }
+
+    render() {
+        return(
+                <Typography align='center'>
+                    <img src={this.state.mediaURL} width="70%" alt='' />
+                </Typography>
+        );
+    }
+}
+
+export default FlameLinkImage;

src/components/FlameLinkStructure.js

@@ -0,0 +1,123 @@
+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 FlameLinkStructure extends Component {
+    constructor() {
+        super();
+        
+        global.mediaID = '';
+
+        this.state = {
+          schemaContent: '',
+        }
+
+        flamelinkApp.content.get(global.schemaName)
+        .then(result => this.setState({
+          schemaContent: result
+        }))
+      }
+
+    getContent(schemaField, key, type, description){
+        if (type === 'text'){
+            if(description === 'h1'){
+                return  (
+                        <Typography variant='display4' id={key}>
+                            {this.state.schemaContent[key]}
+                        </Typography>
+                        )                
+            }
+            if(description === 'h2'){
+                return  (
+                        <Typography variant='display3' id={key}>
+                            {this.state.schemaContent[key]}
+                        </Typography>
+                        )                
+            }
+            if(description === 'h3'){
+                return  (
+                        <Typography variant='display2' id={key}>
+                            {this.state.schemaContent[key]}
+                        </Typography>
+                        )                
+            }
+            if(description === 'h4'){
+                return  (
+                        <Typography variant='display1' id={key}>
+                            {this.state.schemaContent[key]}
+                        </Typography>
+                        )                
+            }
+            if(description === 'h5'){
+                return  (
+                        <Typography variant='headline' id={key}>
+                            {this.state.schemaContent[key]}
+                        </Typography>
+                        )                
+            }
+            if(description === 'h6'){
+                return  (
+                        <Typography variant='title' id={key}>
+                            {this.state.schemaContent[key]}
+                        </Typography>
+                        )                
+            }
+            else{
+                return  (
+                        <Typography variant='body2' component="p" id={key}>
+                            {this.state.schemaContent[key]}
+                        </Typography>
+                        )
+            }
+        }
+        if(type === 'textarea'){
+            return  (
+                    <Typography variant='body2' component="p" id={key}>
+                        {this.state.schemaContent[key]}
+                    </Typography>
+                    )               
+        }
+        if (type === 'media'){
+            for (var val in this.state.schemaContent[key]){
+                global.mediaID = this.state.schemaContent[key][val];
+                return <FlameLinkImage/>
+            } 
+        }
+        if (type === 'fieldset'){
+            if(this.state.schemaContent === ''){
+                return
+            }
+            else{
+                return <FlameLinkFieldSet field={this.state.schemaContent[key]} field2={schemaField.options}/>
+            }
+        }
+    }
+
+    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.field, this.props.field.key, this.props.type, this.props.field.description)}
+            </Grid>
+        );
+    }
+}
+
+export default withStyles(styles)(FlameLinkStructure);

src/components/Flamelink.js

@@ -1,10 +0,0 @@
-import { Component } from 'react';
-
-class Flamelink extends Component {
-    render() {
-
-        return(null);
-    }
-}
-
-export default Flamelink;

src/components/Main.js

@@ -16,10 +16,12 @@ 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 InfoIcon from '@material-ui/icons/Info';
 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 Info from '../pages/Info';
 import Quiz from '../pages/QuizPage';
 import SightingList from '../pages/SightingList';
 import Report from '../pages/Report';
@@ -68,7 +70,7 @@ const styles = theme => ({
 class ResponsiveDrawer extends React.Component {
     state = {
         mobileOpen: false,
-        key: '',
+        key: 'Home',
         open: false
     };
 
@@ -83,7 +85,7 @@ class ResponsiveDrawer extends React.Component {
     nav = (text) => {
         this.setState({
             key: text
-        })
+        });
     }
 
     render() {
@@ -110,6 +112,10 @@ 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 />
@@ -189,6 +195,7 @@ class ResponsiveDrawer extends React.Component {
                     {this.state.key === 'Report' && <Report />}
                     {this.state.key === 'Map' && <ViewMap />}
                     {this.state.key === 'List' && <SightingList />}
+                    {this.state.key === 'About' && <Info />}
                     {this.state.key === 'Easy-Quiz' && <Quiz difficulty='Easy'/>}
                     {this.state.key === 'Medium-Quiz' && <Quiz difficulty='Medium'/>}
                     {this.state.key === 'Hard-Quiz' && <Quiz difficulty='Hard'/>}

src/components/QuizGame.js

@@ -239,33 +239,33 @@ class QuizGame extends React.Component {
      * @param {*} difficulty The difficulty setting passed in.
      */
     pickDifficulty = difficulty => {
-        let level
+        let level;
 
         switch (difficulty) {
             case 'Easy':
-                this.easy.questions = this.shuffleArray(this.easy.questions)
-                level = this.easy
-                break
+                this.easy.questions = this.shuffleArray(this.easy.questions);
+                level = this.easy;
+                break;
             case 'Medium':
-                this.medium.questions = this.shuffleArray(this.medium.questions)
-                level = this.medium
-                break
+                this.medium.questions = this.shuffleArray(this.medium.questions);
+                level = this.medium;
+                break;
             case 'Hard':
-                this.hard.questions = this.shuffleArray(this.hard.questions)
-                level = this.hard
-                break
+                this.hard.questions = this.shuffleArray(this.hard.questions);
+                level = this.hard;
+                break;
             default:
-                break
+                break;
         }
 
-        return level
+        return level;
     }
 
     // The state of the component.
     state = {
         difficulty: this.pickDifficulty(this.props.difficulty),
         key: Math.random()
-    }
+    };
 
     // Renders the quiz component.
     render() {

src/components/ReportForm.js

@@ -11,6 +11,8 @@ import CloseIcon from '@material-ui/icons/Close';
 import Button from '@material-ui/core/Button';
 import firebase from '../firebase.js';
 import GoogleMap from '../components/ReportMap';
+import Modal from '@material-ui/core/Modal';
+import Typography from '@material-ui/core/Typography';
 
 /**
  * Styles that the different
@@ -18,39 +20,46 @@ import GoogleMap from '../components/ReportMap';
  * in. Mostly used for spacing.
  */
 const styles = theme => ({
-  container: {
-    display: 'flex',
-    flexWrap: 'wrap'
-  },
-  textField: {
-    marginLeft: theme.spacing.unit * 2,
-    marginRight: theme.spacing.unit,
-    marginTop: theme.spacing.unit * 2,
-    flexBasis: 280,
-    width: '90%'
-  },
-  button: {
-    marginLeft: theme.spacing.unit * 2,
-    marginRight: theme.spacing.unit,
-    marginTop: theme.spacing.unit * 2,
-  },
-  dense: {
-    marginTop: 30,
-  },
-  close: {
-    padding: theme.spacing.unit / 2,
-  },
-  icon: {
-    fontSize: 20,
-    marginRight: theme.spacing.unit,
-  },
-  message: {
-    display: 'flex',
-    alignItems: 'center',
-  },
-  menu: {
-    width: 200,
-  },
+    container: {
+        display: 'flex',
+        flexWrap: 'wrap'
+    },
+    textField: {
+        marginLeft: theme.spacing.unit * 2,
+        marginRight: theme.spacing.unit,
+        marginTop: theme.spacing.unit * 2,
+        flexBasis: 280,
+        width: '90%'
+    },
+    button: {
+        marginLeft: theme.spacing.unit * 2,
+        marginRight: theme.spacing.unit,
+        marginTop: theme.spacing.unit * 2,
+    },
+    dense: {
+        marginTop: 30,
+    },
+    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,
+    }
 });
 
 /** 
@@ -59,30 +68,30 @@ const styles = theme => ({
  * what is stored in the database.
 */
 const sightingTypes = [
-  {
-    value: 'visual',
-    label: 'Visual',
-  },
-  {
-    value: 'roadkill',
-    label: 'Roadkill',
-  },
-  {
-    value: 'trapped',
-    label: 'Trapped',
-  },
-  {
-    value: 'viewed_tracks',
-    label: 'Viewed Tracks',
-  },
-  {
-    value: 'photo',
-    label: 'Photo',
-  },
-  {
-    value: 'other',
-    label: 'Other',
-  },
+    {
+        value: 'visual',
+        label: 'Visual',
+    },
+    {
+        value: 'roadkill',
+        label: 'Roadkill',
+    },
+    {
+        value: 'trapped',
+        label: 'Trapped',
+    },
+    {
+        value: 'viewed_tracks',
+        label: 'Viewed Tracks',
+    },
+    {
+        value: 'photo',
+        label: 'Photo',
+    },
+    {
+        value: 'other',
+        label: 'Other',
+    },
 ];
 
 /** 
@@ -91,54 +100,54 @@ const sightingTypes = [
  * what is stored in the database.
 */
 const monthTypes = [
-  {
-    value: '01',
-    label: 'January',
-  },
-  {
-    value: '02',
-    label: 'February',
-  },
-  {
-    value: '03',
-    label: 'March',
-  },
-  {
-    value: '04',
-    label: 'April',
-  },
-  {
-    value: '05',
-    label: 'May',
-  },
-  {
-    value: '06',
-    label: 'June',
-  },
-  {
-    value: '07',
-    label: 'July',
-  },
-  {
-    value: '08',
-    label: 'August',
-  },
-  {
-    value: '09',
-    label: 'September',
-  },
-  {
-    value: '10',
-    label: 'October',
-  },
-  {
-    value: '11',
-    label: 'November',
-  },
-  {
-    value: '12',
-    label: 'December',
-  },
+    {
+        value: '01',
+        label: 'January',
+    },
+    {
+        value: '02',
+        label: 'February',
+    },
+    {
+        value: '03',
+        label: 'March',
+    },
+    {
+        value: '04',
+        label: 'April',
+    },
+    {
+        value: '05',
+        label: 'May',
+    },
+    {
+        value: '06',
+        label: 'June',
+    },
+    {
+        value: '07',
+        label: 'July',
+    },
+    {
+        value: '08',
+        label: 'August',
+    },
+    {
+        value: '09',
+        label: 'September',
+    },
+    {
+        value: '10',
+        label: 'October',
+    },
+    {
+        value: '11',
+        label: 'November',
+    },
+    {
+        value: '12',
+        label: 'December',
+    },
 ];
 
 /** 
@@ -147,26 +156,26 @@ const monthTypes = [
  * what is stored in the database.
 */
 const timeTypes = [
-  {
-    value: 'unknown',
-    label: 'Unknown',
-  },
-  {
-    value: 'morning',
-    label: 'Morning',
-  },
-  {
-    value: 'midday',
-    label: 'Midday',
-  },
-  {
-    value: 'evening',
-    label: 'Evening',
-  },
-  {
-    value: 'night',
-    label: 'Night',
-  },
+    {
+        value: 'unknown',
+        label: 'Unknown',
+    },
+    {
+        value: 'morning',
+        label: 'Morning',
+    },
+    {
+        value: 'midday',
+        label: 'Midday',
+    },
+    {
+        value: 'evening',
+        label: 'Evening',
+    },
+    {
+        value: 'night',
+        label: 'Night',
+    },
 ];
 
 /** 
@@ -175,349 +184,379 @@ const timeTypes = [
  * what is stored in the database.
 */
 const confidenceLevels = [
-  {
-    value: '1',
-    label: '1 - Strongly disagree',
-  },
-  {
-    value: '2',
-    label: '2 - Disagree',
-  },
-  {
-    value: '3',
-    label: '3 - Neutral',
-  },
-  {
-    value: '4',
-    label: '4 - Agree',
-  },
-  {
-    value: '5',
-    label: '5 - Strongly agree',
-  },
+    {
+        value: '1',
+        label: '1 - Strongly disagree',
+    },
+    {
+        value: '2',
+        label: '2 - Disagree',
+    },
+    {
+        value: '3',
+        label: '3 - Neutral',
+    },
+    {
+        value: '4',
+        label: '4 - Agree',
+    },
+    {
+        value: '5',
+        label: '5 - Strongly agree',
+    },
 ];
 
 /**
  * The form component.
  */
 class ReportForm extends React.Component {
-  /**
-   * Component contructor. Currently
-   * only used to bind event
-   * handlers.
-   */
-  constructor() {
-    super();
-    this.handleSubmit = this.handleSubmit.bind(this);
-  }
-
-  /**
-  * Function for formatting the
-  * year as a string that
-  * Material UI can use.
-  * @param {*} date, Date passed in. 
-  */
- getYear = date => {
-  var d = new Date(date),
-    year = d.getFullYear();
-
-  return year;
-}
-
-/**
-* Function for formatting the
-* month as a string that
-* Material UI can use.
-* @param {*} date, Date passed in. 
-*/
-getMonth = date => {
-  var d = new Date(date),
-  month = d.getMonth() + 1;
-
-  month = month.toString();
-
-  if (month.length === 1) {
-    month = "0" + month;
-  }
-
-  return month;
-}
-
-  /**
-   * State of form components.
-   */
-  state = {
-    month: this.getMonth(new Date()),
-    year: this.getYear(new Date()),
-    time: 'unknown',
-    type: 'visual',
-    confidence: '1',
-    desc: '',
-    lat: '',
-    lng: '',
-    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;
+    /**
+     * Component contructor. Currently
+     * only used to bind event
+     * handlers.
+     */
+    constructor() {
+        super();
+        this.handleSubmit = this.handleSubmit.bind(this);
     }
 
-    this.setState({ open: false });
-  };
-
-  /*
-  * Get the coordinates 
-  * 
-  */
-  getCoordinates = (lat, lng) => {
-    let latitude = lat;
-    let longitude = lng;
-
-    this.setState({
-      lat: latitude,
-      lng: longitude
-    });
-  }
-
-  /**
-   * Event listener for form.
-   * When the form is submitted,
-   * this function passes the
-   * data along to Firebase.
-   */
-  handleSubmit(e) {
-    e.preventDefault();
-    const sightingsRef = firebase.database().ref('sightings');
-    const sighting = {
-      type: this.state.type,
-      confidence: this.state.confidence,
-      date: this.state.year + '-' + this.state.month,
-      time: this.state.time,
-      desc: this.state.desc,
-      lat: this.state.lat,
-      lng: this.state.lng
-    }
-    sightingsRef.push(sighting);
-    this.setState({
-      year: this.getYear(new Date()),
-      month: this.getMonth(new Date()),
-      time: 'unknown',
-      type: 'visual',
-      confidence: '1',
-      desc: '',
-      lat: '',
-      lng: '',
-      open: true
-    });
-  };
-
-
-  /**
-   * The render method for this component.
-   */
-  render() {
-    const { classes } = this.props;
-
     /**
-     * The actual form.
+    * Function for formatting the
+    * year as a string that
+    * Material UI can use.
+    * @param {*} date, Date passed in. 
+    */
+    getYear = date => {
+        var d = new Date(date),
+            year = d.getFullYear();
+
+        return year;
+    }
+
+    /**
+    * Function for formatting the
+    * month as a string that
+    * Material UI can use.
+    * @param {*} date, Date passed in. 
+    */
+    getMonth = date => {
+        var d = new Date(date),
+            month = d.getMonth() + 1;
+
+        month = month.toString();
+
+        if (month.length === 1) {
+            month = "0" + month;
+        }
+
+        return month;
+    }
+
+    /**
+     * State of form components.
      */
-    return (
-      <Fragment>
-        <form className={classes.container} autoComplete="off" onSubmit={this.handleSubmit}>
-          <Grid container>
-            <Grid item xs={12} md={6}>
-              <Grid container spacing={8}>
-                <Grid item xs={12}>
-                  <TextField
-                    id="select-sighting-type"
-                    select
-                    required
-                    name="sighting-type"
-                    label="Select"
-                    className={classes.textField}
-                    value={this.state.type}
-                    onChange={this.handleChange('type')}
-                    SelectProps={{
-                      MenuProps: {
-                        className: classes.menu,
-                      },
-                    }}
-                    helperText="Please select type of sighting"
-                  >
-                    {sightingTypes.map(option => (
-                      <MenuItem key={option.value} value={option.value}>
-                        {option.label}
-                      </MenuItem>
-                    ))}
-                  </TextField>
-                </Grid>
+    state = {
+        month: this.getMonth(new Date()),
+        year: this.getYear(new Date()),
+        time: 'unknown',
+        type: 'visual',
+        confidence: '1',
+        desc: '',
+        lat: '',
+        lng: '',
+        open: false,
+        openModal: false, 
+        hasModalOpened: false
+    };
 
-                <Grid item xs={12}>
-                  <TextField
-                    id="select-confidence"
-                    select
-                    required
-                    name="sighting-confidence"
-                    label="Select"
-                    className={classes.textField}
-                    value={this.state.confidence}
-                    onChange={this.handleChange('confidence')}
-                    SelectProps={{
-                      MenuProps: {
-                        className: classes.menu,
-                      },
-                    }}
-                    helperText="I am confident of my marten sighting"
-                  >
-                    {confidenceLevels.map(option => (
-                      <MenuItem key={option.value} value={option.value}>
-                        {option.label}
-                      </MenuItem>
-                    ))}
-                  </TextField>
-                </Grid>
+    handleModalOpen = () => !this.state.hasModalOpened ? this.setState({ openModal: true, hasModalOpened: true }) : null;
 
-                <Grid item xs={12}>
-                  <TextField
-                    id="sighting-time"
-                    select
-                    required
-                    label="Sighting time"
-                    name="sighting-time"
-                    className={classes.textField}
-                    value={this.state.time}
-                    onChange={this.handleChange('time')}
-                    SelectProps={{
-                      MenuProps: {
-                        className: classes.menu,
-                      },
-                    }}
-                  >
-                    {timeTypes.map(option => (
-                      <MenuItem key={option.value} value={option.value}>
-                        {option.label}
-                      </MenuItem>
-                    ))}
-                  </TextField>
-                </Grid>
+    handleModalClose = () => {
+        this.setState({ openModal: false });
+    };
 
-                <Grid item xs={12}>
-                  <TextField
-                    id="sighting-month"
-                    select
-                    required
-                    label="Sighting month"
-                    name="sighting-month"
-                    className={classes.textField}
-                    value={this.state.month}
-                    onChange={this.handleChange('month')}
-                    SelectProps={{
-                      MenuProps: {
-                        className: classes.menu,
-                      },
-                    }}
-                  >
-                    {monthTypes.map(option => (
-                      <MenuItem key={option.value} value={option.value}>
-                        {option.label}
-                      </MenuItem>
-                    ))}
-                  </TextField>
-                </Grid>
+    getModalStyle = () => {
+        return {
+            top: `25%`,
+            left: `75%`,
+            transform: `translate(-25%, -75%)`,
+        };
+    }
 
-                <Grid item xs={12}>
-                  <TextField
-                    id="sighting-year"
-                    required
-                    label="Sighting year"
-                    name="sighting-year"
-                    value={this.state.year}
-                    type="number"
-                    className={classes.textField}
-                    onChange={this.handleChange('year')}
-                    InputLabelProps={{
-                      shrink: true,
-                    }}
-                  />
-                </Grid>
+    /**
+     * Handles state change in form
+     * components.
+     */
+    handleChange = name => event => {
+        this.setState({
+            [name]: event.target.value,
+        });
+    };
 
-                <Grid item xs={12}>
-                  <TextField
-                    id="sighting-description"
-                    required
-                    label="Description"
-                    name="sighting-desc"
-                    multiline
-                    rows="5"
-                    placeholder="Describe the sighting to the best of your ability."
-                    value={this.state.desc}
-                    className={classes.textField}
-                    onChange={this.handleChange('desc')}
-                    margin="normal"
-                    variant="outlined"
-                    InputLabelProps={{
-                      shrink: true,
-                    }}
-                  />
-                </Grid>
+    /**
+     * Handles closing the toast.
+     */
+    handleClose = (event, reason) => {
+        if (reason === 'clickaway') {
+            return;
+        }
 
-                <Grid item xs={12}>
-                  <Button variant="contained" type="submit" color="primary" className={classes.button}>
-                    Submit
-                  </Button>
-                </Grid>
-              </Grid>
-            </Grid>
-            <Grid item xs={12} md={6}>
-              <GoogleMap onClick={this.getCoordinates} />
-            </Grid>
-          </Grid>
-        </form>
-        <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} />Report received.</span>}
-          action={[
-            <IconButton
-              key="close"
-              aria-label="Close"
-              color="inherit"
-              className={classes.close}
-              onClick={this.handleClose}
-            >
-              <CloseIcon />
-            </IconButton>,
-          ]}
-        />
-      </Fragment>
-    );
-  }
+        this.setState({ open: false });
+    };
+
+    /*
+    * Get the coordinates 
+    * 
+    */
+    getCoordinates = (lat, lng) => {
+        let latitude = lat;
+        let longitude = lng;
+
+        this.setState({
+            lat: latitude,
+            lng: longitude
+        });
+    }
+
+    /**
+     * Event listener for form.
+     * When the form is submitted,
+     * this function passes the
+     * data along to Firebase.
+     */
+    handleSubmit(e) {
+        e.preventDefault();
+        const sightingsRef = firebase.database().ref('sightings');
+        const sighting = {
+            type: this.state.type,
+            confidence: this.state.confidence,
+            date: this.state.year + '-' + this.state.month,
+            time: this.state.time,
+            desc: this.state.desc,
+            lat: this.state.lat,
+            lng: this.state.lng
+        }
+        sightingsRef.push(sighting);
+        this.setState({
+            year: this.getYear(new Date()),
+            month: this.getMonth(new Date()),
+            time: 'unknown',
+            type: 'visual',
+            confidence: '1',
+            desc: '',
+            lat: '',
+            lng: '',
+            open: true
+        });
+    };
+
+
+    /**
+     * The render method for this component.
+     */
+    render() {
+        const { classes } = this.props;
+
+        /**
+         * The actual form.
+         */
+        return (
+            <Fragment>
+                <form className={classes.container} autoComplete="off" onSubmit={this.handleSubmit}>
+                    <Grid container>
+                        <Grid item xs={12} md={6}>
+                            <Grid container spacing={8}>
+                                <Grid item xs={12}>
+                                    <TextField
+                                        id="select-sighting-type"
+                                        select
+                                        required
+                                        name="sighting-type"
+                                        label="Select"
+                                        className={classes.textField}
+                                        value={this.state.type}
+                                        onChange={this.handleChange('type')}
+                                        SelectProps={{
+                                            MenuProps: {
+                                                className: classes.menu,
+                                            },
+                                        }}
+                                        helperText="Please select type of sighting"
+                                    >
+                                        {sightingTypes.map(option => (
+                                            <MenuItem key={option.value} value={option.value}>
+                                                {option.label}
+                                            </MenuItem>
+                                        ))}
+                                    </TextField>
+                                </Grid>
+
+                                <Grid item xs={12}>
+                                    <TextField
+                                        id="select-confidence"
+                                        select
+                                        required
+                                        name="sighting-confidence"
+                                        label="Select"
+                                        className={classes.textField}
+                                        value={this.state.confidence}
+                                        onChange={this.handleChange('confidence')}
+                                        SelectProps={{
+                                            MenuProps: {
+                                                className: classes.menu,
+                                            },
+                                        }}
+                                        helperText="I am confident of my marten sighting"
+                                    >
+                                        {confidenceLevels.map(option => (
+                                            <MenuItem key={option.value} value={option.value}>
+                                                {option.label}
+                                            </MenuItem>
+                                        ))}
+                                    </TextField>
+                                </Grid>
+
+                                <Grid item xs={12}>
+                                    <TextField
+                                        id="sighting-time"
+                                        select
+                                        required
+                                        label="Sighting time"
+                                        name="sighting-time"
+                                        className={classes.textField}
+                                        value={this.state.time}
+                                        onChange={this.handleChange('time')}
+                                        SelectProps={{
+                                            MenuProps: {
+                                                className: classes.menu,
+                                            },
+                                        }}
+                                    >
+                                        {timeTypes.map(option => (
+                                            <MenuItem key={option.value} value={option.value}>
+                                                {option.label}
+                                            </MenuItem>
+                                        ))}
+                                    </TextField>
+                                </Grid>
+
+                                <Grid item xs={12}>
+                                    <TextField
+                                        id="sighting-month"
+                                        select
+                                        required
+                                        label="Sighting month"
+                                        name="sighting-month"
+                                        className={classes.textField}
+                                        value={this.state.month}
+                                        onChange={this.handleChange('month')}
+                                        SelectProps={{
+                                            MenuProps: {
+                                                className: classes.menu,
+                                            },
+                                        }}
+                                    >
+                                        {monthTypes.map(option => (
+                                            <MenuItem key={option.value} value={option.value}>
+                                                {option.label}
+                                            </MenuItem>
+                                        ))}
+                                    </TextField>
+                                </Grid>
+
+                                <Grid item xs={12}>
+                                    <TextField
+                                        id="sighting-year"
+                                        required
+                                        label="Sighting year"
+                                        name="sighting-year"
+                                        value={this.state.year}
+                                        type="number"
+                                        className={classes.textField}
+                                        onChange={this.handleChange('year')}
+                                        InputLabelProps={{
+                                            shrink: true,
+                                        }}
+                                    />
+                                </Grid>
+
+                                <Grid item xs={12}>
+                                    <TextField
+                                        id="sighting-description"
+                                        required
+                                        label="Description"
+                                        name="sighting-desc"
+                                        multiline
+                                        rows="5"
+                                        placeholder="Describe the sighting to the best of your ability."
+                                        value={this.state.desc}
+                                        className={classes.textField}
+                                        onChange={this.handleChange('desc')}
+                                        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 item xs={12} md={6} onMouseEnter={this.handleModalOpen}>
+                            <GoogleMap onClick={this.getCoordinates}/>
+                            <Modal
+                                aria-labelledby="simple-modal-title"
+                                aria-describedby="simple-modal-description"
+                                open={this.state.openModal}
+                                onClose={this.handleModalClose}
+                            >
+                                <div style={this.getModalStyle()} className={classes.paper}>
+                                    <Typography variant="title" id="modal-title">
+                                        Need a little help?
+                                    </Typography>
+                                    <Typography variant="subheading" id="simple-modal-description">
+                                        Click on the map to drop a pin!
+                                    </Typography>
+                                </div>
+                            </Modal>
+                        </Grid>
+                    </Grid>
+                </form>
+                <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} />Report received.</span>}
+                    action={[
+                        <IconButton
+                            key="close"
+                            aria-label="Close"
+                            color="inherit"
+                            className={classes.close}
+                            onClick={this.handleClose}
+                        >
+                            <CloseIcon />
+                        </IconButton>,
+                    ]}
+                />
+            </Fragment>
+        );
+    }
 }
 
 ReportForm.propTypes = {
-  classes: PropTypes.object.isRequired,
+    classes: PropTypes.object.isRequired,
 };
 
 export default withStyles(styles)(ReportForm);

src/components/ReportMap.js

@@ -9,7 +9,7 @@ const API_KEY = 'AIzaSyAZ_0J01bA6wCbIPK4UBq2RUBC-hIqG4mM';
 const mapStyles = {
     width: '100%',
     height: '100%'
-}
+};
 
 export class MapContainer extends Component {
 
@@ -18,22 +18,22 @@ export class MapContainer extends Component {
         if (navigator.geolocation) {
             navigator.geolocation.getCurrentPosition((position) => {
                 this.setState({
-                        myLatLng: {
-                            lat: position.coords.latitude,
-                            lng: position.coords.longitude
-                        }
+                    myLatLng: {
+                        lat: position.coords.latitude,
+                        lng: position.coords.longitude
                     }
+                }
                 );
             })
         } else {
             // If browser doesn't support geolocation or if user does not allow it, 
             // center map on Grand Rapids, Michigan
             this.setState({
-                    myLatLng: {
-                        lat: 42.9634,
-                        lng: 85.6681
-                    }
+                myLatLng: {
+                    lat: 42.9634,
+                    lng: 85.6681
                 }
+            }
             );
         }
     }
@@ -52,7 +52,7 @@ export class MapContainer extends Component {
             showingInfoWindow: true
         });
     }
-    
+
     // When the user clicks on the map, if a info window is visible then close it
     // and 'unactive' that marker
     onMapClick = (props, map, e) => {
@@ -68,13 +68,13 @@ export class MapContainer extends Component {
                 lat: e.latLng.lat(),
                 lng: e.latLng.lng()
             }
-        })
+        });
 
         let lat = e.latLng.lat();
-        let lng =  e.latLng.lng();
+        let lng = e.latLng.lng();
 
         if (this.props.onClick) {
-            this.props.onClick(lat,lng);
+            this.props.onClick(lat, lng);
         }
     }
 
@@ -98,36 +98,36 @@ export class MapContainer extends Component {
 
         return (
             // Render the Google Map, Marker, and InfoWindow components
-            <div className = "report-google-map-container">
+            <div className="report-google-map-container">
                 <Map
-                    style = { mapStyles }
-                    google = { this.props.google }
-                    initialCenter = { this.state.myLatLng }
-                    center = { this.state.myLatLng }
-                    defaultZoom = { 15 }
-                    onClick = { this.onMapClick } >
+                    style={mapStyles}
+                    google={this.props.google}
+                    initialCenter={this.state.myLatLng}
+                    center={this.state.myLatLng}
+                    defaultZoom={15}
+                    onClick={this.onMapClick} >
 
-                    <Marker 
-                        position = { this.state.markerLatLng }
+                    <Marker
+                        position={this.state.markerLatLng}
                     />
 
-                    <Marker 
-                        position = { this.state.myLatLng }
-                        onClick = { this.onMarkerClick }
-                        title = { 'You are here' }
-                        name = { '' } 
+                    <Marker
+                        position={this.state.myLatLng}
+                        onClick={this.onMarkerClick}
+                        title={'You are here'}
+                        name={''}
                     />
 
                     <InfoWindow
-                        marker = { this.state.activeMarker }
-                        visible = { this.state.showingInfoWindow } >
+                        marker={this.state.activeMarker}
+                        visible={this.state.showingInfoWindow} >
 
                         <Fragment>
-                            <Typography variant = "display1" gutterBottom>
-                                { this.state.selectedPlace.title }
+                            <Typography variant="display1" gutterBottom>
+                                {this.state.selectedPlace.title}
                             </Typography>
-                            <Typography variant = "subheading" gutterBottom>
-                                { this.state.selectedPlace.name }
+                            <Typography variant="subheading" gutterBottom>
+                                {this.state.selectedPlace.name}
                             </Typography>
                         </Fragment>
                     </InfoWindow>
@@ -138,6 +138,4 @@ export class MapContainer extends Component {
 }
 
 // Send the Google Map API Key with the MapContainer component
-export default GoogleApiWrapper({
-    apiKey: (API_KEY)
-})(MapContainer)
+export default GoogleApiWrapper({ apiKey: (API_KEY) })(MapContainer);

src/components/SightingDetail.js

@@ -1,24 +1,154 @@
 import React, { Component, Fragment } from 'react';
 import Disqus from 'disqus-react';
+import moment from 'moment';
 import SightingDetailMap from './SightingDetailMap';
 
+/** 
+  * Types of sightings. Label is what is
+  * viewed in the application, value is
+  * what is stored in the database.
+  */
+ const sightingTypes = [
+    {
+        value: 'visual',
+        label: 'Visual',
+    },
+    {
+        value: 'roadkill',
+        label: 'Roadkill',
+    },
+    {
+        value: 'trapped',
+        label: 'Trapped',
+    },
+    {
+        value: 'viewed_tracks',
+        label: 'Viewed Tracks',
+    },
+    {
+        value: 'photo',
+        label: 'Photo',
+    },
+    {
+        value: 'other',
+        label: 'Other',
+    },
+];
+
+/** 
+ * Types of sightings. Label is what is
+ * viewed in the application, value is
+ * what is stored in the database.
+*/
+const timeTypes = [
+    {
+        value: 'unknown',
+        label: 'Unknown',
+    },
+    {
+        value: 'morning',
+        label: 'Morning',
+    },
+    {
+        value: 'midday',
+        label: 'Midday',
+    },
+    {
+        value: 'evening',
+        label: 'Evening',
+    },
+    {
+        value: 'night',
+        label: 'Night',
+    },
+];
+
+/** 
+ * Levels of confidence. Label is what is
+ * viewed in the application, value is
+ * what is stored in the database.
+*/
+const confidenceLevels = [
+    {
+        value: '1',
+        label: '1 - Strongly disagree',
+    },
+    {
+        value: '2',
+        label: '2 - Disagree',
+    },
+    {
+        value: '3',
+        label: '3 - Neutral',
+    },
+    {
+        value: '4',
+        label: '4 - Agree',
+    },
+    {
+        value: '5',
+        label: '5 - Strongly agree',
+    },
+];
+
 class SightingDetail extends Component {
 
+    /**
+    * Gets formatted type value.
+    */
+    getType = item => {
+        for (var i = 0; i < sightingTypes.length; i++) {
+            if (sightingTypes[i].value === item) {
+                return sightingTypes[i].label;
+            }
+        }
+    }
+
+
+    /**
+     * Gets formatted time value.
+     */
+    getTime = item => {
+        for (var i = 0; i < timeTypes.length; i++) {
+            if (timeTypes[i].value === item) {
+                return timeTypes[i].label;
+            }
+        }
+    }
+
+    /**
+    * Gets formatted confidence value.
+    */
+    getConfidence = item => {
+        for (var i = 0; i < confidenceLevels.length; i++) {
+            if (confidenceLevels[i].value === item) {
+                return confidenceLevels[i].label;
+            }
+        }
+
+    }
+
+    formatDate = date => {
+        return (moment(date, "YYYY-MM").format("MMMM YYYY").toString());
+    }
+
     render() {
-        const disqusShortname = 'https-marten-application-netlify-com';
+        const disqusShortname = 'marten-tracker';
         const disqusConfig = {
             url: `http://localhost:3000/${this.props.detail.id}`,
             identifier: this.props.detail.id,
             title: this.props.detail.id
-        }
+        };
 
         return (
             <Fragment>
-                <SightingDetailMap lat={this.props.detail.lat} lng={this.props.detail.lng}/>
+                <SightingDetailMap lat={this.props.detail.lat} lng={this.props.detail.lng} />
                 <div className='sighting-details-content'>
-                    <p>{`Confidence: ${this.props.detail.confidence}`}</p>
-                    <p>{`When: ${this.props.detail.date}, ${this.props.detail.time}`}</p>
-                    <p>{`Where: ${this.props.detail.lat} degrees N, and ${this.props.detail.lng} degrees E`}</p>
+                    <p><b>Type:</b> {this.getType(this.props.detail.type)}</p>
+                    <p><b>When:</b> {this.formatDate(this.props.detail.date)}, {this.getTime(this.props.detail.time)}</p>
+                    <p><b>Where:</b> {this.props.detail.lat} degrees N, and {this.props.detail.lng} degrees E</p>
+                    <p><b>I am confident of my sighting:</b> {this.getConfidence(this.props.detail.confidence)}</p>
+                    <hr/>
                     <p>{`${this.props.detail.desc}`}</p>
                 </div>
                 <Disqus.DiscussionEmbed shortname={disqusShortname} config={disqusConfig} />
@@ -27,4 +157,4 @@ class SightingDetail extends Component {
     }
 }
 
-export default SightingDetail;
+export default SightingDetail;

src/components/SightingDetailMap.js

@@ -8,23 +8,23 @@ const API_KEY = 'AIzaSyAZ_0J01bA6wCbIPK4UBq2RUBC-hIqG4mM';
 const mapStyles = {
     width: '100%',
     height: '100%'
-}
+};
 
 export class MapContainer extends Component {
 
     render() {
         return (
             // Render the Google Map, Marker, and InfoWindow components
-            <div className = "sighting-detail-google-map-container">
+            <div className="sighting-detail-google-map-container">
                 <Map
-                    style = { mapStyles }
-                    google = { this.props.google }
-                    initialCenter = {{ lat: this.props.lat, lng: this.props.lng }}
-                    center = {{ lat: this.props.lat, lng: this.props.lng }}
-                    defaultZoom = { 15 }>
+                    style={mapStyles}
+                    google={this.props.google}
+                    initialCenter={{ lat: this.props.lat, lng: this.props.lng }}
+                    center={{ lat: this.props.lat, lng: this.props.lng }}
+                    defaultZoom={15}>
 
-                    <Marker 
-                        position = {{ lat: this.props.lat, lng: this.props.lng }}
+                    <Marker
+                        position={{ lat: this.props.lat, lng: this.props.lng }}
                     />
                 </Map>
             </div>
@@ -33,6 +33,4 @@ export class MapContainer extends Component {
 }
 
 // Send the Google Map API Key with the MapContainer component
-export default GoogleApiWrapper({
-    apiKey: (API_KEY)
-})(MapContainer)
+export default GoogleApiWrapper({ apiKey: (API_KEY) })(MapContainer);

src/components/SightingMap.js

@@ -1,6 +1,6 @@
 import React, { Component, Fragment } from 'react';
 import { Map, InfoWindow, Marker, GoogleApiWrapper } from 'google-maps-react';
-import moment from 'moment'
+import moment from 'moment';
 import Typography from '@material-ui/core/Typography';
 import firebase from '../firebase.js';
 
@@ -11,7 +11,7 @@ const API_KEY = 'AIzaSyAZ_0J01bA6wCbIPK4UBq2RUBC-hIqG4mM';
 const mapStyles = {
     width: '100%',
     height: '100%'
-}
+};
 
 /** 
   * Types of sightings. Label is what is
@@ -81,23 +81,23 @@ const timeTypes = [
 const confidenceLevels = [
     {
         value: '1',
-        label: '1 - Strongly unconfident',
+        label: '1 - Strongly disagree',
     },
     {
         value: '2',
-        label: '2 - Unconfident',
+        label: '2 - Disagree',
     },
     {
         value: '3',
-        label: '3 - Somewhat confident',
+        label: '3 - Neutral',
     },
     {
         value: '4',
-        label: '4 - Confident',
+        label: '4 - Agree',
     },
     {
         value: '5',
-        label: '5 - Very confident',
+        label: '5 - Strongly agree',
     },
 ];
 
@@ -112,9 +112,8 @@ export class MapContainer extends Component {
                         lat: position.coords.latitude,
                         lng: position.coords.longitude
                     }
-                }
-                );
-            })
+                });
+            });
         } else {
             // If browser doesn't support geolocation or if user does not allow it, 
             // center map on Grand Rapids, Michigan
@@ -123,8 +122,7 @@ export class MapContainer extends Component {
                     lat: 42.9634,
                     lng: 85.6681
                 }
-            }
-            );
+            });
         }
     }
 
@@ -209,6 +207,42 @@ export class MapContainer extends Component {
         }
     }
 
+    /**
+     * Determines marker icon based on the
+     * sighting type.
+     */
+    sightingIcon = (type) => {
+        let pinIcon;
+
+        switch(type) {
+            case 'visual':
+                pinIcon = '/mapicons/marten-icon.png';
+                break;
+            case 'roadkill':
+                pinIcon = '/mapicons/tire-icon.png';
+                break;
+            case 'viewed_tracks':
+                pinIcon = '/mapicons/paws.png';
+                break;
+            case 'trapped':
+                pinIcon = '/mapicons/cage.png';
+                break;
+            case 'photo':
+                pinIcon = '/mapicons/photo-icon.png';
+                break;
+            case 'other':
+                pinIcon = '/mapicons/other-icon.png';
+                break;
+            default:
+                break;
+        }
+
+        return pinIcon;
+    }
+
+    /**
+     * Formats date using Moment.js.
+     */
     formatDate = date => {
         return (moment(date, "YYYY-MM").format("MMMM YYYY").toString())
     }
@@ -224,9 +258,11 @@ export class MapContainer extends Component {
         activeMarker: {},
         selectedPlace: {},
         sightings: []
-    }
+    };
 
     render() {
+        const {google} = this.props;
+
         return (
             // Render the Google Map, Marker, and InfoWindow components
             <div className="sighting-google-map-container">
@@ -235,9 +271,15 @@ export class MapContainer extends Component {
                     google={this.props.google}
                     initialCenter={this.state.myLatLng}
                     center={this.state.myLatLng}
+<<<<<<< HEAD
                     minZoom={6}
                     zoom={6}
                     onClick={this.onMapClick} >
+=======
+                    defaultZoom={15}
+                    onClick={this.onMapClick}
+                >
+>>>>>>> 80a73145f79c96ee62e901f94528550ad8761cca
 
                     <Marker
                         position={this.state.myLatLng}
@@ -246,16 +288,24 @@ export class MapContainer extends Component {
                     />
 
                     {this.state.sightings.map((sighting) => {
+
+                        let pinIcon = this.sightingIcon(sighting.type)
+                        
                         return (
                             <Marker
                                 key={sighting.id}
                                 position={{ lat: sighting.lat, lng: sighting.lng }}
                                 onClick={this.onMarkerClick}
                                 type={'Type: ' + this.getType(sighting.type)}
-                                confidence={<Fragment><b>Confidence:</b> {this.getConfidence(sighting.confidence)}</Fragment>}
                                 date={<Fragment><b>Date:</b> {this.formatDate(sighting.date)}</Fragment>}
                                 time={<Fragment><b>Time:</b> {this.getTime(sighting.time)}</Fragment>}
+                                confidence={<Fragment><b>I am confident of my sighting:</b> {this.getConfidence(sighting.confidence)}</Fragment>}
                                 description={<Fragment><b>Description:</b> {sighting.desc}</Fragment>}
+                                icon={{
+                                    url: pinIcon,
+                                    anchor: new google.maps.Point(32,32),
+                                    scaledSize: new google.maps.Size(32,32)
+                                }}
                             />
                         )
                     })}
@@ -268,15 +318,15 @@ export class MapContainer extends Component {
                             <Typography variant="display1" gutterBottom>
                                 {this.state.selectedPlace.type}
                             </Typography>
-                            <Typography variant="subheading" gutterBottom>
-                                {this.state.selectedPlace.confidence}
-                            </Typography>
                             <Typography variant="subheading" gutterBottom>
                                 {this.state.selectedPlace.date}
                             </Typography>
                             <Typography variant="subheading" gutterBottom>
                                 {this.state.selectedPlace.time}
                             </Typography>
+                            <Typography variant="subheading" gutterBottom>
+                                {this.state.selectedPlace.confidence}
+                            </Typography>
                             <Typography variant="subheading" gutterBottom>
                                 {this.state.selectedPlace.description}
                             </Typography>
@@ -289,6 +339,4 @@ export class MapContainer extends Component {
 }
 
 // Send the Google Map API Key with the MapContainer component
-export default GoogleApiWrapper({
-    apiKey: (API_KEY)
-})(MapContainer)
+export default GoogleApiWrapper({ apiKey: (API_KEY) })(MapContainer);

src/components/ViewSightings.js

@@ -16,7 +16,7 @@ class ViewSightings extends Component {
             let newState = [];
 
             for (let sighting in sightings) {
-                newState.push({
+                newState.unshift({
                     id: sighting,
                     lat: sightings[sighting].lat,
                     lng: sightings[sighting].lng,
@@ -62,7 +62,7 @@ class ViewSightings extends Component {
             time: null
         },
         clicked: false
-    }
+    };
 
     render() {
         return (
@@ -77,7 +77,7 @@ class ViewSightings extends Component {
                                         <ListItem button key={ sighting.id } onClick={() => this.getDetail(sighting.id, sighting.lat, sighting.lng, sighting.desc, sighting.type, sighting.confidence, sighting.date, sighting.time)}>
                                             <ListItemText primary={`${sighting.desc}`}/>
                                         </ListItem>
-                                    )
+                                    );
                                 })
                             }
                             </List>

src/index.js

@@ -6,4 +6,6 @@ import registerServiceWorker from './registerServiceWorker';
 
 ReactDOM.render(<App/>, document.getElementById('root'));
 
+document.title = "Marten Tracker | Home";
+
 registerServiceWorker();

src/pages/Home.js

@@ -1,15 +1,30 @@
 import React, { Component } from 'react';
-import Typography from '@material-ui/core/Typography';
+import FlameLinkComponentCreations from '../components/FlameLinkComponentCreations';
+import flamelinkApp from '../flamelink';
 
 class Home extends Component {
+    constructor() {
+        super();
+
+        global.schemaName = 'martenHome';
+
+        this.state = {
+            schemaDetails: '',
+        }
+
+        flamelinkApp.schemas.getFields(global.schemaName, { fields: ['title', 'key', 'type', 'gridColumns', 'description', 'options'] })
+            .then(result => this.setState({
+                schemaDetails: result
+            }))
+    }
+
+    componentDidMount() {
+        document.title = 'Marten Tracker | Home';
+    }
 
     render() {
         return (
-            <div>
-                <Typography variant='display1' align='center' gutterBottom>
-                    Home
-                </Typography>
-            </div>
+            <FlameLinkComponentCreations schemaDetails={this.state.schemaDetails} />
         );
     }
 }

src/pages/Info.js

@@ -1,18 +1,35 @@
-import React, { Component } from 'react';
-import Typography from '@material-ui/core/Typography';
-import Flamelink from '../components/Flamelink';
+import React, { Component, Fragment } from 'react';
+import FlameLinkComponentCreations from '../components/FlameLinkComponentCreations';
+import flamelinkApp from '../flamelink.js';
 
 class Info extends Component {
+    constructor() {
+        super();
+
+        global.schemaName = 'martenSchemaDemo';
+
+        this.state = {
+            schemaDetails: '',
+        }
+
+        flamelinkApp.schemas.getFields(global.schemaName, { fields: ['title', 'key', 'type', 'gridColumns', 'description', 'options'] })
+            .then(result => this.setState({
+                schemaDetails: result
+            }))
+    }
+
+    componentDidMount() {
+        document.title = 'Marten Tracker | Info';
+    }
+
     render() {
-        
+
         return (
             <div>
-                <Flamelink flamelinkApp={this.props.flamelinkApp}/>
-                <Typography variant='display1' align='center' gutterBottom>
-                    Info
-                </Typography>
-                <p id="flamelinkDemo"></p>
-          
+                <Fragment>
+                    <FlameLinkComponentCreations schemaDetails={this.state.schemaDetails} />
+                </Fragment>
+
             </div>
         );
     }

src/pages/QuizPage.js

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

src/pages/Report.js

@@ -2,6 +2,10 @@ import React, { Component } from 'react';
 import ReportForm from '../components/ReportForm';
 
 class Report extends Component {
+    componentDidMount() {
+        document.title = 'Marten Tracker | Report';
+    }
+
     render() {
         return (
             <ReportForm/>

src/pages/SightingList.js

@@ -2,6 +2,10 @@ import React, { Component } from 'react';
 import ViewSightings from '../components/ViewSightings.js';
 
 class Sighting extends Component {
+    componentDidMount() {
+        document.title = 'Marten Tracker | List';
+    }
+
     render() {
         return (
             <ViewSightings/>

src/pages/ViewMap.js

@@ -2,6 +2,10 @@ import React, { Component } from 'react';
 import GoogleMap from '../components/SightingMap';
 
 class Sighting extends Component {
+    componentDidMount() {
+        document.title = 'Marten Tracker | Map';
+    }
+
     render() {
         return (
             <div className='sighting-map'>