Can now grab text and images from firebase using Flamelink's API. I've also included a solution for adding different header styles. Next on the agenda is styling the Info page and filling it with sponsor's data.

src/components/FlameLinkImage.js

@@ -0,0 +1,30 @@
+import React, { Component } from 'react';
+import flamelinkApp from '../flamelink.js';
+
+class FlameLinkImage extends Component {
+    constructor() {
+        super();
+
+        this.state = {
+          mediaURL: '',
+        }
+      }
+
+    getImage(imagePath){
+            flamelinkApp.storage.getURL(imagePath)
+                    .then(url => this.setState({
+                      mediaURL: url
+                    }))
+            return <img src={this.state.mediaURL} width="100%" alt='' />
+    }
+
+    render() {
+        return(
+                <div>
+                {this.getImage(this.props.content)}
+                </div>
+        );
+    }
+}
+
+export default FlameLinkImage;

src/components/FlameLinkStructure.js

@@ -1,8 +1,9 @@
-import React, { Component, Fragment} from 'react';
+import React, { Component} from 'react';
 import Grid from '@material-ui/core/Grid';
-import Paper from '@material-ui/core/Paper';
 import Typography from '@material-ui/core/Typography';
 import flamelinkApp from '../flamelink.js';
+import FlameLinkImage from './FlameLinkImage';
+
 
 class FlameLinkStructure extends Component {
     constructor() {
@@ -16,17 +17,36 @@ class FlameLinkStructure extends Component {
         .then(result => this.setState({
           schemaContent: result
         }))
+ 
       }
 
-    getContent(key, type){
-        if (type == 'text'){
-            return this.state.schemaContent[key]
+    getContent(key, type, description){
+        if (type === 'text'){
+            if(description === 'h1'){
+                return  (
+                        <Typography variant="display2" id={this.props.field.key}>
+                        {this.state.schemaContent[key]}
+                        </Typography>
+                        )                
+            }
+            if(description === 'h2'){
+                return  (
+                        <Typography variant="display3" id={this.props.field.key}>
+                        {this.state.schemaContent[key]}
+                        </Typography>
+                        )                
+            }
+            else{
+                return  (
+                        <Typography component="p" id={this.props.field.key}>
+                        {this.state.schemaContent[key]}
+                        </Typography>
+                        )
+            }
         }
-        if (type == 'media'){
+        if (type === 'media'){
             for (var val in this.state.schemaContent[key]){
-                console.log(this.state.schemaContent[key][val]);
-                flamelinkApp.storage.getURL(this.state.schemaContent[key][val])
-                    .then(url => console.log('File URL:', url))
+                return <FlameLinkImage content={this.state.schemaContent[key][val]}/>
             } 
         }
     }
@@ -38,14 +58,7 @@ class FlameLinkStructure extends Component {
         const xs = this.props.field.gridColumns.xs;
         return(
             <Grid item lg={lg} md={md} sm={sm} xs={xs}>
-                <Paper>
-                    <Typography variant="h5" component="h3">
-                      HEADER
-                    </Typography>
-                    <Typography component="p">
-                      {this.getContent(this.props.field.key, this.props.type)}
-                    </Typography>
-                </Paper>
+                      {this.getContent(this.props.field.key, this.props.type, this.props.field.description)}
             </Grid>
         );
     }

src/components/Layout.js

@@ -1,7 +1,6 @@
 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 {
 
@@ -14,7 +13,7 @@ class Layout extends Component {
     }
 
     createComponents(num){
-        return <FlameLinkStructure field={this[num]} type={this[num].type}/>
+        return <FlameLinkStructure field={this[num]} type={this[num].type} key={this[num].key}/>
     }
 
     render() {

src/firebase.js

@@ -1,13 +1,16 @@
-import * as admin from 'firebase-admin';
+import firebase from 'firebase/app';
+import 'firebase/database';
+import 'firebase/storage';
 
-var serviceAccount = require('./keys/marten-application-firebase-adminsdk-zvjmp-c177ac648f.json');
-
-const firebaseConfig = {
-  credential: admin.credential.cert(serviceAccount),
-  databaseURL: "https://marten-application.firebaseio.com",
-  storageBucket: "marten-application.appspot.com"      
+const config = {
+    apiKey: "AIzaSyAYf9AbeYwLY892NRiQfn0AMtG9xIFAJbo",
+    authDomain: "marten-application.firebaseapp.com",
+    databaseURL: "https://marten-application.firebaseio.com",
+    projectId: "marten-application",
+    storageBucket: "marten-application.appspot.com",
+    messagingSenderId: "659856510832"
 };
 
-const firebaseApp = admin.initializeApp(firebaseConfig);
+firebase.initializeApp(config);
 
-export default 'firebase-admin';
+export default firebase;

src/flamelink.js

@@ -1,6 +1,6 @@
 import firebaseApp from './firebase.js';
 import flamelink from 'flamelink';
 
-const flamelinkApp = flamelink({ firebaseApp, isAdminApp: true });
+const flamelinkApp = flamelink({ firebaseApp });
 
 export default flamelinkApp;

src/pages/Info.js

@@ -11,7 +11,7 @@ class Info extends Component {
           schemaDetails: '',
         }
 
-        flamelinkApp.schemas.getFields('martenSchemaDemo', { fields: [ 'title', 'key', 'type', 'gridColumns' ] })
+        flamelinkApp.schemas.getFields('martenSchemaDemo', { fields: [ 'title', 'key', 'type', 'gridColumns', 'description' ] })
         .then(result => this.setState({
           schemaDetails: result
         }))