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

Feature/developers in about
2018-12-10 19:01:56 -05:00 · 2018-12-10 19:01:56 -05:00 · fa84b6ce71
parent 0d6186a3ba d879236e67
commit fa84b6ce71
7 changed files with 237 additions and 164 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -12513,9 +12513,9 @@
      }
    },
    "react-cookie": {
-      "version": "3.0.7",
-      "resolved": "https://registry.npmjs.org/react-cookie/-/react-cookie-3.0.7.tgz",
-      "integrity": "sha512-c4lGOqIPC54kUocE7kbuqZNeIdXtZGzXQMA7BSWhaJ/5tWeoW5fJ7mF/pR+rU5fYDF9kktTHCIbovwSsNYblOg==",
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/react-cookie/-/react-cookie-3.0.8.tgz",
+      "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",
-          "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.2.0.tgz",
-          "integrity": "sha512-3IascCRfaEkbmHjJnUxWSspIUE1okLPjGTMVXW8zraUo1t3yg1BadKAxAGILHwgoBzmMnzrgeeaDGBvpuPz6dA==",
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.2.1.tgz",
+          "integrity": "sha512-TFsu3TV3YLY+zFTZDrN8L2DTFanObwmBLpWvJs1qfUuEQ5bTAdFcwfx2T/bsCXfM9QHSLvjfP+nihEl0yvozxw==",
          "requires": {
            "react-is": "^16.3.2"
          }
--- a/package.json
+++ b/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",
--- a/src/components/flamelink/FlameLinkCollection.js
+++ b/src/components/flamelink/FlameLinkCollection.js
@ -1,55 +1,61 @@
-import React, { Component} from 'react';
+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() {
-        super();
-        
+    constructor(props) {
+        super(props);
        
        this.state = {
          schemaContent: '',
        }

-        flamelinkApp.content.get(global.schemaName)
+        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){
-            arr2[this.state.schemaContent[val]['order']] = val;
+        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);
    }

-    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} />
    }

    countProperties(obj) {
-    var count = 0;
+        var count = 0;

-    for(var prop in obj) {
-        if(obj.hasOwnProperty(prop))
-            ++count;
+        for (var prop in obj) {
+            if (obj.hasOwnProperty(prop))
+                ++count;
+        }
+
+        return count;
    }

-    return count;
-}
-
    render() {
-        return(
-            <div>
+        return (
+            <Grid container>
                {this.getCollectionContent(this.props.schemaData)}
-            </div>
+            </Grid>
        );
    }
 }
