Merge pull request #68 from alDuncanson/feature/developers-in-about

Feature/developers in about

package-lock.json

@@ -12513,9 +12513,9 @@
       }
     },
     "react-cookie": {
-      "version": "3.0.7",
+      "version": "3.0.8",
-      "resolved": "https://registry.npmjs.org/react-cookie/-/react-cookie-3.0.7.tgz",
+      "resolved": "https://registry.npmjs.org/react-cookie/-/react-cookie-3.0.8.tgz",
-      "integrity": "sha512-c4lGOqIPC54kUocE7kbuqZNeIdXtZGzXQMA7BSWhaJ/5tWeoW5fJ7mF/pR+rU5fYDF9kktTHCIbovwSsNYblOg==",
+      "integrity": "sha512-Gdop2Cf2pBFA0r4L9l5DRghKsPVMNKRM3x2aeyJ4JSaENpWWPP4v9LJvvtxXs3AboOGCuMj19oUw04Z9cVQQTg==",
       "requires": {
         "@types/hoist-non-react-statics": "^3.0.1",
         "hoist-non-react-statics": "^3.0.0",
@@ -12523,9 +12523,9 @@
       },
       "dependencies": {
         "hoist-non-react-statics": {
-          "version": "3.2.0",
+          "version": "3.2.1",
-          "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.2.0.tgz",
+          "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.2.1.tgz",
-          "integrity": "sha512-3IascCRfaEkbmHjJnUxWSspIUE1okLPjGTMVXW8zraUo1t3yg1BadKAxAGILHwgoBzmMnzrgeeaDGBvpuPz6dA==",
+          "integrity": "sha512-TFsu3TV3YLY+zFTZDrN8L2DTFanObwmBLpWvJs1qfUuEQ5bTAdFcwfx2T/bsCXfM9QHSLvjfP+nihEl0yvozxw==",
           "requires": {
             "react-is": "^16.3.2"
           }

package.json

@@ -17,7 +17,7 @@
     "material-ui-icons": "^1.0.0-beta.36",
     "moment": "^2.22.2",
     "react": "^16.5.1",
-    "react-cookie": "^3.0.7",
+    "react-cookie": "^3.0.8",
     "react-dom": "^16.5.1",
     "react-image-gallery": "^0.8.12",
     "react-quiz-component": "0.2.0",

src/components/flamelink/FlameLinkCollection.js

@@ -1,17 +1,17 @@
 import React, { Component } from 'react';
 import flamelinkApp from '../../utilities/flamelink.js';
+import Grid from '@material-ui/core/Grid';
 import FlameLinkCollectionComponentCreations from './FlameLinkCollectionComponentCreations';
 
 class FlameLinkCollection extends Component {
-    constructor() {
+    constructor(props) {
-        super();
+        super(props);
-        
         
         this.state = {
           schemaContent: '',
         }
 
-        flamelinkApp.content.get(global.schemaName)
+        flamelinkApp.content.get(this.props.schemaName)
         .then(result => this.setState({
           schemaContent: result
         }))
@@ -21,8 +21,13 @@ class FlameLinkCollection extends Component {
         var arr2 = [];
         var collectionInfo = [schemaData, this.state.schemaContent];
         for (var val in this.state.schemaContent) {
+            if ( this.state.schemaContent[val].hasOwnProperty('order') ) {   
                 arr2[this.state.schemaContent[val]['order']] = val;
             }
+            else{
+                arr2.push(val);
+            }
+        }
         return arr2.map(this.getCollectionComponentInfo, collectionInfo);
     }
 
@@ -31,6 +36,7 @@ class FlameLinkCollection extends Component {
         for (var val in this[0]) {
             arr3.push(val);
         }
+        
         return <FlameLinkCollectionComponentCreations schemaData={this[0]} schemaContent={this[1][num]} arr={arr3} key={num} />
     }
 
@@ -47,9 +53,9 @@ class FlameLinkCollection extends Component {
 
     render() {
         return (
-            <div>
+            <Grid container>
                 {this.getCollectionContent(this.props.schemaData)}
-            </div>
+            </Grid>
         );
     }
 }

src/components/flamelink/FlameLinkCollectionComponentCreations.js

@@ -1,6 +1,19 @@
 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 {
 
@@ -10,16 +23,26 @@ class FlameLinkCollectionComponentCreations extends Component {
     }
 
     createCollectionComponents(num) {
-        return <FlameLinkCollectionStructure schemaData={this[0]} schemaContent={this[1]} field={this[0][num]} type={this[0][num].type} key={this[0][num].key} />
+        return (
+            <FlameLinkCollectionStructure schemaData={this[0]} schemaContent={this[1]} field={this[0][num]} type={this[0][num].type} key={this[0][num].key} />
+        );
     }
 
     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>
         );
     }
 }
 
-export default FlameLinkCollectionComponentCreations;
+FlameLinkCollectionComponentCreations.propTypes = {
+    classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(FlameLinkCollectionComponentCreations);

src/components/flamelink/FlameLinkCollectionStructure.js

@@ -15,16 +15,14 @@ const styles = theme => ({
 });
 
 class FlameLinkCollectionStructure extends Component {
-    constructor() {
+    state = {
-        super();
-        
-        global.mediaID = '';
-
-        this.state = {
         schemaContent: '',
     }
 
-        flamelinkApp.content.get(global.schemaName)
+    componentDidMount() {
+        global.mediaID = '';
+
+        flamelinkApp.content.get(this.props.schemaName)
             .then(result => this.setState({
                 schemaContent: result
             }))

src/components/flamelink/FlameLinkComponentCreations.js

@@ -26,8 +26,8 @@ class FlameLinkComponentCreations extends Component {
         return <FlameLinkStructure schemaData={this} field={this[num]} type={this[num].type} key={this[num].key} />
     }
 
-    createCollectionTypeSchemaComponents(schemaData){  
+    createCollectionTypeSchemaComponents = schemaData => {
-        return <FlameLinkCollection schemaData={schemaData} />
+        return <FlameLinkCollection schemaName={this.props.schemaName} schemaData={schemaData} />
     }
 
     render() {

src/pages/About.js

@@ -1,43 +1,89 @@
 import React, { Component, Fragment } from 'react';
 import FlameLinkComponentCreations from '../components/flamelink/FlameLinkComponentCreations';
 import flamelinkApp from '../utilities/flamelink.js';
+import PropTypes from 'prop-types';
+import { Typography } from '@material-ui/core';
+import { withStyles } from '@material-ui/core/styles';
+
+const styles = theme => ({
+    header: {
+        paddingRight: 20,
+        paddingLeft: 20,
+        paddingTop: 20,
+    },
+});
 
 class About extends Component {
-    constructor() {
+    state = {
-        super();
+        summarySchemaName: 'martenAboutSummary',
-
+        researcherSchemaName: 'martenAbout',
-        global.schemaName = 'martenAbout';
+        developerSchemaName: 'martenAboutDevelopers',
-
+        summarySchemaDetails: '',
-        this.state = {
+        summarySchemaType: '',
-          schemaDetails: '',
+        researcherSchemaDetails: '',
-          schemaType: '',
+        researcherSchemaType: '',
-        }
+        developerSchemaDetails: '',
-
+        developerSchemaType: ''
-        flamelinkApp.schemas.getFields(global.schemaName, { fields: [ 'title', 'key', 'type', 'gridColumns', 'description', 'options' ] })
-        .then(result => this.setState({
-          schemaDetails: result
-        }))
-        
-        flamelinkApp.schemas.get(global.schemaName)
-        .then(result => this.setState({
-          schemaType: result.type
-        }))
     }
 
     componentDidMount() {
         document.title = 'Marten Tracker | About';
+
+
+        // Pulling in schema details for summary
+        flamelinkApp.schemas.getFields(this.state.summarySchemaName, { fields: ['title', 'key', 'type', 'gridColumns', 'description', 'options'] })
+            .then(result => this.setState({
+                summarySchemaDetails: result
+            }))
+
+        flamelinkApp.schemas.get(this.state.summarySchemaName)
+            .then(result => this.setState({
+                summarySchemaType: result.type
+            }))
+        
+        
+        // Pulling in schema details for researchers
+        flamelinkApp.schemas.getFields(this.state.researcherSchemaName, { fields: ['title', 'key', 'type', 'gridColumns', 'description', 'options'] })
+            .then(result => this.setState({
+                researcherSchemaDetails: result
+            }))
+
+        flamelinkApp.schemas.get(this.state.researcherSchemaName)
+            .then(result => this.setState({
+                researcherSchemaType: result.type
+            }))
+
+
+        // Pulling in schema details for developers
+        flamelinkApp.schemas.getFields(this.state.developerSchemaName, { fields: ['title', 'key', 'type', 'gridColumns', 'description', 'options'] })
+            .then(result => this.setState({
+                developerSchemaDetails: result
+            }))
+
+        flamelinkApp.schemas.get(this.state.developerSchemaName)
+            .then(result => this.setState({
+                developerSchemaType: result.type
+            }))
     }
 
     render() {
+        const { classes } = this.props;
 
         return (
-            <div>
             <Fragment>
-                    <FlameLinkComponentCreations schemaDetails = {this.state.schemaDetails} schemaType = {this.state.schemaType}/>
+                <Typography variant="display1" className={classes.header}>Introduction</Typography>
+                <FlameLinkComponentCreations schemaDetails={this.state.summarySchemaDetails} schemaType={this.state.summarySchemaType} schemaName={this.state.summarySchemaName} />
+                <Typography variant="display1" className={classes.header}>Researchers</Typography>
+                <FlameLinkComponentCreations schemaDetails={this.state.researcherSchemaDetails} schemaType={this.state.researcherSchemaType} schemaName={this.state.researcherSchemaName} />
+                <Typography variant="display1" className={classes.header}>Developers</Typography>
+                <FlameLinkComponentCreations schemaDetails={this.state.developerSchemaDetails} schemaType={this.state.developerSchemaType} schemaName={this.state.developerSchemaName} />
             </Fragment>
-            </div>
         );
     }
 }
 
-export default About;
+About.propTypes = {
+    classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(About);