Uploading and showing pictures working well.

client/package-lock.json

@@ -4628,6 +4628,11 @@
         "schema-utils": "0.3.0"
       }
     },
+    "file-type": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/file-type/-/file-type-8.1.0.tgz",
+      "integrity": "sha512-qyQ0pzAy78gVoJsmYeNgl8uH8yKhr1lVhW7JbzJmnlRi0I4R2eEDEJZVKG8agpDnLpacwNbDhLNG/LMdxHD2YQ=="
+    },
     "filename-regex": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/filename-regex/-/filename-regex-2.0.1.tgz",
@@ -4647,6 +4652,44 @@
       "resolved": "https://registry.npmjs.org/filesize/-/filesize-3.5.11.tgz",
       "integrity": "sha512-ZH7loueKBoDb7yG9esn1U+fgq7BzlzW6NRi5/rMdxIZ05dj7GFD/Xc5rq2CDt5Yq86CyfSYVyx4242QQNZbx1g=="
     },
+    "filestack-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/filestack-js/-/filestack-js-1.5.1.tgz",
+      "integrity": "sha512-NXYZhKl0JySNNpQNWtKdyMfQAiMw6VF8Mx+XWHGg+gh3By3ITjR0wTorjM02CVr/6Od/DXQCN1e+6np1Zex9Nw==",
+      "requires": {
+        "abab": "1.0.4",
+        "bowser": "1.9.4",
+        "file-type": "8.1.0",
+        "filestack-loader": "3.0.4",
+        "is-svg": "3.0.0",
+        "isutf8": "2.0.2",
+        "mime-types": "2.1.20",
+        "spark-md5": "3.0.0",
+        "superagent": "3.8.3",
+        "tcomb-validation": "3.4.1",
+        "tslib": "1.9.3"
+      },
+      "dependencies": {
+        "is-svg": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/is-svg/-/is-svg-3.0.0.tgz",
+          "integrity": "sha512-gi4iHK53LR2ujhLVVj+37Ykh9GLqYHX6JOVXbLAucaG/Cqw9xwdFOjDM2qeifLs1sF1npXXFvDu0r5HNgCMrzQ==",
+          "requires": {
+            "html-comment-regex": "1.1.1"
+          }
+        }
+      }
+    },
+    "filestack-loader": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/filestack-loader/-/filestack-loader-3.0.4.tgz",
+      "integrity": "sha512-b6uOCWHd1gM0+5KBA1rA4qfEgTqyTr5umLM4bBWT4z98WUwxa6KzCiq+z0VnR4rN+NCx6kyZ/wLXjGcPU32TxQ=="
+    },
+    "filestack-react": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/filestack-react/-/filestack-react-2.0.0.tgz",
+      "integrity": "sha512-+lOqPx2XYsvm3pJutjlDTyG8fdrJAefN0QLi8crJfwI1dJffOjK84dnQJHQ9aQzxF37A1cHI8ZbPscv7w6bRTA=="
+    },
     "fill-range": {
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-2.2.4.tgz",
@@ -6516,6 +6559,11 @@
         "handlebars": "4.0.11"
       }
     },
+    "isutf8": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/isutf8/-/isutf8-2.0.2.tgz",
+      "integrity": "sha512-9lNbG6k+PE6vuFnPTHjhtX79/LDMQrXoFx1MOEjXXCyqFCSahWKAzuAb9G5ct+lfS12aQxNmC0tiZuyujvr4Uw=="
+    },
     "iterall": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/iterall/-/iterall-1.2.2.tgz",
@@ -10805,6 +10853,11 @@
       "resolved": "https://registry.npmjs.org/source-map-url/-/source-map-url-0.4.0.tgz",
       "integrity": "sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM="
     },
+    "spark-md5": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/spark-md5/-/spark-md5-3.0.0.tgz",
+      "integrity": "sha1-NyIifFTi+vJLHcbZM8wUTm9xv+8="
+    },
     "spdx-correct": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.0.0.tgz",
@@ -11170,6 +11223,19 @@
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-0.2.8.tgz",
       "integrity": "sha1-mTcqXJmb8t8WCvwNdL7U9HlIzSI="
     },
+    "tcomb": {
+      "version": "3.2.27",
+      "resolved": "https://registry.npmjs.org/tcomb/-/tcomb-3.2.27.tgz",
+      "integrity": "sha512-XWdJW7F/M3YzXhDEUP8ycmNWoYymBtsHwCHoda0YF44RthJsls95TqDrmpAlC1sB/KXaCvkdBlcNRq+AaV6klA=="
+    },
+    "tcomb-validation": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/tcomb-validation/-/tcomb-validation-3.4.1.tgz",
+      "integrity": "sha512-urVVMQOma4RXwiVCa2nM2eqrAomHROHvWPuj6UkDGz/eb5kcy0x6P0dVt6kzpUZtYMNoAqJLWmz1BPtxrtjtrA==",
+      "requires": {
+        "tcomb": "3.2.27"
+      }
+    },
     "term-size": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/term-size/-/term-size-1.2.0.tgz",
