Set up Galleries to use flamelink images. Set up to use collection schema type only. There is one bug I need to address. Gallery doesn't render when the webpage is loaded but works otherwise.

src/components/FlameLinkCollectionGallery.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import Typography from '@material-ui/core/Typography';
 import Grid from '@material-ui/core/Grid';
 import { withStyles } from '@material-ui/core/styles';
-import ImageGallery from 'react-image-gallery';
+import RenderGallery from './RenderGallery';
 import flamelinkApp from '../flamelink.js';
 import FlameLinkCollectionGalleryContent from './FlameLinkCollectionGalleryContent';
 import "react-image-gallery/styles/css/image-gallery.css";
@@ -14,35 +14,38 @@ const styles = theme => ({
             marginLeft: 20,
             marginTop: 20,
         },
+
+        flamelinkGallery: {
+            marginRight: "auto",
+            marginLeft: "auto",
+            marginTop: 20,
+        },
     });
 
 class FlameLinkCollectionGallery extends Component {
-    constructor() {
-        super();
+    constructor(props) {
+        super(props);
 
         global.mediaURLs = [];
         global.mediaIDs = [];
-        global.galleryImages = [];
 
         this.state = {
             schemaDetails: '',
             schemaContent: '',
             schemaDescription: '',
-            showThumbnails: false,
-            showIndex: true,
         }
 
-        flamelinkApp.schemas.getFields(global.galleryName, { fields: [ 'title', 'key', 'type', 'gridColumns', 'description', 'options'] })
+        flamelinkApp.schemas.getFields(this.props.galleryName, { fields: [ 'title', 'key', 'type', 'gridColumns', 'description', 'options'] })
                     .then(result => this.setState({
                         schemaDetails: result
                     }))
 
-        flamelinkApp.content.get(global.galleryName)
+        flamelinkApp.content.get(this.props.galleryName)
             .then(result => this.setState({
               schemaContent: result
             }))
 
-        flamelinkApp.schemas.get(global.galleryName)
+        flamelinkApp.schemas.get(this.props.galleryName)
             .then(result => this.setState({
               schemaDescription: result.title
             }))
@@ -73,29 +76,17 @@ class FlameLinkCollectionGallery extends Component {
     render() {
         const { classes } = this.props;
 
-        const images = [
-      {
-        original: 'http://lorempixel.com/1000/600/nature/1/',
-        thumbnail: 'http://lorempixel.com/250/150/nature/1/',
-      },
-      {
-        original: 'http://lorempixel.com/1000/600/nature/2/',
-        thumbnail: 'http://lorempixel.com/250/150/nature/2/'
-      },
-      {
-        original: 'http://lorempixel.com/1000/600/nature/3/',
-        thumbnail: 'http://lorempixel.com/250/150/nature/3/'
-      }
-    ]
-
         return(
-                <Grid item lg={8} md={8} sm={12} xs={12} className={classes.flamelinkItem}>
-                    <Typography variant='display3'>
+                <Grid container>
+                    {this.getGalleryInfo(this.state.schemaDetails, this.state.schemaContent)}
+                    <Typography variant='display3' className={classes.flamelinkItem}>
                         {this.state.schemaDescription}
                     </Typography>
-                    {this.getGalleryInfo(this.state.schemaDetails, this.state.schemaContent)}
-                    {console.log('Gallery Images: ', global.galleryImages)}
-                    <ImageGallery items={global.galleryImages} />
+                    <Grid container>
+                        <Grid item lg={8} md={8} sm={12} xs={12} className={classes.flamelinkGallery} >
+                            <RenderGallery/>
+                        </Grid>
+                    </Grid>
                 </Grid>
         );
     }

src/components/FlameLinkCollectionGalleryContent.js

@@ -3,20 +3,20 @@ import flamelinkApp from '../flamelink.js';
 import '../css/FlameLink.css';
 
 class FlameLinkCollectionGalleryContent extends Component {
-    constructor() {
-        super();
+    constructor(props) {
+        super(props);
+
+        global.galleryImages = [];
 
         this.state = {
           mediaURL: '',
         }
-      }
 
-    componentDidMount(){
         flamelinkApp.storage.getURL(global.mediaIDs[this.props.num])
                     .then(url => this.setState({
                       mediaURL: url
                     }))
-    }
+      }
 
     addURLs(){
         if(this.state.mediaURL === ''){

src/components/Main.js

@@ -14,6 +14,7 @@ import Hidden from '@material-ui/core/Hidden';
 import Divider from '@material-ui/core/Divider';
 import MenuIcon from '@material-ui/icons/Menu';
 import HomeIcon from '@material-ui/icons/Home';
+import PhotoLibraryIcon from '@material-ui/icons/PhotoLibrary';
 import AssignmentIcon from '@material-ui/icons/Assignment';
 import MapIcon from '@material-ui/icons/Map';
 import InfoIcon from '@material-ui/icons/Info';
@@ -29,6 +30,7 @@ import CssBaseline from '@material-ui/core/CssBaseline';
 import ExpandLess from '@material-ui/icons/ExpandLess';
 import ExpandMore from '@material-ui/icons/ExpandMore';
 import Collapse from '@material-ui/core/Collapse';
+import FlameLinkCollectionGallery from '../components/FlameLinkCollectionGallery';
 
 const drawerWidth = 240;
 
@@ -143,20 +145,20 @@ class ResponsiveDrawer extends React.Component {
                     </Collapse>
                     <ListItem button onClick={this.handleClick2}>
                         <ListItemIcon>
-                            <SlideshowIcon />
+                            <PhotoLibraryIcon />
                         </ListItemIcon>
                         <ListItemText inset primary="Galleries" />
                         {this.state.open2 ? <ExpandLess /> : <ExpandMore />}
                     </ListItem>
                     <Collapse in={this.state.open2} timeout="auto" unmountOnExit>
                         <List component="div" disablePadding>
-                            <ListItem button className={classes.nested} onClick={() => this.nav('Easy-Quiz')}>
+                            <ListItem button className={classes.nested} onClick={() => this.nav('Gallery1')}>
                                 <ListItemText inset primary="Gallery1" />
                             </ListItem>
-                            <ListItem button className={classes.nested} onClick={() => this.nav('Intermediate-Quiz')}>
+                            <ListItem button className={classes.nested} onClick={() => this.nav('Gallery2')}>
                                 <ListItemText inset primary="Gallery2" />
                             </ListItem>
-                            <ListItem button className={classes.nested} onClick={() => this.nav('Advanced-Quiz')}>
+                            <ListItem button className={classes.nested} onClick={() => this.nav('Gallery3')}>
                                 <ListItemText inset primary="Gallery3" />
                             </ListItem>
                         </List>
@@ -224,6 +226,9 @@ class ResponsiveDrawer extends React.Component {
                     {this.state.key === 'Easy-Quiz' && <Quiz difficulty='Easy'/>}
                     {this.state.key === 'Intermediate-Quiz' && <Quiz difficulty='Intermediate'/>}
                     {this.state.key === 'Advanced-Quiz' && <Quiz difficulty='Advanced'/>}
+                    {this.state.key === 'Gallery1' && <FlameLinkCollectionGallery galleryName={'martenGallery'}/>}
+                    {this.state.key === 'Gallery2' && <FlameLinkCollectionGallery galleryName={'martenGallery'}/>}
+                    {this.state.key === 'Gallery3' && <FlameLinkCollectionGallery galleryName={'martenGallery'}/>}
                 </main>
             </div>
         );

src/components/RenderGallery.js

@@ -0,0 +1,40 @@
+import React, { Component } from 'react';
+import ImageGallery from 'react-image-gallery';
+import "react-image-gallery/styles/css/image-gallery.css";
+import '../css/FlameLink.css';
+
+class RenderGallery extends Component {
+    constructor() {
+        super();
+
+        this.state = {
+          showThumbnails: false,
+          showIndex: true,
+          showBullets: true,
+          mounted: false,
+        }
+      }
+
+        componentDidMount(){
+        this.setState({mounted: true})
+    }
+    
+    _onImageLoad(event) {
+    console.debug('loaded image', event.target.src);
+  }
+
+    render() {
+
+        return(
+            <ImageGallery  
+                items={global.galleryImages} 
+                showThumbnails={this.state.showThumbnails} 
+                showIndex={this.state.showIndex} 
+                showBullets={this.state.showBullets} 
+                onImageLoad={this._onImageLoad}
+            />
+        );
+    }
+}
+
+export default RenderGallery;

src/pages/Home.js

@@ -9,7 +9,6 @@ class Home extends Component {
         super();
 
         global.schemaName = 'martenHome';
-        global.galleryName = 'martenGallery';
 
         this.state = {
             schemaDetails: '',
@@ -34,7 +33,7 @@ class Home extends Component {
     render() {
         return (
             <Grid container>
-                <FlameLinkCollectionGallery />
+                <FlameLinkCollectionGallery galleryName={'martenGallery'}/>
                 <FlameLinkComponentCreations schemaDetails={this.state.schemaDetails} schemaType = {this.state.schemaType}/>
             </Grid>
         );