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

package-lock.json

@@ -3961,6 +3961,11 @@
       "resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.0.4.tgz",
       "integrity": "sha512-ZIzRpLJrOj7jjP2miAtgqIfmzbxa4ZOr5jJc601zklsfEx9oTzmmj2nVpIPRpNlRTIh8lc1kyViIY7BWSGNmKw=="
     },
+    "detect-passive-events": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/detect-passive-events/-/detect-passive-events-1.0.4.tgz",
+      "integrity": "sha1-btR35uW863kHlzXc01d4nTf5qRo="
+    },
     "detect-port-alt": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/detect-port-alt/-/detect-port-alt-1.1.6.tgz",
@@ -5651,7 +5656,7 @@
         },
         "core-js": {
           "version": "2.5.5",
-          "resolved": "http://registry.npmjs.org/core-js/-/core-js-2.5.5.tgz",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.5.5.tgz",
           "integrity": "sha1-sU3ek2xkDAV5prUMq8wTLdYSfjs="
         },
         "firebase": {
@@ -9686,6 +9691,11 @@
         "lodash._reinterpolate": "~3.0.0"
       }
     },
+    "lodash.throttle": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
+      "integrity": "sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ="
+    },
     "lodash.uniq": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
@@ -12550,6 +12560,18 @@
       "resolved": "https://registry.npmjs.org/react-flow-types/-/react-flow-types-0.2.0-beta.6.tgz",
       "integrity": "sha512-I4f8oJFGxVJYrJLxG4sCPW7vWedNB8Eee1U2v+xBzRPlF7X5IBelqaDIKxBDLzDFb++AzpoU+uu1jFaKy1QssQ=="
     },
+    "react-image-gallery": {
+      "version": "0.8.12",
+      "resolved": "https://registry.npmjs.org/react-image-gallery/-/react-image-gallery-0.8.12.tgz",
+      "integrity": "sha512-jkrsEhRZ3JPxFhLznrwPyAVy/n6HiM204tKBJ1W5z1a8QnWLVVi+j/UXsMETvks4rnSIkAQbW3WPHbrS19nNMQ==",
+      "requires": {
+        "lodash.debounce": "^4.0.8",
+        "lodash.throttle": "^4.1.1",
+        "prop-types": "^15.5.8",
+        "react-swipeable": "^4.2.2",
+        "resize-observer-polyfill": "^1.5.0"
+      }
+    },
     "react-jss": {
       "version": "8.6.1",
       "resolved": "https://registry.npmjs.org/react-jss/-/react-jss-8.6.1.tgz",
@@ -12695,6 +12717,15 @@
         }
       }
     },
+    "react-swipeable": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/react-swipeable/-/react-swipeable-4.3.0.tgz",
+      "integrity": "sha512-L21VMbcDvG+AOVF4ZIbQ8sICGIgiKB/plGKWBMw6dkxt5neS7x74ZlTbJ39U8slz798MZBv/uIoE9Vzgp3PODQ==",
+      "requires": {
+        "detect-passive-events": "^1.0.4",
+        "prop-types": "^15.5.8"
+      }
+    },
     "react-transition-group": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.4.0.tgz",
@@ -13277,6 +13308,11 @@
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
       "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8="
     },
+    "resize-observer-polyfill": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.0.tgz",
+      "integrity": "sha512-M2AelyJDVR/oLnToJLtuDJRBBWUGUvvGigj1411hXhAdyFWqMaqHp7TixW3FpiLuVaikIcR1QL+zqoJoZlOgpg=="
+    },
     "resolve": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.6.0.tgz",

package.json

@@ -17,6 +17,7 @@
     "moment": "^2.22.2",
     "react": "^16.5.1",
     "react-dom": "^16.5.1",
+    "react-image-gallery": "^0.8.12",
     "react-quiz-component": "0.2.0",
     "react-router": "^4.3.1",
     "react-router-dom": "^4.3.1",

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/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 (
+            <Grid container>
+                <FlameLinkCollectionGallery />
                 <FlameLinkComponentCreations schemaDetails={this.state.schemaDetails} schemaType = {this.state.schemaType}/>
+            </Grid>
         );
     }
 }