ProfileImages code implemented

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 (
-      <div>
+      <Paper className={classes.root}>
+        <Typography className={classes.typography} variant='headline' gutterBottom>
+              Profile Images
+        </Typography>
+        <form onSubmit={this.submitForm.bind(this)}>
+
         <Grid container justify='center' >
           <Grid item>
-          <div className={classes.row}>
-            <Avatar alt="Remy Sharp" src={Portrait} className={classes.avatar} />
             <Avatar
-              alt="Adelle Charles"
+              alt="Avatar"
               src={Portrait}
-              className={classNames(classes.avatar, classes.bigAvatar)}
+              className={classNames(classes.bigAvatar)}
             />
-            </div>
-             
-            <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>
           </Grid>
         </Grid>
-      </div>
+        
+        <Typography className={classes.typography} variant='body1' gutterBottom align='left'>
+        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.
+        </Typography>
+
+          <div>
+            <Grid container justify='center' >
+              <Grid item>
+                                 
+                <Button variant='contained' color='secondary' className={classes.button}>
+                  <ReactFilestack
+                    apikey={'AH97QJOXTHwdBXjydQgABz'}
+                    options={options}
+                    onSuccess={this.onSuccess}
+                    onError={this.onError}
+                    link
+                  >File Upload Tool</ReactFilestack>
+                </Button>
+              </Grid>
+            </Grid>
+          </div>
+
+          <Typography className={classes.typography} variant='body1' gutterBottom align='left'>
+          This is how your new avatar will look like. Press save to proceed with the change.
+          </Typography>
+
+          <Grid container justify='center' >
+            <Grid item>
+              <Avatar
+                alt="Avatar"
+                src={"https://cdn.filestackcontent.com/"  + this.state.avatarHandle}
+                className={classNames(classes.bigAvatar)}
+              />
+            </Grid>
+          </Grid>
+
+          <Grid container justify='center' >
+            <Grid item>
+              <Button variant='contained' color='secondary' className={classes.button} onClick={this.submitForm.bind(this)}>Save</Button>
+            </Grid>
+          </Grid>
+        </form>
+      </Paper>
+
     );
   }
 }
 
 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.

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}

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)
       }
     }