From 74cec0392a84fd2a5ba399329ca4f6fb05aeb77b Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Tue, 9 Oct 2018 10:01:58 +0200 Subject: [PATCH] Profile Images on hold --- client/src/components/About.js | 2 +- client/src/components/Contact.js | 2 +- client/src/components/Modules.js | 2 +- client/src/components/ProfileImages.js | 350 +++---------------------- 4 files changed, 43 insertions(+), 313 deletions(-) diff --git a/client/src/components/About.js b/client/src/components/About.js index 15dbb3906..bed14f40e 100644 --- a/client/src/components/About.js +++ b/client/src/components/About.js @@ -34,7 +34,7 @@ class About extends React.Component { - The functionality of this section has not been developed yet. We expect to have it for October 2018. Thanks for your understanding. + The functionality of this section has not been developed yet. We expect to have it for November 2018. Thanks for your understanding. diff --git a/client/src/components/Contact.js b/client/src/components/Contact.js index 0f694b08d..268efeaee 100644 --- a/client/src/components/Contact.js +++ b/client/src/components/Contact.js @@ -35,7 +35,7 @@ class Contact extends React.Component { - The functionality of this section has not been developed yet. We expect to have it for October 2018. Thanks for your understanding. + The functionality of this section has not been developed yet. We expect to have it for November 2018. Thanks for your understanding. diff --git a/client/src/components/Modules.js b/client/src/components/Modules.js index 483136459..aa69c80cb 100644 --- a/client/src/components/Modules.js +++ b/client/src/components/Modules.js @@ -31,7 +31,7 @@ class Modules extends React.Component { {"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. + The functionality of this section has not been developed yet. We expect to have it for November 2018. Thanks for your understanding. diff --git a/client/src/components/ProfileImages.js b/client/src/components/ProfileImages.js index 9df04d93c..268efeaee 100644 --- a/client/src/components/ProfileImages.js +++ b/client/src/components/ProfileImages.js @@ -1,322 +1,52 @@ -import React from 'react'; -import {graphql, compose} from 'react-apollo' -import {updateUserImagesMutation, getUsersQuery} from '../queries/queries' -import Avatar from '@material-ui/core/Avatar'; -import classNames from 'classnames'; +import React from 'react' +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 CssBaseline from '@material-ui/core/CssBaseline' -import ReactFilestack from 'filestack-react' - -// Material-ui - -import { withStyles } from '@material-ui/core/styles' -import Button from '@material-ui/core/Button'; -import Paper from '@material-ui/core/Paper' -import Grid from '@material-ui/core/Grid' -import Typography from '@material-ui/core/Typography' - -const options = { - accept: ['image/jpeg', 'image/jpg', 'image/png'], - maxFiles: 1, - imageDim: [300, 300], - maxSize: 0.25 * 1024 * 1024, // 1/4 of 1 Mb - storeTo: { - location: 's3', - }, -}; - -const styles = theme => ({ - - button: { - margin: theme.spacing.unit, - marginTop: theme.spacing.unit * 3 - }, - row: { - display: 'flex', - justifyContent: 'center', - }, - avatar: { - margin: 10, - }, - bigAvatar: { - width: 60, - height: 60, - }, - root: { - width: '50%', - flexGrow: 1, - padding: 10, - marginLeft: '25%', - marginTop: '2%' - }, - typography: { - width: '80%', - marginLeft: '10%', - marginTop: 40 - } -}) - -class ProfileImages extends React.Component { - - constructor (props) { - super(props) - - this.defaultValuesSet = false - - this.state = { - avatarHandle: '', - avatarChangeDate: '', - newAvatarHandle: '', - saveDisabled: true, - uploadToolDisabled: false, - showNewAvatar: false, - needToWait: false, - removeCurrentAvatar: false - } +class Contact extends React.Component { + state = { + open: true } - submitForm (e) { - e.preventDefault() - this.props.updateUserImagesMutation({ - variables: { - id: this.state.id, - avatarHandle: this.state.newAvatarHandle, - avatarChangeDate: this.state.avatarChangeDate - }, - refetchQueries: [{ query: getUsersQuery}] // This allow us to re run whatever queries are necesary after the mutation. - }) - - this.setState({saveDisabled: true, removeCurrentAvatar:true}) - - /* Before we are done, we need to update the state of the local storage. */ - - let user = JSON.parse(localStorage.getItem('loggedInUser')) - - user.avatarHandle = this.state.newAvatarHandle - user.avatarChangeDate = this.state.avatarChangeDate - - localStorage.setItem('loggedInUser', JSON.stringify(user)) + handleClickOpen = () => { + this.setState({ open: true }) } - componentWillMount () { - if (this.defaultValuesSet === false) { - let userData = localStorage.getItem('loggedInUser') - - if (userData === 'undefined') { return } - - let user = JSON.parse(userData) - this.defaultValuesSet = true - - /* To avoid console warning, we need to take care of the fields that are null. */ - - if (user.avatarHandle === null) { user.avatarHandle = '' } - if (user.avatarChangeDate === null) { user.avatarChangeDate = '' } - - /* Here we will check that the user does not change the avatar more often than once a day. */ - - let avatarChangeDate = (new Date(user.avatarChangeDate)).valueOf() - let now = (new Date()).valueOf() - let timePassed = now - avatarChangeDate - let oneDay = 1000 * 60 * 60 * 24 - - - - if (timePassed < oneDay) { - this.setState({ - needToWait: true - }) - } else { - this.setState({ - needToWait: false - }) - } - - /* Now we are ready to set the initial state. */ - - this.setState({ - id: user.id, - avatarHandle: user.avatarHandle, - avatarChangeDate: user.avatarChangeDate - }) - } - } - - onSuccess = (uploadResults) => { - console.log('onSuccess') - console.log(uploadResults) - - const handle = uploadResults.filesUploaded[0].handle - - let localDate = new Date() - let currentDate = new Date(Date.UTC( - localDate.getUTCFullYear(), - localDate.getUTCMonth(), - localDate.getUTCDate(), - localDate.getUTCHours(), - localDate.getUTCMinutes(), - localDate.getUTCSeconds(), - localDate.getUTCMilliseconds()) - ) - - currentDate.toISOString() - - this.setState( - { - newAvatarHandle: handle, - avatarChangeDate: currentDate, - showNewAvatar: true, - uploadToolDisabled: true, - saveDisabled: false - } - ) + handleClose = () => { + this.setState({ open: false }) } - onError = (err) => { - console.log('onError') - console.log(err) - } - - onRemoveSuccess = (err) => { - console.log('onRemoveSuccess') - console.log(err) - } - - showCurrentAvatar() { - - const { classes } = this.props - - if (this.state.removeCurrentAvatar === false) { - - return ( -
- - This is your current Avatar: - - - - - - - -
- ) - - } else { - - return ( -
- -
- ) - } - - - } - - showNewAvatar() { - if (this.state.showNewAvatar === true) { - const { classes } = this.props - return ( -
- - This is how your new avatar will look like. Press save to proceed with the change. - - - - - - - -
- ) - } - } - - showUploadTool() { - const { classes } = this.props - if (this.state.needToWait === true) { - return ( -
- - You updated your Avatar in the last 24 hours. As a protection against denial of service attacks, the system does not allow users to update their Avatar in less than 24 hs since their last update. Please come back tomorrow. - -
- ) - } else { - return( -
- - If you want, you can choose a new one by picking an image from your computer, camera or the web, and crop it with the following tool. - - - - - - -
- ) - } - } - - render() { - const { classes } = this.props + render () { return ( - - - Profile Images - -
- {this.showCurrentAvatar()} - {this.showUploadTool()} - {this.showNewAvatar()} - - - - - - -
- - - ); + + + + + {"Section under development."} + + + + The functionality of this section has not been developed yet. We expect to have it for November 2018. Thanks for your understanding. + + + + + + + + ) } } -export default compose( - graphql(updateUserImagesMutation, {name: 'updateUserImagesMutation'}), - withStyles(styles) -)(ProfileImages) // This technique binds more than one query to a single component. +export default Contact