Added multiple schemas to home page, removed similar species gallery and added similar species images to correct home page section. Changed the Paper stylings for the About and Home sections for consistency.

src/components/Main.js

@@ -279,11 +279,6 @@ class ResponsiveDrawer extends React.Component {
                                     <ListItemText inset primary="Martens by Day" />
                                 </ListItem>
                             </Link>
-                            <Link to={{ pathname: 'galleries-species-similar-to-martens', state: { galleryName: 'similarSpecies' } }}>
-                                <ListItem button className={classes.nested}>
-                                    <ListItemText inset primary="Species Similar to Martens" />
-                                </ListItem>
-                            </Link>
                         </List>
                     </Collapse>
                 </List>

src/components/flamelink/FlameLinkCollectionComponentCreations.js

@@ -1,19 +1,6 @@
 import React, { Component } from 'react';
 import Grid from '@material-ui/core/Grid';
 import FlameLinkCollectionStructure from './FlameLinkCollectionStructure';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
-import Paper from '@material-ui/core/Paper';
-
-const styles = theme => ({
-    root: {
-        ...theme.mixins.gutters(),
-        margin: theme.spacing.unit * 2,
-        paddingTop: theme.spacing.unit * 2,
-        paddingBottom: theme.spacing.unit * 2,
-        width: '100%'
-    },
-});
 
 class FlameLinkCollectionComponentCreations extends Component {
 
@@ -29,20 +16,12 @@ class FlameLinkCollectionComponentCreations extends Component {
     }
 
     render() {
-        const { classes } = this.props;
-
         return (
-            <Paper className={classes.root} elevation={4}>
                 <Grid container>
                     {this.createCollectionEntries(this.props.schemaData, this.props.schemaContent, this.props.arr)}
                 </Grid>
-            </Paper>
         );
     }
 }
 
-FlameLinkCollectionComponentCreations.propTypes = {
+export default FlameLinkCollectionComponentCreations;
-    classes: PropTypes.object.isRequired,
-};
-
-export default withStyles(styles)(FlameLinkCollectionComponentCreations);

src/components/flamelink/FlameLinkComponentCreations.js

@@ -2,17 +2,33 @@ import React, { Component } from 'react';
 import FlameLinkStructure from './FlameLinkStructure';
 import FlameLinkCollection from './FlameLinkCollection';
 import Grid from '@material-ui/core/Grid';
+import { withStyles } from '@material-ui/core/styles';
+import Paper from '@material-ui/core/Paper';
+
+const styles = theme => ({
+    root: {
+        ...theme.mixins.gutters(),
+        margin: theme.spacing.unit * 2,
+        paddingTop: theme.spacing.unit * 2,
+        paddingBottom: theme.spacing.unit * 2,
+        width: '100%'
+    },
+});
 
 class FlameLinkComponentCreations extends Component {
 
     getSchemaFieldData(schemaData, schemaType) {
         var arr = [];
+        var arr2 = [];
         for (var val in schemaData) {
             arr.push(val);
         }
 
+        arr2.push(schemaData);
+        arr2.push(this.props.schemaName);
+
         if (schemaType === 'single') {
-            return arr.map(this.createSingleTypeSchemaComponents, schemaData);
+            return arr.map(this.createSingleTypeSchemaComponents, arr2);
         }
         if (schemaType === 'collection') {
             return this.createCollectionTypeSchemaComponents(schemaData);
@@ -23,7 +39,7 @@ class FlameLinkComponentCreations extends Component {
     }
 
     createSingleTypeSchemaComponents(num) {
-        return <FlameLinkStructure schemaData={this} field={this[num]} type={this[num].type} key={this[num].key} />
+        return <FlameLinkStructure schemaName={this[1]} schemaData={this[0]} field={this[0][num]} type={this[0][num].type} key={this[0][num].key} />
     }
 
     createCollectionTypeSchemaComponents = schemaData => {
@@ -31,12 +47,16 @@ class FlameLinkComponentCreations extends Component {
     }
 
     render() {
+        const { classes } = this.props;
+
         return (
-            <Grid container>
+            <Paper className={classes.root} elevation={4}>
-                {this.getSchemaFieldData(this.props.schemaDetails, this.props.schemaType)}
+                <Grid container>
-            </Grid>
+                    {this.getSchemaFieldData(this.props.schemaDetails, this.props.schemaType)}
+                </Grid>
+            </Paper>
         );
     }
 }
 
-export default FlameLinkComponentCreations;
+export default withStyles(styles)(FlameLinkComponentCreations);

src/components/flamelink/FlameLinkStructure.js

@@ -15,8 +15,8 @@ const styles = theme => ({
     });
 
 class FlameLinkStructure extends Component {
-    constructor() {
+    constructor(props) {
-        super();
+        super(props);
         
         global.mediaID = '';
 
@@ -24,7 +24,7 @@ class FlameLinkStructure extends Component {
           schemaContent: '',
         }
 
-        flamelinkApp.content.get(global.schemaName)
+        flamelinkApp.content.get(this.props.schemaName)
         .then(result => this.setState({
           schemaContent: result
         }))
@@ -114,7 +114,7 @@ class FlameLinkStructure extends Component {
         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)}
+                {this.getContent(this.props.field, this.props.field.key, this.props.type, this.props.field.description)}
             </Grid>
         );
     }

src/pages/Home.js

@@ -3,26 +3,63 @@ import FlameLinkComponentCreations from '../components/flamelink/FlameLinkCompon
 import FlameLinkCollectionGallery from '../components/flamelink/FlameLinkCollectionGallery';
 import flamelinkApp from '../utilities/flamelink';
 import Grid from '@material-ui/core/Grid';
+import { Typography } from '@material-ui/core';
+import { withStyles } from '@material-ui/core/styles';
+
+const styles = theme => ({
+    header: {
+        paddingRight: 20,
+        paddingLeft: 20,
+        paddingTop: 20,
+    },
+});
 
 class Home extends Component {
-    constructor() {
+    constructor(props) {
-        super();
+        super(props);
-
-        global.schemaName = 'martenHome';
 
         this.state = {
-            schemaDetails: '',
+            schemaNameHistory: 'martenHomeHistory',
-            schemaType: '',
+            schemaDetailsHistory: '',
+            schemaTypeHistory: '',
+
+            schemaNameInformation: 'martenHomeInformation',
+            schemaDetailsInformation: '',
+            schemaTypeInformation: '',
+
+            schemaNameSimilarSpecies: 'martenHomeSimilarSpecies',
+            schemaDetailsSimilarSpecies: '',
+            schemaTypeSimilarSpecies: '',
         }
 
-        flamelinkApp.schemas.getFields(global.schemaName, { fields: [ 'title', 'key', 'type', 'gridColumns', 'description', 'options'] })
+        flamelinkApp.schemas.getFields(this.state.schemaNameHistory, { fields: [ 'title', 'key', 'type', 'gridColumns', 'description', 'options'] })
             .then(result => this.setState({
-                schemaDetails: result
+                schemaDetailsHistory: result
             }))
 
-        flamelinkApp.schemas.get(global.schemaName)
+        flamelinkApp.schemas.get(this.state.schemaNameHistory)
             .then(result => this.setState({
-              schemaType: result.type
+              schemaTypeHistory: result.type
+            }))
+
+        flamelinkApp.schemas.getFields(this.state.schemaNameInformation, { fields: [ 'title', 'key', 'type', 'gridColumns', 'description', 'options'] })
+            .then(result => this.setState({
+                schemaDetailsInformation: result
+            }))
+
+        flamelinkApp.schemas.get(this.state.schemaNameInformation)
+            .then(result => this.setState({
+              schemaTypeInformation: result.type
+            }))
+
+        flamelinkApp.schemas.getFields(this.state.schemaNameSimilarSpecies, { fields: [ 'title', 'key', 'type', 'gridColumns', 'description', 'options'] })
+            .then(result => this.setState({
+                schemaDetailsSimilarSpecies: result
+            }))
+
+        flamelinkApp.schemas.get(this.state.schemaNameSimilarSpecies)
+            .then(result => this.setState({
+              schemaTypeSimilarSpecies: result.type
             }))
     }
 
@@ -31,13 +68,23 @@ class Home extends Component {
     }
 
     render() {
+        const { classes } = this.props;
+
         return (
             <Grid container>
                 <FlameLinkCollectionGallery galleryName={'martenHomeGallery'} showTitle={false}/>
-                <FlameLinkComponentCreations schemaDetails={this.state.schemaDetails} schemaType = {this.state.schemaType}/>
+
+                <Typography variant="display1" className={classes.header}>History of martens in Michigan’s Lower Peninsula</Typography>
+                <FlameLinkComponentCreations schemaDetails={this.state.schemaDetailsHistory} schemaType={this.state.schemaTypeHistory} schemaName={this.state.schemaNameHistory} />
+
+                <Typography variant="display1" className={classes.header}>Marten information</Typography>
+                <FlameLinkComponentCreations schemaDetails={this.state.schemaDetailsInformation} schemaType={this.state.schemaTypeInformation} schemaName={this.state.schemaNameInformation} />
+
+                <Typography variant="display1" className={classes.header}>Similar species that might be confused with martens in Michigan</Typography>
+                <FlameLinkComponentCreations schemaDetails={this.state.schemaDetailsSimilarSpecies} schemaType={this.state.schemaTypeSimilarSpecies} schemaName={this.state.schemaNameSimilarSpecies} />
             </Grid>
         );
     }
 }
 
-export default Home;
+export default withStyles(styles)(Home);

src/pages/Info.js

@@ -1,38 +0,0 @@
-import React, { Component, Fragment } from 'react';
-import FlameLinkComponentCreations from '../components/flamelink/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>
-                <Fragment>
-                    <FlameLinkComponentCreations schemaDetails={this.state.schemaDetails} />
-                </Fragment>
-
-            </div>
-        );
-    }
-}
-
-export default Info;