From 62e70f75f93ce390d7d727e45dbf4374d7869691 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Mon, 17 Sep 2018 12:56:03 +0200 Subject: [PATCH] ProfileImages code implemented --- client/src/components/UserImages.js | 146 +++++++++++++++++++++++----- client/src/queries/queries.js | 21 +++- server/schema/schema.js | 24 ++++- 3 files changed, 164 insertions(+), 27 deletions(-) diff --git a/client/src/components/UserImages.js b/client/src/components/UserImages.js index ffbc132b2..99c81a490 100644 --- a/client/src/components/UserImages.js +++ b/client/src/components/UserImages.js @@ -1,6 +1,6 @@ import React from 'react'; import {graphql, compose} from 'react-apollo' -import {getRolesQuery, updateUserMutation, getUsersQuery} from '../queries/queries' +import {updateUserImagesMutation, getUsersQuery} from '../queries/queries' import Avatar from '@material-ui/core/Avatar'; import classNames from 'classnames'; @@ -11,7 +11,9 @@ import Portrait from '../img/portrait.jpg' 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'], @@ -40,23 +42,89 @@ const styles = theme => ({ width: 60, height: 60, }, + root: { + width: '50%', + flexGrow: 1, + padding: 10, + marginLeft: '25%', + marginTop: '2%' + }, + typography: { + width: '80%', + marginLeft: '10%', + marginTop: 40 + }, + button: { + margin: theme.spacing.unit, + marginTop: theme.spacing.unit * 3 + } }) class UserImages extends React.Component { constructor (props) { super(props) + + this.defaultValuesSet = false + this.state = { - avatarHandle: '' + avatarHandle: '', + avatarChangeDate: '' } } + submitForm (e) { + e.preventDefault() + this.props.updateUserImagesMutation({ + variables: { + id: this.state.id, + avatarHandle: this.state.avatarHandle, + avatarChangeDate: this.state.avatarChangeDate + }, + refetchQueries: [{ query: getUsersQuery}] // This allow us to re run whatever queries are necesary after the mutation. + }) + + /* 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.avatarHandle + user.avatarChangeDate = this.state.avatarChangeDate + + localStorage.setItem('loggedInUser', JSON.stringify(user)) + } + + 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 = '' } + + /* 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 - this.setState({avatarHandle: handle}) + const currentDate = (new Date()).toString(); + this.setState({avatarHandle: handle, avatarChangeDate: currentDate}) } onError = () => { @@ -66,36 +134,70 @@ class UserImages extends React.Component { render() { const { classes } = this.props return ( -
+ + + Profile Images + +
+ -
- -
- - 2 - -
+ + + This is your current Avatar. 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. + + +
+ + + + + + +
+ + + This is how your new avatar will look like. Press save to proceed with the change. + + + + + + + + + + + + + + + + ); } } export default compose( - graphql(updateUserMutation, {name: 'updateUserMutation'}), + graphql(updateUserImagesMutation, {name: 'updateUserImagesMutation'}), withStyles(styles) )(UserImages) // This technique binds more than one query to a single component. diff --git a/client/src/queries/queries.js b/client/src/queries/queries.js index d4571f70c..b3cf128c3 100644 --- a/client/src/queries/queries.js +++ b/client/src/queries/queries.js @@ -97,4 +97,23 @@ mutation( } } ` -export {getUsersQuery, getUserByAuthIdQuery, getRolesQuery, updateUserMutation, getUserProfileQuery} + +const updateUserImagesMutation = gql` +mutation( + $id: ID!, + $avatarHandle:String, + $avatarChangeDate:String +) + { + updateUser ( + id: $id, + avatarHandle:$avatarHandle, + avatarChangeDate: $avatarChangeDate + ) + { + id + alias + } +} +` +export {getUsersQuery, getUserByAuthIdQuery, getRolesQuery, getUserProfileQuery, updateUserMutation, updateUserImagesMutation} diff --git a/server/schema/schema.js b/server/schema/schema.js index a9dab9416..2c37ba96d 100644 --- a/server/schema/schema.js +++ b/server/schema/schema.js @@ -179,8 +179,6 @@ const Mutation = new GraphQLObjectType({ isDeveloper: {type: GraphQLInt}, isTrader: {type: GraphQLInt}, isDataAnalyst: {type: GraphQLInt}, - avatarHandle: {type: GraphQLString}, - avatarChangeDate: {type: GraphQLString}, roleId: {type: new GraphQLNonNull(GraphQLString)} }, resolve (parent, args) { @@ -196,11 +194,29 @@ const Mutation = new GraphQLObjectType({ isDeveloper: args.isDeveloper, isTrader: args.isTrader, isDataAnalyst: args.isDataAnalyst, - avatarHandle: args.avatarHandle, - avatarChangeDate: args.avatarChangeDate, roleId: args.roleId } + return User.update(key, updatedUser) + } + }, + updateUserImages: { + type: UserType, + args: { + id: {type: new GraphQLNonNull(GraphQLID)}, + avatarHandle: {type: GraphQLString}, + avatarChangeDate: {type: GraphQLString} + }, + resolve (parent, args) { + let key = { + _id: args.id + } + + let updatedUser = { + avatarHandle: args.avatarHandle, + avatarChangeDate: args.avatarChangeDate + } + return User.update(key, updatedUser) } }