Progress so far converting a collection schema filled with single media entries into a gallery

src/components/FlameLinkCollectionGallery.js

@@ -0,0 +1,87 @@
+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 flamelinkApp from '../flamelink.js';
+import FlameLinkCollectionGalleryContent from './FlameLinkCollectionGalleryContent';
+import "react-image-gallery/styles/css/image-gallery.css";
+import '../css/FlameLink.css';
+
+const styles = theme => ({
+        flamelinkItem: {
+            marginRight: 20,
+            marginLeft: 20,
+            marginTop: 20,
+        },
+    });
+
+class FlameLinkCollectionGallery extends Component {
+    constructor() {
+        super();
+
+        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'] })
+                    .then(result => this.setState({
+                        schemaDetails: result
+                    }))
+
+        flamelinkApp.content.get(global.galleryName)
+            .then(result => this.setState({
+              schemaContent: result
+            }))
+
+        flamelinkApp.schemas.get(global.galleryName)
+            .then(result => this.setState({
+              schemaDescription: result.title
+            }))
+    }
+
+    getGalleryInfo(schemaDetails, schemaContent){
+        var key;
+        var mediaNums = []
+        for (var val in schemaDetails){
+            key = schemaDetails[val].key
+        }  
+        for (var val1 in schemaContent){
+            for (var val2 in schemaContent[val1][key]){
+                global.mediaIDs.push(schemaContent[val1][key][val2]);
+            }
+        }
+        console.log('Global Media IDs: ', global.mediaIDs)
+        for (var val3 in global.mediaIDs){
+                mediaNums.push(val3)
+        }   
+        return mediaNums.map(this.createGallery);
+    }
+
+    createGallery(num){
+         return <FlameLinkCollectionGalleryContent num={num} key={global.mediaIDs[num]}/>
+    }
+
+    render() {
+        const { classes } = this.props;
+
+        return(
+                <Grid item lg={8} md={8} sm={12} xs={12} className={classes.flamelinkItem}>
+                    <Typography variant='display3'>
+                        {this.state.schemaDescription}
+                    </Typography>
+                    {this.getGalleryInfo(this.state.schemaDetails, this.state.schemaContent)}
+                    {console.log('Gallery Images: ', global.galleryImages)}
+                </Grid>
+        );
+    }
+}
+
+export default withStyles(styles)(FlameLinkCollectionGallery);

src/components/FlameLinkCollectionGalleryContent.js

@@ -0,0 +1,37 @@
+import { Component } from 'react';
+import flamelinkApp from '../flamelink.js';
+import '../css/FlameLink.css';
+
+class FlameLinkCollectionGalleryContent extends Component {
+    constructor() {
+        super();
+
+        this.state = {
+          mediaURL: '',
+        }
+      }
+
+    componentDidMount(){
+        flamelinkApp.storage.getURL(global.mediaIDs[this.props.num])
+                    .then(url => this.setState({
+                      mediaURL: url
+                    }))
+    }
+
+    addURLs(){
+        if(this.state.mediaURL === ''){
+        }
+        else{
+            var element = {}
+            element.original = this.state.mediaURL;
+            global.galleryImages.push(element);
+        }
+        return null;
+    }
+
+    render() {
+        return this.addURLs();
+    }
+}
+
+export default FlameLinkCollectionGalleryContent;

src/components/FlameLinkImage.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import Typography from '@material-ui/core/Typography';
 import flamelinkApp from '../flamelink.js';
-import '../css/FlameLinkImage.css';
+import '../css/FlameLink.css';
 
 class FlameLinkImage extends Component {
     constructor() {

src/components/Main.js

@@ -71,7 +71,8 @@ class ResponsiveDrawer extends React.Component {
     state = {
         mobileOpen: false,
         key: 'Home',
-        open: false
+        open: false,
+        open2: false,
     };
 
     handleDrawerToggle = () => {
@@ -82,6 +83,10 @@ class ResponsiveDrawer extends React.Component {
         this.setState(state => ({ open: !state.open }));
     }
 
+    handleClick2 = () => {
+        this.setState(state => ({ open2: !state.open2 }));
+    }
+
     nav = (text) => {
         this.setState({
             key: text
@@ -136,6 +141,26 @@ class ResponsiveDrawer extends React.Component {
                             </ListItem>
                         </List>
                     </Collapse>
+                    <ListItem button onClick={this.handleClick2}>
+                        <ListItemIcon>
+                            <SlideshowIcon />
+                        </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')}>
+                                <ListItemText inset primary="Gallery1" />
+                            </ListItem>
+                            <ListItem button className={classes.nested} onClick={() => this.nav('Intermediate-Quiz')}>
+                                <ListItemText inset primary="Gallery2" />
+                            </ListItem>
+                            <ListItem button className={classes.nested} onClick={() => this.nav('Advanced-Quiz')}>
+                                <ListItemText inset primary="Gallery3" />
+                            </ListItem>
+                        </List>
+                    </Collapse>
                 </List>
                 <Divider />
             </div>

src/css/FlameLink.css

@@ -1,4 +1,4 @@
 .flamelinkImage {
   width: 100%;
   max-width: 500px;
-}
+}

src/pages/Home.js

@@ -1,12 +1,15 @@
 import React, { Component } from 'react';
 import FlameLinkComponentCreations from '../components/FlameLinkComponentCreations';
+import FlameLinkCollectionGallery from '../components/FlameLinkCollectionGallery';
 import flamelinkApp from '../flamelink';
+import Grid from '@material-ui/core/Grid';
 
 class Home extends Component {
     constructor() {
         super();
 
         global.schemaName = 'martenHome';
+        global.galleryName = 'martenGallery';
 
         this.state = {
             schemaDetails: '',
@@ -30,7 +33,10 @@ class Home extends Component {
 
     render() {
         return (
-            <FlameLinkComponentCreations schemaDetails={this.state.schemaDetails} schemaType = {this.state.schemaType}/>
+            <Grid container>
+                <FlameLinkCollectionGallery />
+                <FlameLinkComponentCreations schemaDetails={this.state.schemaDetails} schemaType = {this.state.schemaType}/>
+            </Grid>
         );
     }
 }