Added code to handle flamelink data. It handles schema field order, grid sizes and displays text. Getting storage bucket errors when attempting to grab media info. Need to use the firebase-admin package instead of the firebase package. This is a known issue with flamelink. I'll fix this shortly.

src/components/Flamelink.js

@@ -1,32 +0,0 @@
-import React, { Component, Fragment } from 'react';
-import Grid from '@material-ui/core/Grid';
-import flamelinkApp from '../flamelink.js';
-import Layout from './Layout';
-class Flamelink extends Component {
-    constructor() {
-        super();
-
-        this.state = {
-          schemaDetails: ''
-        }
-      }
-
-    componentDidMount() {
-        // fetch the project name, once it retrieves resolve the promsie and update the state. 
-        flamelinkApp.schemas.getFields('martenSchemaDemo', { fields: [ 'title', 'key' ] })
-        .then(result => this.setState({
-          schemaDetails: result
-        }))
-      }
-
-    render() {
-
-        return(
-            <Fragment>
-                <Layout schemaDetails = {this.state.schemaDetails}/>
-            </Fragment>
-        );
-    }
-}
-
-export default Flamelink;

src/components/Layout.js

@@ -1,47 +1,27 @@
-import React, { Component, Fragment } from 'react';
+import React, { Component} from 'react';
+import FlameLinkStructure from './FlameLinkStructure';
+import Grid from '@material-ui/core/Grid';
 import flamelinkApp from '../flamelink.js';
 
 class Layout extends Component {
-        constructor() {
-            super();
 
-            this.state = {
-              contentDetails: ''
-            }
-          }
-
-
-    getData(schemaData){
-        for (var val in this.props.schemaDetails){
-             this.getMoreData(this.props.schemaDetails[val]);
+    getSchemaFieldData(schemaData){
+        var arr = [];
+        for (var val in schemaData){
+            arr.push(val);
         }
+        return arr.map(this.createComponents, schemaData);
     }
 
-    getMoreData(moreData){
-        var tArray = document.createElement("H1");
-        var kArray = document.createElement("P");
-        this.getTitle(moreData.title, tArray);
-        this.getKey(moreData.key, kArray);
-    }
-
-    getTitle(title, arr){
-       var t = document.createTextNode(title);
-       arr.appendChild(t);
-       document.getElementById("demo").appendChild(arr);
-    }
-
-
-    getKey(key, arr){
-       var k = document.createTextNode(key); 
-       arr.appendChild(k);
-       document.getElementById("demo").appendChild(arr); 
+    createComponents(num){
+        return <FlameLinkStructure field={this[num]} type={this[num].type}/>
     }
 
     render() {
         return(
-            <div>
-                <p id="demo">{this.getData(this.props)}</p>
-            </div>
+                <Grid container>
+                    {this.getSchemaFieldData(this.props.schemaDetails)}
+                </Grid>
         );
     }
 }

src/firebase.js

@@ -10,6 +10,6 @@ const config = {
     messagingSenderId: "659856510832"
 };
 
-firebase.initializeApp(config);
+const firebaseApp = firebase.initializeApp(config);
 
 export default firebase;

src/pages/Info.js

@@ -1,9 +1,22 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import Typography from '@material-ui/core/Typography';
-import Flamelink from '../components/Flamelink';
-
+import Layout from '../components/Layout';
+import flamelinkApp from '../flamelink.js';
 
 class Info extends Component {
+    constructor() {
+        super();
+
+        this.state = {
+          schemaDetails: '',
+        }
+
+        flamelinkApp.schemas.getFields('martenSchemaDemo', { fields: [ 'title', 'key', 'type', 'gridColumns' ] })
+        .then(result => this.setState({
+          schemaDetails: result
+        }))
+      }
+
     render() {
         
         return (
@@ -12,7 +25,10 @@ class Info extends Component {
                 <Typography variant='display1' align='center' gutterBottom>
                     Info
                 </Typography>
-                <Flamelink/>
+
+                <Fragment>
+                    <Layout schemaDetails = {this.state.schemaDetails}/>
+                </Fragment>
           
             </div>
         );