From 598f3bd0a0e340d44dba7a5c43a831fc6b5c7af6 Mon Sep 17 00:00:00 2001
From: ajmaley <maleya@mail.gvsu.edu>
Date: Fri, 23 Nov 2018 13:07:42 -0500
Subject: [PATCH] Added ability to handle collection type schemas

---
 src/components/FlameLinkCollection.js         |  47 +++++++
 .../FlameLinkCollectionComponentCreations.js  |  25 ++++
 .../FlameLinkCollectionStructure.js           | 128 ++++++++++++++++++
 src/components/FlameLinkComponentCreations.js |  24 +++-
 src/components/FlameLinkStructure.js          | 128 +++++++++---------
 src/pages/About.js                            |  13 +-
 src/pages/Home.js                             |  10 +-
 7 files changed, 300 insertions(+), 75 deletions(-)
 create mode 100644 src/components/FlameLinkCollection.js
 create mode 100644 src/components/FlameLinkCollectionComponentCreations.js
 create mode 100644 src/components/FlameLinkCollectionStructure.js

diff --git a/src/components/FlameLinkCollection.js b/src/components/FlameLinkCollection.js
new file mode 100644
index 0000000..ecb1b2b
--- /dev/null
+++ b/src/components/FlameLinkCollection.js
@@ -0,0 +1,47 @@
+import React, { Component} from 'react';
+import flamelinkApp from '../flamelink.js';
+import FlameLinkCollectionComponentCreations from './FlameLinkCollectionComponentCreations';
+
+class FlameLinkCollection extends Component {
+    constructor() {
+        super();
+        
+        global.mediaID = '';
+
+        this.state = {
+          schemaContent: '',
+        }
+
+        flamelinkApp.content.get(global.schemaName)
+        .then(result => this.setState({
+          schemaContent: result
+        }))
+      }
+
+    getCollectionContent(schemaData){
+        var arr2 = [];
+        var collectionInfo = [schemaData, this.state.schemaContent];
+        for (var val in this.state.schemaContent){
+            arr2.push(val);
+        }
+        return arr2.map(this.getCollectionComponentInfo, collectionInfo);
+    }
+
+    getCollectionComponentInfo(num){
+        var arr3 = [];
+        for (var val in this[0]){
+            arr3.push(val);
+        }
+        return <FlameLinkCollectionComponentCreations schemaData={this[0]} schemaContent={this[1][num]} arr={arr3} key={num} />
+    }
+
+    render() {
+        return(
+            <div>
+                {this.getCollectionContent(this.props.schemaData)}
+            </div>
+        );
+    }
+}
+
+export default FlameLinkCollection;
\ No newline at end of file
diff --git a/src/components/FlameLinkCollectionComponentCreations.js b/src/components/FlameLinkCollectionComponentCreations.js
new file mode 100644
index 0000000..1611c80
--- /dev/null
+++ b/src/components/FlameLinkCollectionComponentCreations.js
@@ -0,0 +1,25 @@
+import React, { Component} from 'react';
+import Grid from '@material-ui/core/Grid';
+import FlameLinkCollectionStructure from './FlameLinkCollectionStructure';
+
+class FlameLinkCollectionComponentCreations extends Component {
+
+    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} />
+    }
+
+    render() {
+        return(
+                <Grid container>
+                    {this.createCollectionEntries(this.props.schemaData, this.props.schemaContent, this.props.arr)}
+                </Grid>
+        );
+    }
+}
+
+export default FlameLinkCollectionComponentCreations;
\ No newline at end of file
diff --git a/src/components/FlameLinkCollectionStructure.js b/src/components/FlameLinkCollectionStructure.js
new file mode 100644
index 0000000..ba963cd
--- /dev/null
+++ b/src/components/FlameLinkCollectionStructure.js
@@ -0,0 +1,128 @@
+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';
+import flamelinkApp from '../flamelink.js';
+import FlameLinkImage from './FlameLinkImage';
+import FlameLinkFieldSet from './FlameLinkFieldSet';
+
+const styles = theme => ({
+        flamelinkItem: {
+            paddingRight: 20,
+            paddingLeft: 20,
+            paddingTop: 20,
+        },
+    });
+
+class FlameLinkCollectionStructure extends Component {
+    constructor() {
+        super();
+        
+        global.mediaID = '';
+
+        this.state = {
+          schemaContent: '',
+        }
+
+        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 === 'fieldset'){
+                if(content === ''){
+                    return
+                }
+                else{
+                    return <FlameLinkFieldSet field={content[key]} field2={field.options}/>
+                }
+            }
+        console.log('Content: ', content)
+        console.log('Field: ', field)
+        console.log('Key: ', key)
+        console.log('Type: ', type)
+        console.log('Description: ', description)
+    }
+
+    render() {
+        const { classes } = this.props;
+
+        const lg = this.props.field.gridColumns.lg;
+        const md = this.props.field.gridColumns.md;
+        const sm = this.props.field.gridColumns.sm;
+        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.schemaContent, this.props.field, this.props.field.key, this.props.type, this.props.field.description)}
+            </Grid>
+        );
+    }
+}
+
+export default withStyles(styles)(FlameLinkCollectionStructure);
\ No newline at end of file
diff --git a/src/components/FlameLinkComponentCreations.js b/src/components/FlameLinkComponentCreations.js
index 34ee9f4..88ae4bf 100644
--- a/src/components/FlameLinkComponentCreations.js
+++ b/src/components/FlameLinkComponentCreations.js
@@ -1,25 +1,39 @@
 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){
+    
+    getSchemaFieldData(schemaData, schemaType){
         var arr = [];
         for (var val in schemaData){
             arr.push(val);
         }
-        return arr.map(this.createComponents, schemaData);
+
+        if(schemaType === 'single'){
+            return arr.map(this.createSingleTypeSchemaComponents, schemaData);
+        }
+        if(schemaType === 'collection'){
+            return this.createCollectionTypeSchemaComponents(schemaData);
+        }
+        else{
+            return
+        }
     }
 
-    createComponents(num){
+    createSingleTypeSchemaComponents(num){
         return <FlameLinkStructure schemaData={this} field={this[num]} type={this[num].type} key={this[num].key} />
     }
 
+    createCollectionTypeSchemaComponents(schemaData){  
+        return <FlameLinkCollection schemaData={schemaData} />
+    }
+
     render() {
         return(
                 <Grid container>
-                    {this.getSchemaFieldData(this.props.schemaDetails)}
+                    {this.getSchemaFieldData(this.props.schemaDetails, this.props.schemaType)}
                 </Grid>
         );
     }
diff --git a/src/components/FlameLinkStructure.js b/src/components/FlameLinkStructure.js
index 470a592..93e391d 100644
--- a/src/components/FlameLinkStructure.js
+++ b/src/components/FlameLinkStructure.js
@@ -31,78 +31,78 @@ class FlameLinkStructure extends Component {
       }
 
     getContent(schemaField, key, type, description){
-        if (type === 'text'){
-            if(description === 'h1'){
-                return  (
-                        <Typography variant='display4' id={key}>
-                            {this.state.schemaContent[key]}
-                        </Typography>
-                        )                
+            if (type === 'text'){
+                if(description === 'h1'){
+                    return  (
+                            <Typography variant='display4' id={key}>
+                                {this.state.schemaContent[key]}
+                            </Typography>
+                            )                
+                }
+                if(description === 'h2'){
+                    return  (
+                            <Typography variant='display3' id={key}>
+                                {this.state.schemaContent[key]}
+                            </Typography>
+                            )                
+                }
+                if(description === 'h3'){
+                    return  (
+                            <Typography variant='display2' id={key}>
+                                {this.state.schemaContent[key]}
+                            </Typography>
+                            )                
+                }
+                if(description === 'h4'){
+                    return  (
+                            <Typography variant='display1' id={key}>
+                                {this.state.schemaContent[key]}
+                            </Typography>
+                            )                
+                }
+                if(description === 'h5'){
+                    return  (
+                            <Typography variant='headline' id={key}>
+                                {this.state.schemaContent[key]}
+                            </Typography>
+                            )                
+                }
+                if(description === 'h6'){
+                    return  (
+                            <Typography variant='title' id={key}>
+                                {this.state.schemaContent[key]}
+                            </Typography>
+                            )                
+                }
+                else{
+                    return  (
+                            <Typography variant='body2' component="p" id={key}>
+                                {this.state.schemaContent[key]}
+                            </Typography>
+                            )
+                }
             }
-            if(description === 'h2'){
-                return  (
-                        <Typography variant='display3' id={key}>
-                            {this.state.schemaContent[key]}
-                        </Typography>
-                        )                
-            }
-            if(description === 'h3'){
-                return  (
-                        <Typography variant='display2' id={key}>
-                            {this.state.schemaContent[key]}
-                        </Typography>
-                        )                
-            }
-            if(description === 'h4'){
-                return  (
-                        <Typography variant='display1' id={key}>
-                            {this.state.schemaContent[key]}
-                        </Typography>
-                        )                
-            }
-            if(description === 'h5'){
-                return  (
-                        <Typography variant='headline' id={key}>
-                            {this.state.schemaContent[key]}
-                        </Typography>
-                        )                
-            }
-            if(description === 'h6'){
-                return  (
-                        <Typography variant='title' id={key}>
-                            {this.state.schemaContent[key]}
-                        </Typography>
-                        )                
-            }
-            else{
+            if(type === 'textarea'){
                 return  (
                         <Typography variant='body2' component="p" id={key}>
                             {this.state.schemaContent[key]}
                         </Typography>
-                        )
+                        )               
             }
-        }
-        if(type === 'textarea'){
-            return  (
-                    <Typography variant='body2' component="p" id={key}>
-                        {this.state.schemaContent[key]}
-                    </Typography>
-                    )               
-        }
-        if (type === 'media'){
-            for (var val in this.state.schemaContent[key]){
-                global.mediaID = this.state.schemaContent[key][val];
-                return <FlameLinkImage/>
-            } 
-        }
-        if (type === 'fieldset'){
-            if(this.state.schemaContent === ''){
-                return
+            if (type === 'media'){
+                for (var val in this.state.schemaContent[key]){
+                    global.mediaID = this.state.schemaContent[key][val];
+                    return <FlameLinkImage/>
+                } 
             }
-            else{
-                return <FlameLinkFieldSet field={this.state.schemaContent[key]} field2={schemaField.options}/>
+            if (type === 'fieldset'){
+                if(this.state.schemaContent === ''){
+                    return
+                }
+                else{
+                    return <FlameLinkFieldSet field={this.state.schemaContent[key]} field2={schemaField.options}/>
+                }
             }
-        }
     }
 
     render() {
diff --git a/src/pages/About.js b/src/pages/About.js
index 1eb02c6..1b57406 100644
--- a/src/pages/About.js
+++ b/src/pages/About.js
@@ -6,26 +6,31 @@ class About extends Component {
     constructor() {
         super();
 
-        global.schemaName = 'martenSchemaDemo';
+        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
+        }))
+    }
 
     render() {
         
         return (
             <div>
                 <Fragment>
-                    <FlameLinkComponentCreations schemaDetails = {this.state.schemaDetails}/>
+                    <FlameLinkComponentCreations schemaDetails = {this.state.schemaDetails} schemaType = {this.state.schemaType}/>
                 </Fragment>
-          
             </div>
         );
     }
diff --git a/src/pages/Home.js b/src/pages/Home.js
index 60633cc..840a5f6 100644
--- a/src/pages/Home.js
+++ b/src/pages/Home.js
@@ -10,17 +10,23 @@ class Home extends Component {
 
         this.state = {
             schemaDetails: '',
+            schemaType: '',
         }
 
-        flamelinkApp.schemas.getFields(global.schemaName, { fields: ['title', 'key', 'type', 'gridColumns', 'description', 'options'] })
+        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
+            }))
     }
 
     render() {
         return (
-            <FlameLinkComponentCreations schemaDetails={this.state.schemaDetails} />
+            <FlameLinkComponentCreations schemaDetails={this.state.schemaDetails} schemaType = {this.state.schemaType}/>
         );
     }
 }