Initial feature commit.

src/components/flamelink/FlameLinkCollection.js

@@ -1,34 +1,31 @@
-import React, { Component} from 'react';
+import React, { Component } from 'react';
 import flamelinkApp from '../../utilities/flamelink.js';
 import FlameLinkCollectionComponentCreations from './FlameLinkCollectionComponentCreations';
 
 class FlameLinkCollection extends Component {
-    constructor() {
-        super();
-        
-
-        this.state = {
+    state = {
         schemaContent: '',
     }
 
-        flamelinkApp.content.get(global.schemaName)
+    componentDidMount() {
+        flamelinkApp.content.get(this.props.schemaName)
             .then(result => this.setState({
                 schemaContent: result
             }))
     }
 
-    getCollectionContent(schemaData){
+    getCollectionContent(schemaData) {
         var arr2 = [];
         var collectionInfo = [schemaData, this.state.schemaContent];
-        for (var val in this.state.schemaContent){
+        for (var val in this.state.schemaContent) {
             arr2[this.state.schemaContent[val]['order']] = val;
         }
         return arr2.map(this.getCollectionComponentInfo, collectionInfo);
     }
 
-    getCollectionComponentInfo(num){
+    getCollectionComponentInfo(num) {
         var arr3 = [];
-        for (var val in this[0]){
+        for (var val in this[0]) {
             arr3.push(val);
         }
         return <FlameLinkCollectionComponentCreations schemaData={this[0]} schemaContent={this[1][num]} arr={arr3} key={num} />
@@ -37,16 +34,16 @@ class FlameLinkCollection extends Component {
     countProperties(obj) {
         var count = 0;
 
-    for(var prop in obj) {
-        if(obj.hasOwnProperty(prop))
+        for (var prop in obj) {
+            if (obj.hasOwnProperty(prop))
                 ++count;
         }
 
         return count;
-}
+    }
 
     render() {
-        return(
+        return (
             <div>
                 {this.getCollectionContent(this.props.schemaData)}
             </div>

src/components/flamelink/FlameLinkCollectionStructure.js

@@ -1,4 +1,4 @@
-import React, { Component} from 'react';
+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';
@@ -12,69 +12,67 @@ const styles = theme => ({
         paddingLeft: 20,
         paddingTop: 20,
     },
-    });
+});
 
 class FlameLinkCollectionStructure extends Component {
-    constructor() {
-        super();
-        
-        global.mediaID = '';
-
-        this.state = {
+    state = {
         schemaContent: '',
     }
 
-        flamelinkApp.content.get(global.schemaName)
+    componentDidMount() {
+        global.mediaID = '';
+
+        flamelinkApp.content.get(this.props.schemaName)
             .then(result => this.setState({
                 schemaContent: result
             }))
     }
 
-    getContent(content, field, key, type, description){
-        if (type === 'text'){
-                if(description === 'h1'){
+    getContent(content, field, key, type, description) {
+        if (type === 'text') {
+            if (description === 'h1') {
                 return (
                     <Typography variant='display4' id={key}>
                         {content[key]}
                     </Typography>
                 )
             }
-                if(description === 'h2'){
+            if (description === 'h2') {
                 return (
                     <Typography variant='display3' id={key}>
                         {content[key]}
                     </Typography>
                 )
             }
-                if(description === 'h3'){
+            if (description === 'h3') {
                 return (
                     <Typography variant='display2' id={key}>
                         {content[key]}
                     </Typography>
                 )
             }
-                if(description === 'h4'){
+            if (description === 'h4') {
                 return (
                     <Typography variant='display1' id={key}>
                         {content[key]}
                     </Typography>
                 )
             }
-                if(description === 'h5'){
+            if (description === 'h5') {
                 return (
                     <Typography variant='headline' id={key}>
                         {content[key]}
                     </Typography>
                 )
             }
-                if(description === 'h6'){
+            if (description === 'h6') {
                 return (
                     <Typography variant='title' id={key}>
                         {content[key]}
                     </Typography>
                 )
             }
-                else{
+            else {
                 return (
                     <Typography variant='body2' component="p" id={key}>
                         {content[key]}
@@ -82,25 +80,25 @@ class FlameLinkCollectionStructure extends Component {
                 )
             }
         }
-            if(type === 'textarea'){
+        if (type === 'textarea') {
             return (
                 <Typography variant='body2' component="p" id={key}>
                     {content[key]}
                 </Typography>
             )
         }
-            if (type === 'media'){
-                for (var val in content[key]){
+        if (type === 'media') {
+            for (var val in content[key]) {
                 global.mediaID = content[key][val];
-                    return <FlameLinkImage/>
+                return <FlameLinkImage />
             }
         }
-            if (type === 'fieldset'){
-                if(content === ''){
+        if (type === 'fieldset') {
+            if (content === '') {
                 return
             }
-                else{
-                    return <FlameLinkFieldSet field={content[key]} field2={field.options}/>
+            else {
+                return <FlameLinkFieldSet field={content[key]} field2={field.options} />
             }
         }
     }
@@ -112,7 +110,7 @@ class FlameLinkCollectionStructure extends Component {
         const md = this.props.field.gridColumns.md;
         const sm = this.props.field.gridColumns.sm;
         const xs = this.props.field.gridColumns.xs;
-        return(
+        return (
             <Grid item lg={lg} md={md} sm={sm} xs={xs} className={classes.flamelinkItem}>
                 {this.getContent(this.props.schemaContent, this.props.field, this.props.field.key, this.props.type, this.props.field.description)}
             </Grid>

src/components/flamelink/FlameLinkComponentCreations.js

@@ -1,37 +1,37 @@
-import React, { Component} from 'react';
+import React, { Component } from 'react';
 import FlameLinkStructure from './FlameLinkStructure';
 import FlameLinkCollection from './FlameLinkCollection';
 import Grid from '@material-ui/core/Grid';
 
 class FlameLinkComponentCreations extends Component {
 
-    getSchemaFieldData(schemaData, schemaType){
+    getSchemaFieldData(schemaData, schemaType) {
         var arr = [];
-        for (var val in schemaData){
+        for (var val in schemaData) {
             arr.push(val);
         }
 
-        if(schemaType === 'single'){
+        if (schemaType === 'single') {
             return arr.map(this.createSingleTypeSchemaComponents, schemaData);
         }
-        if(schemaType === 'collection'){
+        if (schemaType === 'collection') {
             return this.createCollectionTypeSchemaComponents(schemaData);
         }
-        else{
+        else {
             return
         }
     }
 
-    createSingleTypeSchemaComponents(num){
+    createSingleTypeSchemaComponents(num) {
         return <FlameLinkStructure schemaData={this} field={this[num]} type={this[num].type} key={this[num].key} />
     }
 
-    createCollectionTypeSchemaComponents(schemaData){  
-        return <FlameLinkCollection schemaData={schemaData} />
+    createCollectionTypeSchemaComponents = schemaData => {
+        return <FlameLinkCollection schemaName={this.props.schemaName} schemaData={schemaData} />
     }
 
     render() {
-        return(
+        return (
             <Grid container>
                 {this.getSchemaFieldData(this.props.schemaDetails, this.props.schemaType)}
             </Grid>

src/pages/About.js

@@ -1,43 +1,72 @@
 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() {
-        super();
-
-        global.schemaName = 'martenAbout';
-
-        this.state = {
-          schemaDetails: '',
-          schemaType: '',
-        }
-
-        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
-        }))
+    state = {
+        researcherSchemaName: 'martenAbout',
+        developerSchemaName: 'martenAboutDev',
+        researcherSchemaDetails: '',
+        researcherSchemaType: '',
+        developerSchemaDetails: '',
+        developerSchemaType: ''
     }
 
     componentDidMount() {
         document.title = 'Marten Tracker | About';
+        
+        
+        // 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}>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);