From 47eefc710e2e4ba10f54a474648e5c2e9f22f146 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sat, 15 Sep 2018 16:58:31 +0200 Subject: [PATCH] Uploading and showing pictures working well. --- client/package-lock.json | 71 ++++++++++++++++++++++ client/package.json | 2 + client/src/components/UserImages.js | 94 +++++++++++++++++++---------- 3 files changed, 135 insertions(+), 32 deletions(-) diff --git a/client/package-lock.json b/client/package-lock.json index 1aca4e3dc..830e87ede 100644 --- a/client/package-lock.json +++ b/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", diff --git a/client/package.json b/client/package.json index 5b58271ac..0bd9cf86c 100644 --- a/client/package.json +++ b/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", diff --git a/client/src/components/UserImages.js b/client/src/components/UserImages.js index 559d91787..ba1b2609c 100644 --- a/client/src/components/UserImages.js +++ b/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 (
- - {"Section under development."} - - - The functionality of this section has not been developed yet. We expect to have it for October 2018. Thanks for your understanding. - - - - - - + +
); } } -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.