Merge pull request #74 from alDuncanson/homePageRedo

Home page redo

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;