--- a/src/components/flamelink/FlameLinkCollectionComponentCreations.js
+++ b/src/components/flamelink/FlameLinkCollectionComponentCreations.js
@ -1,25 +1,48 @@
-import React, { Component} from 'react';
+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 {

-    createCollectionEntries(schemaData, schemaContent, arr){
+    createCollectionEntries(schemaData, schemaContent, arr) {
        var collectionInfo = [schemaData, schemaContent];
        return arr.map(this.createCollectionComponents, collectionInfo);
    }

-    createCollectionComponents(num){
-        return <FlameLinkCollectionStructure schemaData={this[0]} schemaContent={this[1]} field={this[0][num]} type={this[0][num].type} key={this[0][num].key} />
+    createCollectionComponents(num) {
+        return (
+            <FlameLinkCollectionStructure schemaData={this[0]} schemaContent={this[1]} field={this[0][num]} type={this[0][num].type} key={this[0][num].key} />
+        );
    }

    render() {
-        return(
+        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);
--- a/src/components/flamelink/FlameLinkCollectionStructure.js
+++ b/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';
@ -7,102 +7,100 @@ import FlameLinkImage from './FlameLinkImage';
 import FlameLinkFieldSet from './FlameLinkFieldSet';

 const styles = theme => ({
-        flamelinkItem: {
-            paddingRight: 20,
-            paddingLeft: 20,
-            paddingTop: 20,
-        },
-    });
+    flamelinkItem: {
+        paddingRight: 20,
+        paddingLeft: 20,
+        paddingTop: 20,
+    },
+});

 class FlameLinkCollectionStructure extends Component {
-    constructor() {
-        super();
+    state = {
+        schemaContent: '',
+    }

+    componentDidMount() {
        global.mediaID = '';

-        this.state = {
-          schemaContent: '',
+        flamelinkApp.content.get(this.props.schemaName)
+            .then(result => this.setState({
+                schemaContent: result
+            }))
+    }
+
+    getContent(content, field, key, type, description) {
+        if (type === 'text') {
+            if (description === 'h1') {
+                return (
+                    <Typography variant='display4' id={key}>
+                        {content[key]}
+                    </Typography>
+                )
+            }
+            if (description === 'h2') {
+                return (
+                    <Typography variant='display3' id={key}>
+                        {content[key]}
+                    </Typography>
+                )
+            }
+            if (description === 'h3') {
+                return (
+                    <Typography variant='display2' id={key}>
+                        {content[key]}
+                    </Typography>
+                )
+            }
+            if (description === 'h4') {
+                return (
+                    <Typography variant='display1' id={key}>
+                        {content[key]}
+                    </Typography>
+                )
+            }
+            if (description === 'h5') {
+                return (
+                    <Typography variant='headline' id={key}>
+                        {content[key]}
+                    </Typography>
+                )
+            }
+            if (description === 'h6') {
+                return (
+                    <Typography variant='title' id={key}>
+                        {content[key]}
+                    </Typography>
+                )
+            }
+            else {
+                return (
+                    <Typography variant='body2' component="p" id={key}>
+                        {content[key]}
+                    </Typography>
+                )
+            }
        }
-
-        flamelinkApp.content.get(global.schemaName)
-        .then(result => this.setState({
-          schemaContent: result
-        }))
-      }
-
-    getContent(content, field, key, type, description){
-        if (type === 'text'){
-                if(description === 'h1'){
-                    return  (
-                            <Typography variant='display4' id={key}>
-                                {content[key]}
-                            </Typography>
-                            )                
-                }
-                if(description === 'h2'){
-                    return  (
-                            <Typography variant='display3' id={key}>
-                                {content[key]}
-                            </Typography>
-                            )                
-                }
-                if(description === 'h3'){
-                    return  (
-                            <Typography variant='display2' id={key}>
-                                {content[key]}
-                            </Typography>
-                            )                
-                }
-                if(description === 'h4'){
-                    return  (
-                            <Typography variant='display1' id={key}>
-                                {content[key]}
-                            </Typography>
-                            )                
-                }
-                if(description === 'h5'){
-                    return  (
-                            <Typography variant='headline' id={key}>
-                                {content[key]}
-                            </Typography>
-                            )                
-                }
-                if(description === 'h6'){
-                    return  (
-                            <Typography variant='title' id={key}>
-                                {content[key]}
-                            </Typography>
-                            )                
-                }
-                else{
-                    return  (
-                            <Typography variant='body2' component="p" id={key}>
-                                {content[key]}
-                            </Typography>
-                            )
-                }
+        if (type === 'textarea') {
+            return (
+                <Typography variant='body2' component="p" id={key}>
+                    {content[key]}
+                </Typography>
+            )
+        }
+        if (type === 'media') {
+            for (var val in content[key]) {
+                global.mediaID = content[key][val];
+                return <FlameLinkImage />
            }
-            if(type === 'textarea'){
-                return  (
-                        <Typography variant='body2' component="p" id={key}>
-                            {content[key]}
-                        </Typography>
-                        )               
+        }
+        if (type === 'fieldset') {
+            if (content === '') {
+                return
            }
-            if (type === 'media'){
-                for (var val in content[key]){
-                    global.mediaID = content[key][val];
-                    return <FlameLinkImage/>
-                } 
-            }
-            if (type === 'fieldset'){
-                if(content === ''){
-                    return
-                }
-                else{
-                    return <FlameLinkFieldSet field={content[key]} field2={field.options}/>
-                }
+            else {
+                return <FlameLinkFieldSet field={content[key]} field2={field.options} />
            }
+        }
    }

    render() {
@ -112,9 +110,9 @@ 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)}
+                {this.getContent(this.props.schemaContent, this.props.field, this.props.field.key, this.props.type, this.props.field.description)}
            </Grid>
        );
    }
--- a/src/components/flamelink/FlameLinkComponentCreations.js
+++ b/src/components/flamelink/FlameLinkComponentCreations.js
@ -1,40 +1,40 @@
-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(
-                <Grid container>
-                    {this.getSchemaFieldData(this.props.schemaDetails, this.props.schemaType)}
-                </Grid>
+        return (
+            <Grid container>
+                {this.getSchemaFieldData(this.props.schemaDetails, this.props.schemaType)}
+            </Grid>
        );
    }
 }
--- a/src/pages/About.js
+++ b/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() {
-        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 = {
+        summarySchemaName: 'martenAboutSummary',
+        researcherSchemaName: 'martenAbout',
+        developerSchemaName: 'martenAboutDevelopers',
+        summarySchemaDetails: '',
+        summarySchemaType: '',
+        researcherSchemaDetails: '',
+        researcherSchemaType: '',
+        developerSchemaDetails: '',
+        developerSchemaType: ''
    }

    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}/>
-                </Fragment>
-            </div>
+            <Fragment>
+                <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>
        );
    }
 }

-export default About;
+About.propTypes = {
+    classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(About);