From 4afa4395d71a78c408384326e684e2b97483f7d2 Mon Sep 17 00:00:00 2001
From: ajmaley <maleya@mail.gvsu.edu>
Date: Sun, 16 Dec 2018 14:04:02 -0500
Subject: [PATCH] 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                        |  5 --
 .../FlameLinkCollectionComponentCreations.js  | 23 +-----
 .../flamelink/FlameLinkComponentCreations.js  | 32 +++++++--
 .../flamelink/FlameLinkStructure.js           |  8 +--
 src/pages/Home.js                             | 71 +++++++++++++++----
 src/pages/Info.js                             | 38 ----------
 6 files changed, 90 insertions(+), 87 deletions(-)
 delete mode 100644 src/pages/Info.js

diff --git a/src/components/Main.js b/src/components/Main.js
index 5cce9a7..0464a95 100644
--- a/src/components/Main.js
+++ b/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>
diff --git a/src/components/flamelink/FlameLinkCollectionComponentCreations.js b/src/components/flamelink/FlameLinkCollectionComponentCreations.js
index 587913d..11c9e1e 100644
--- a/src/components/flamelink/FlameLinkCollectionComponentCreations.js
+++ b/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 = {
-    classes: PropTypes.object.isRequired,
-};
-
-export default withStyles(styles)(FlameLinkCollectionComponentCreations);
\ No newline at end of file
+export default FlameLinkCollectionComponentCreations;
\ No newline at end of file
diff --git a/src/components/flamelink/FlameLinkComponentCreations.js b/src/components/flamelink/FlameLinkComponentCreations.js
index d50d05d..4af452a 100644
--- a/src/components/flamelink/FlameLinkComponentCreations.js
+++ b/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>
-                {this.getSchemaFieldData(this.props.schemaDetails, this.props.schemaType)}
-            </Grid>
+            <Paper className={classes.root} elevation={4}>
+                <Grid container>
+                    {this.getSchemaFieldData(this.props.schemaDetails, this.props.schemaType)}
+                </Grid>
+            </Paper>
         );
     }
 }
 
-export default FlameLinkComponentCreations;
\ No newline at end of file
+export default withStyles(styles)(FlameLinkComponentCreations);
\ No newline at end of file
diff --git a/src/components/flamelink/FlameLinkStructure.js b/src/components/flamelink/FlameLinkStructure.js
index dc6482e..a30e49d 100644
--- a/src/components/flamelink/FlameLinkStructure.js
+++ b/src/components/flamelink/FlameLinkStructure.js
@@ -15,8 +15,8 @@ const styles = theme => ({
     });
 
 class FlameLinkStructure extends Component {
-    constructor() {
-        super();
+    constructor(props) {
+        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>
         );
     }
diff --git a/src/pages/Home.js b/src/pages/Home.js
index 0e09315..307e9ce 100644
--- a/src/pages/Home.js
+++ b/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() {
-        super();
-
-        global.schemaName = 'martenHome';
+    constructor(props) {
+        super(props);
 
         this.state = {
-            schemaDetails: '',
-            schemaType: '',
+            schemaNameHistory: 'martenHomeHistory',
+            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);
diff --git a/src/pages/Info.js b/src/pages/Info.js
deleted file mode 100644
index 5ce36b5..0000000
--- a/src/pages/Info.js
+++ /dev/null
@@ -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;