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,18 +17,37 @@ class FlameLinkStructure extends Component {
         .then(result => this.setState({
           schemaContent: result
         }))
+ 
       }
 
-    getContent(key, type){
-        if (type == 'text'){
-            return this.state.schemaContent[key]
-        }
-        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))
+    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'){
+            for (var val in this.state.schemaContent[key]){
+                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() {