Added ability to parse fieldset data. Added some basic stylings for content. Cleaned up code.

src/components/FlameLinkComponentCreations.js

@@ -2,7 +2,7 @@ import React, { Component} from 'react';
 import FlameLinkStructure from './FlameLinkStructure';
 import Grid from '@material-ui/core/Grid';
 
-class Layout extends Component {
+class FlameLinkComponentCreations extends Component {
 
     getSchemaFieldData(schemaData){
         var arr = [];
@@ -13,7 +13,7 @@ class Layout extends Component {
     }
 
     createComponents(num){
-        return <FlameLinkStructure field={this[num]} type={this[num].type} key={this[num].key}/>
+        return <FlameLinkStructure schemaData={this} field={this[num]} type={this[num].type} key={this[num].key} />
     }
 
     render() {
@@ -25,4 +25,4 @@ class Layout extends Component {
     }
 }
 
-export default Layout;
+export default FlameLinkComponentCreations;

src/components/FlameLinkFieldSet.js

@@ -0,0 +1,31 @@
+import React, { Component} from 'react';
+import Grid from '@material-ui/core/Grid';
+import FlameLinkFieldSetContent from './FlameLinkFieldSetContent';
+
+
+class FlameLinkFieldSet extends Component {
+
+
+    getFieldSetContent(content1, content2){
+        var arr = [];
+        for (var val in content2){
+            arr.push(val);
+        }  
+        var arrContent = [content1, content2];
+        return arr.map(this.createFieldSetComponents, arrContent);
+    }
+
+    createFieldSetComponents(num){
+        return <FlameLinkFieldSetContent field={this[1][num]} type={this[1][num].type} key={this[1][num].key} fieldKey={this[1][num].key} data={this[0]}/>
+    }
+
+    render() {
+        return(
+            <Grid item xs={12}>
+                    {this.getFieldSetContent(this.props.field, this.props.field2)}
+            </Grid>
+        );
+    }
+}
+
+export default FlameLinkFieldSet;

src/components/FlameLinkFieldSetContent.js

@@ -0,0 +1,43 @@
+import React, { Component} from 'react';
+import Grid from '@material-ui/core/Grid';
+import Typography from '@material-ui/core/Typography';
+import FlameLinkImage from './FlameLinkImage';
+
+class FlameLinkFieldSetContent extends Component {
+
+    getContent(key, type, description, fieldsetContent){
+        if (type === 'text'){
+                return  (
+                        <Typography variant='body2' component="p" id={this.props.field.key}>
+                        {fieldsetContent[key]}
+                        </Typography>
+                        )
+        }
+        if(type === 'textarea'){
+            return  (
+                    <Typography variant='body2' component="p" id={this.props.field.key} gutterBottom>
+                    {fieldsetContent[key]}
+                    </Typography>
+                    )               
+        }
+        if (type === 'media'){
+            for (var val in fieldsetContent[key]){
+                return <FlameLinkImage content={fieldsetContent[key][val]}/>
+            } 
+        }
+    }
+
+    render() {
+        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}>
+                    {this.getContent(this.props.fieldKey, this.props.type, this.props.field.description, this.props.data)}
+            </Grid>
+        );
+    }
+}
+
+export default FlameLinkFieldSetContent;

src/components/FlameLinkImage.js

@@ -15,7 +15,7 @@ class FlameLinkImage extends Component {
                     .then(url => this.setState({
                       mediaURL: url
                     }))
-            return <img src={this.state.mediaURL} width="100%" alt='' />
+            return <img src={this.state.mediaURL} width='100%' alt='' />
     }
 
     render() {

src/components/FlameLinkStructure.js

@@ -1,9 +1,18 @@
 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 FlameLinkStructure extends Component {
     constructor() {
@@ -13,55 +22,99 @@ class FlameLinkStructure extends Component {
           schemaContent: '',
         }
 
-        flamelinkApp.content.get('martenSchemaDemo')
+        flamelinkApp.content.get(global.schemaName)
         .then(result => this.setState({
           schemaContent: result
         }))
- 
       }
 
-    getContent(key, type, description){
+    getContent(schemaField, key, type, description){
         if (type === 'text'){
             if(description === 'h1'){
                 return  (
-                        <Typography variant="display2" id={this.props.field.key}>
+                        <Typography variant='display4' id={key}>
                             {this.state.schemaContent[key]}
                         </Typography>
                         )                
             }
             if(description === 'h2'){
                 return  (
-                        <Typography variant="display3" id={this.props.field.key}>
+                        <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 component="p" id={this.props.field.key}>
+                        <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]){
                 return <FlameLinkImage content={this.state.schemaContent[key][val]}/>
             } 
         }
+        if (type === 'fieldset'){
+            if(this.state.schemaContent === ''){
+                return
+            }
+            else{
+                return <FlameLinkFieldSet field={this.state.schemaContent[key]} field2={schemaField.options}/>
+            }
+        }
     }
 
     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}>
+            <Grid item lg={lg} md={md} sm={sm} xs={xs} className={classes.flamelinkItem}>
-                      {this.getContent(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>
         );
     }
 }
 
-export default FlameLinkStructure;
+export default withStyles(styles)(FlameLinkStructure);

src/keys/marten-application-firebase-adminsdk-zvjmp-c177ac648f.json

@@ -1,12 +0,0 @@
-{
-  "type": "service_account",
-  "project_id": "marten-application",
-  "private_key_id": "c177ac648f803d7e5e4398e4d7302ea4e6972c79",
-  "private_key": "-----BEGIN PRIVATE KEY-----\nMIIEvgIBADANBgkqhkiG9w0BAQEFAASCBKgwggSkAgEAAoIBAQDygOhbLLjSDLAd\n9B29umgVUrAn4/a1lGE04j6aQrjbgLa/NjU9u12dRiiOFDLX3QjEWFBcLYrU4Eb9\ncD48TJug+/Nc0nFjFk2GATmzlFnMzOaMCbH844TBX34h0UEgPt+iQh7g3cEH685a\nm0zlDXGOh88POvcTtez8S+2UMU6J+6mNh/ErRli3lTuD4zTGpZA3SyX8Us8aoFaG\njaC7P9T10M5kZWmGZMg6DiywX9xnjWPCI5hp1XE3SkyRQ1vpsA9lCPZPxb5QS2yM\nTYBd4Qh90kbEA0jVPIjIt8JwboFAV9UCuG4SQ44WnoSikvVYhU4esBIsmsKRD7bj\nrFATV5hxAgMBAAECggEABkfsVL22mwKm/lyd91W8V8aKr1rQP1Vcs+1i9pUBM5a8\nrPzNAdiAMQhR2TW42CZWgXrh2HRZxOAa+JobU42ep4uVCt+8vfa0OvL9zQrb7VH2\ni/SdlH2qWOWVt0+jnJ+iRFIq+XMm6nMLJwXAFuvrZ7gY5uWlpAAdl26KRJEHHive\niPK2Ri0bFqZ/xSSaNYmPKa4xRNKgpvarNcJPuiOdpzVq1G3S1TC7/DcYeWHxxHry\nPh/9RKPX5H5zzaObBw8jTMqFouh/BPw1CU5QLoHe1ApVvQ4ypkWf377/2eQArc77\ndGl0S0OI64UTb5ZQ5vE8KEVTdE/bjUhlJknQhZhZwQKBgQD6rtZEjMps0smTwfEY\nDmjuSjx6AbjiBtv1c8L3A5nmS3qz/hSqLoWp7EWvQyHRywV1nAXZJB1LNNUaFuio\nfgeC4xPgkd2Eurdj5VkAMeHpaX+Y5tBmm+U04lNjh6JsRFQYMMxgdGiySgbBFfjq\nddg67yK4uTMKlhETS1xzq+MzsQKBgQD3pahufZFdA47hEwmr0CqnwLhzXT2otNFo\ncit6rgdycEynCh2egq8Cj7cPoHmx1IRtiiNORetYb1A/6j6zDm3uXo+4Mxb13Ipe\ncgXMmLBkZurA4iNdq8wOSjHLj27IWfoG3hhmTQ2SJVRdi4bhkfWrDmAPtZ9otKgZ\nlwQ/A2+gwQKBgADNop4hnVxv6Hlyu6UKFsf8sOjrLH586yOENXG5LzsPrtr4y3Qo\nJgF/YlHHc0pKzj+sOlCRzw44ox4sSJ6RmNCQjbXAgec0+fV1/K0Fe+XVkrUYuD47\n7aYXu5CsFJcoOOTC80Sz2soHdrITsfJ+Yiz+KyxQW5uDE5buPOOZ/2ZhAoGBALdF\nxMnIaeyxNmtBgJXDn924FYljBr+02Yj3fU/0PRSnIUM5jEQDqOs3Wp3ZAFbn1P2Q\nDqLdwdcXwgcbHz26Pwb6ulfyj1py1YAh2ELa+SfEtpT6hnvLKV+l7wYb5zukwxGU\nCfCjs5hlwfLc0HxdXbczE0ps+kUt9X3CsmTD8TfBAoGBAJWU+HjJgSAOQBBy7Akw\nYY0sFrRoGlzZHFudLSloarH8csMVxWmLsz4CET6lMRmJbYipEQd5FKxhkfXJvcEn\nTc7x0+5fyAe3zBW4NgchxjWHFLjCNFX+gy4hZFpCbgSg/5EOgNzfKexqgcZR+nzv\nVjcQAU5jOlcZ6MFpDJJNK30k\n-----END PRIVATE KEY-----\n",
-  "client_email": "firebase-adminsdk-zvjmp@marten-application.iam.gserviceaccount.com",
-  "client_id": "100533957773437883097",
-  "auth_uri": "https://accounts.google.com/o/oauth2/auth",
-  "token_uri": "https://oauth2.googleapis.com/token",
-  "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
-  "client_x509_cert_url": "https://www.googleapis.com/robot/v1/metadata/x509/firebase-adminsdk-zvjmp%40marten-application.iam.gserviceaccount.com"
-}

src/pages/Info.js

@@ -1,17 +1,19 @@
 import React, { Component, Fragment } from 'react';
 import Typography from '@material-ui/core/Typography';
-import Layout from '../components/Layout';
+import FlameLinkComponentCreations from '../components/FlameLinkComponentCreations';
 import flamelinkApp from '../flamelink.js';
 
 class Info extends Component {
     constructor() {
         super();
 
+        global.schemaName = 'martenSchemaDemo';
+
         this.state = {
           schemaDetails: '',
         }
 
-        flamelinkApp.schemas.getFields('martenSchemaDemo', { fields: [ 'title', 'key', 'type', 'gridColumns', 'description' ] })
+        flamelinkApp.schemas.getFields(global.schemaName, { fields: [ 'title', 'key', 'type', 'gridColumns', 'description', 'options' ] })
         .then(result => this.setState({
           schemaDetails: result
         }))
@@ -27,7 +29,7 @@ class Info extends Component {
                 </Typography>
 
                 <Fragment>
-                    <Layout schemaDetails = {this.state.schemaDetails}/>
+                    <FlameLinkComponentCreations schemaDetails = {this.state.schemaDetails}/>
                 </Fragment>
           
             </div>