@@ -11340,6 +11406,11 @@
       "resolved": "https://registry.npmjs.org/trim-right/-/trim-right-1.0.1.tgz",
       "integrity": "sha1-yy4SAwZ+DI3h9hQJS5/kVwTqYAM="
     },
+    "tslib": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.3.tgz",
+      "integrity": "sha512-4krF8scpejhaOgqzBEcGM7yDIEfi0/8+8zDRZhNZZ2kjmHJ4hv3zCbQWxoJGz1iw5U0Jl0nma13xzHXcncMavQ=="
+    },
     "tty-browserify": {
       "version": "0.0.0",
       "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz",

client/package.json

@@ -12,6 +12,8 @@
     "apollo-link-error": "^1.1.0",
     "apollo-link-http": "^1.5.4",
     "auth0-lock": "^11.9.0",
+    "filestack-js": "^1.5.1",
+    "filestack-react": "^2.0.0",
     "graphql": "^14.0.0",
     "graphql-tag": "^2.9.2",
     "react": "^16.4.2",

client/src/components/UserImages.js

@@ -1,48 +1,78 @@
 import React from 'react';
+import {graphql, compose} from 'react-apollo'
+import {getRolesQuery, updateUserMutation, getUsersQuery} from '../queries/queries'
+
+import ReactFilestack from 'filestack-react';
+
+// Material-ui
+
+import { withStyles } from '@material-ui/core/styles'
 import Button from '@material-ui/core/Button';
-import Dialog from '@material-ui/core/Dialog';
-import DialogActions from '@material-ui/core/DialogActions';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogContentText from '@material-ui/core/DialogContentText';
-import DialogTitle from '@material-ui/core/DialogTitle';
+import Grid from '@material-ui/core/Grid'
+
+const options = {
+  accept: 'image/*',
+  maxFiles: 5,
+  storeTo: {
+    location: 's3',
+  },
+};
+
+const styles = theme => ({
+  
+  button: {
+    margin: theme.spacing.unit,
+    marginTop: theme.spacing.unit * 3
+  },
+})
 
 class UserImages extends React.Component {
-  state = {
-    open: true,
-  };
 
-  handleClickOpen = () => {
-    this.setState({ open: true });
-  };
+  constructor (props) {
+    super(props)
+    this.state = {
+      avatarHandle: ''
+    }
+  }
+  
+  onSuccess = (uploadResults) => {
+    console.log('onSuccess')
+    console.log(uploadResults)
 
-  handleClose = () => {
-    this.setState({ open: false });
-  };
+    const handle = uploadResults.filesUploaded[0].handle
+    this.setState({avatarHandle: handle})
+  }
+
+  onError = () => {
+    console.log('onError')
+  }
 
   render() {
+    const { classes } = this.props
     return (
       <div>
-        <Dialog
-          open={this.state.open}
-          onClose={this.handleClose}
-          aria-labelledby="alert-dialog-title"
-          aria-describedby="alert-dialog-description"
-        >
-          <DialogTitle id="alert-dialog-title">{"Section under development."}</DialogTitle>
-          <DialogContent>
-            <DialogContentText id="alert-dialog-description">
-              The functionality of this section has not been developed yet. We expect to have it for October 2018. Thanks for your understanding.
-            </DialogContentText>
-          </DialogContent>
-          <DialogActions>
-            <Button onClick={this.handleClose} color="primary" autoFocus>
-              Close
+        <Grid container justify='center' >
+          <Grid item>
+            <img  src="https://cdn.filestackcontent.com/fzcnGsUSAuHhQquYO48I" alt='1' />
+            <img  src={"https://cdn.filestackcontent.com/"  + this.state.avatarHandle} alt='2' />
+            <Button variant='contained' color='secondary' className={classes.button}>
+              <ReactFilestack
+                apikey={'AH97QJOXTHwdBXjydQgABz'}
+                options={options}
+                onSuccess={this.onSuccess}
+                onError={this.onError}
+                link
+              >Pick your avatar bitch!</ReactFilestack>
             </Button>
-          </DialogActions>
-        </Dialog>
+          </Grid>
+        </Grid>
       </div>
     );
   }
 }
 
-export default UserImages;
+export default compose(
+  graphql(getRolesQuery, {name: 'getRolesQuery'}),
+  graphql(updateUserMutation, {name: 'updateUserMutation'}),
+  withStyles(styles)
+)(UserImages) // This technique binds more than one query to a single component.