Individual Form to INSERT and UPDATE a user profile, all working

client/src/components/AddUser.js

@@ -1,5 +1,4 @@
 import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
 import {graphql, compose} from 'react-apollo';
 import {getRolesQuery, addUserMutation, getUsersQuery} from '../queries/queries';
 
@@ -8,24 +7,9 @@ class AddUser extends Component {
   super(props);
   this.state = {
       alias: '',
-      firstName: '',
-      lastName: '',
-      isDeveloper: 0,
-      isTrader: 0,
-      isDataAnalyst: 0,
-      roleId: '1'
+      authId: '1'
     };
   }
-    displayRoles(){
-        var data = this.props.getRolesQuery; // When there is more than one query binded to a single componente 'data' is replaced by thename of the query given below at the binding operation.
-        if(data.loading){
-            return( <option disabled>Loading roles</option> );
-        } else {
-            return data.roles.map(role => {
-                return( <option key={ role.id } value={role.id}>{ role.name }</option> );
-            });
-        }
-    }
 
     submitForm(e){
       console.log(this.state);
@@ -33,84 +17,17 @@ class AddUser extends Component {
       this.props.addUserMutation({
         variables: {
           alias: this.state.alias,
-          firstName: this.state.firstName,
-          lastName: this.state.lastName,
-          isDeveloper: this.state.isDeveloper,
-          isTrader: this.state.isTrader,
-          isDataAnalyst: this.state.isDataAnalyst,
-          roleId: this.state.roleId
+          authId: this.state.authId
         },
         refetchQueries: [{ query: getUsersQuery}] // This allow us to re run whatever queries are necesary after the mutation.
       });
     }
 
-    handleCheckBoxes(e){
-      let fieldValue;
-      if (e.target.checked === true) {
-        fieldValue = 1;
-      } else {
-        fieldValue = 0;
-
-        /* When the user unchecks one of the checkboxes, we need to make sure that that Role is not the one selected at the SELECT,
-        and if it is, then we need to automatically select another one */
-
-        let select = ReactDOM.findDOMNode(this.refs.select);
-        switch (e.target.id) {
-          case "isDeveloper":
-            if (select.value === "2") {
-              select.value = "1";
-              this.setState({ roleId: "1"});
-            }
-            break;
-
-          case "isTrader":
-            if (select.value === "3") {
-              select.value = "1";
-              this.setState({ roleId: "1"});
-            }
-            break;
-
-          case "isDataAnalyst":
-            if (select.value === "4") {
-              select.value = "1";
-              this.setState({ roleId: "1"});
-            }
-            break;
-          default:
-        }
-      }
-      this.setState({ [e.target.id]: fieldValue})
-    }
-
-    handleSelect(e){
-      let checkbox;
-      switch (e.target.value) {
-        case "2":
-          checkbox = ReactDOM.findDOMNode(this.refs.id2);
-          checkbox.checked = true;
-          this.setState({ isDeveloper: 1})
-          break;
-        case "3":
-          checkbox = ReactDOM.findDOMNode(this.refs.id3);
-          checkbox.checked = true;
-          this.setState({ isTrader: 1})
-          break;
-        case "4":
-          checkbox = ReactDOM.findDOMNode(this.refs.id4);
-          checkbox.checked = true;
-          this.setState({ isDataAnalyst: 1})
-          break;
-        default:
-      }
-
-      this.setState({ roleId:e.target.value })
-    }
-
     render(){
         return(
           <div className="row">
               <form className="col s12" onSubmit={this.submitForm.bind(this)}>
-
+                <p>Choose an Alias that will identify you anonimously across the whole Advanced Algos ecosystem. Choose it carefully, since the the Alias can not be changed later.</p>
                 <div className="row">
                   <div className="input-field col s6">
                     <input id="alias" type="text" className="validate" onChange={ (e) => this.setState({ alias:e.target.value})}/>
@@ -118,49 +35,10 @@ class AddUser extends Component {
                   </div>
                 </div>
                 <div className="row">
-                  <div className="input-field col s6">
-                    <input id="firstName" type="text" className="validate" onChange={ (e) => this.setState({ firstName:e.target.value})}/>
-                    <label htmlFor="firstName">First Name</label>
-                  </div>
-                </div>
-                <div className="row">
-                  <div className="input-field col s6">
-                    <input id="last_name" type="text" className="validate" onChange={ (e) => this.setState({ lastName:e.target.value})}/>
-                    <label htmlFor="last_name">Last Name</label>
-                  </div>
-                </div>
-                <div className="row">
-                  <div className="input-field col s12">
-                    <input id="isDeveloper" type="checkbox" ref="id2" onChange={this.handleCheckBoxes.bind(this)}/>
-                    <label htmlFor="isDeveloper">Developer</label>
-                  </div>
-                </div>
-                <div className="row">
-                  <div className="input-field col s12">
-                    <input id="isTrader" type="checkbox" ref="id3" onChange={this.handleCheckBoxes.bind(this)}/>
-                    <label htmlFor="isTrader">Trader</label>
-                  </div>
-                </div>
-                <div className="row">
-                  <div className="input-field col s12">
-                    <input id="isDataAnalyst" type="checkbox" ref="id4" onChange={this.handleCheckBoxes.bind(this)}/>
-                    <label htmlFor="isDataAnalyst">Data Analyst</label>
-                  </div>
-                </div>
-                <div className="row">
-                    <select id="role" ref="select" onChange={this.handleSelect.bind(this)}>
-                        { this.displayRoles() }
-                    </select>
-                    <label htmlFor="role">Current Role:</label>
-                </div>
-
-                <div className="row">
-                    <button>+</button>
+                    <button>Next</button>
                 </div>
               </form>
             </div>
-
-
         );
     }
 }

client/src/components/Profile.js

@@ -1,11 +1,13 @@
 import React from 'react'
 
 import AddUser from './AddUser';
+import UpdateUser from './UpdateUser';
 
 const Profile = () => {
   return (
     <div>
       <AddUser/>
+      <UpdateUser/>
     </div>
   )
 }

client/src/components/UpdateUser.js

@@ -0,0 +1,165 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import {graphql, compose} from 'react-apollo';
+import {getRolesQuery, updateUserMutation, getUsersQuery} from '../queries/queries';
+
+class UpdateUser extends Component {
+  constructor(props){
+  super(props);
+  this.state = {
+      id: '5b90fc33ae71ee3798b2317d', // TODO this Id is the one that should be available to all components after the validation that the user is authenticated.
+      firstName: '',
+      lastName: '',
+      isDeveloper: 0,
+      isTrader: 0,
+      isDataAnalyst: 0,
+      roleId: '1'
+    };
+  }
+    displayRoles(){
+        var data = this.props.getRolesQuery; // When there is more than one query binded to a single componente 'data' is replaced by thename of the query given below at the binding operation.
+        if(data.loading){
+            return( <option disabled>Loading roles</option> );
+        } else {
+            return data.roles.map(role => {
+                return( <option key={ role.id } value={role.id}>{ role.name }</option> );
+            });
+        }
+    }
+
+    submitForm(e){
+      console.log(this.state);
+      e.preventDefault();
+      this.props.updateUserMutation({
+        variables: {
+          id: this.state.id,
+          firstName: this.state.firstName,
+          lastName: this.state.lastName,
+          isDeveloper: this.state.isDeveloper,
+          isTrader: this.state.isTrader,
+          isDataAnalyst: this.state.isDataAnalyst,
+          roleId: this.state.roleId
+        },
+        refetchQueries: [{ query: getUsersQuery}] // This allow us to re run whatever queries are necesary after the mutation.
+      });
+    }
+
+    handleCheckBoxes(e){
+      let fieldValue;
+      if (e.target.checked === true) {
+        fieldValue = 1;
+      } else {
+        fieldValue = 0;
+
+        /* When the user unchecks one of the checkboxes, we need to make sure that that Role is not the one selected at the SELECT,
+        and if it is, then we need to automatically select another one */
+
+        let select = ReactDOM.findDOMNode(this.refs.select);
+        switch (e.target.id) {
+          case "isDeveloper":
+            if (select.value === "2") {
+              select.value = "1";
+              this.setState({ roleId: "1"});
+            }
+            break;
+
+          case "isTrader":
+            if (select.value === "3") {
+              select.value = "1";
+              this.setState({ roleId: "1"});
+            }
+            break;
+
+          case "isDataAnalyst":
+            if (select.value === "4") {
+              select.value = "1";
+              this.setState({ roleId: "1"});
+            }
+            break;
+          default:
+        }
+      }
+      this.setState({ [e.target.id]: fieldValue})
+    }
+
+    handleSelect(e){
+      let checkbox;
+      switch (e.target.value) {
+        case "2":
+          checkbox = ReactDOM.findDOMNode(this.refs.id2);
+          checkbox.checked = true;
+          this.setState({ isDeveloper: 1})
+          break;
+        case "3":
+          checkbox = ReactDOM.findDOMNode(this.refs.id3);
+          checkbox.checked = true;
+          this.setState({ isTrader: 1})
+          break;
+        case "4":
+          checkbox = ReactDOM.findDOMNode(this.refs.id4);
+          checkbox.checked = true;
+          this.setState({ isDataAnalyst: 1})
+          break;
+        default:
+      }
+
+      this.setState({ roleId:e.target.value })
+    }
+
+    render(){
+        return(
+          <div className="row">
+              <form className="col s12" onSubmit={this.submitForm.bind(this)}>
+                <p>Complete your profile with the following optional information. Providing your real name might help other users trust you more.</p>
+                <div className="row">
+                  <div className="input-field col s6">
+                    <input id="firstName" type="text" className="validate" onChange={ (e) => this.setState({ firstName:e.target.value})}/>
+                    <label htmlFor="firstName">First Name</label>
+                  </div>
+                </div>
+                <div className="row">
+                  <div className="input-field col s6">
+                    <input id="last_name" type="text" className="validate" onChange={ (e) => this.setState({ lastName:e.target.value})}/>
+                    <label htmlFor="last_name">Last Name</label>
+                  </div>
+                </div>
+                <div className="row">
+                  <div className="input-field col s12">
+                    <input id="isDeveloper" type="checkbox" ref="id2" onChange={this.handleCheckBoxes.bind(this)}/>
+                    <label htmlFor="isDeveloper">Developer</label>
+                  </div>
+                </div>
+                <div className="row">
+                  <div className="input-field col s12">
+                    <input id="isTrader" type="checkbox" ref="id3" onChange={this.handleCheckBoxes.bind(this)}/>
+                    <label htmlFor="isTrader">Trader</label>
+                  </div>
+                </div>
+                <div className="row">
+                  <div className="input-field col s12">
+                    <input id="isDataAnalyst" type="checkbox" ref="id4" onChange={this.handleCheckBoxes.bind(this)}/>
+                    <label htmlFor="isDataAnalyst">Data Analyst</label>
+                  </div>
+                </div>
+                <div className="row">
+                    <select id="role" ref="select" onChange={this.handleSelect.bind(this)}>
+                        { this.displayRoles() }
+                    </select>
+                    <label htmlFor="role">Current Role:</label>
+                </div>
+
+                <div className="row">
+                    <button>Update</button>
+                </div>
+              </form>
+            </div>
+
+
+        );
+    }
+}
+
+export default compose(
+  graphql(getRolesQuery, {name: "getRolesQuery"}),
+  graphql(updateUserMutation, {name: "updateUserMutation"})
+) (UpdateUser); // This technique binds more than one query to a single component.

client/src/components/UserList.js

@@ -20,15 +20,20 @@ class UserList extends Component {
     } else {
       return data.users.map(user => {
         return (
-          <li id="user-list-li" key={user.id} onClick={ (e) => {this.setState({ selected: user.id})}} >{user.alias}</li>
+          <li key={user.id} onClick={ (e) => {
+            this.setState({ selected: user.id});
+            }
+          } >{user.alias}</li>
         )
       });
     }
   }
   render() {
+
     return (
+
       <div>
-        <ul id='user-list'>
+        <ul>
           {this.displayUsers()}
         </ul>
         <UserProfile userId={this.state.selected}/>

client/src/components/UserProfile.js

@@ -5,11 +5,12 @@ import {getUserProfileQuery} from '../queries/queries';
 class UserProfile extends Component {
 
   displayUserProfile(){
+
     const {user} = this.props.data;
 
     if(user){
         return(
-            <div id="user-profile">
+            <div>
                 <h2>{ user.alias }</h2>
                 <p>{ user.firstName }</p>
                 <p>{ user.lastName }</p>
@@ -22,6 +23,7 @@ class UserProfile extends Component {
   }
 
   render() {
+
     return (
       <div>
         {this.displayUserProfile()}

client/src/queries/queries.js

@@ -22,6 +22,7 @@ query($id: ID){
       firstName
       lastName
       role {
+        id
         name
       }
     }
@@ -38,11 +39,20 @@ const getRolesQuery = gql`
 `
 
 const addUserMutation = gql`
-mutation($alias: String!, $firstName:String, $lastName:String, $isDeveloper:Int, $isTrader:Int, $isDataAnalyst:Int, $roleId:String!) {
-    addUser (alias: $alias, firstName:$firstName, lastName: $lastName, isDeveloper: $isDeveloper, isTrader: $isTrader, isDataAnalyst: $isDataAnalyst, roleId: $roleId){
+mutation($alias: String!, $authId:String!) {
+    addUser (alias: $alias, authId: $authId){
+      id
+      authId
+    }
+}
+`
+
+const updateUserMutation = gql`
+mutation($id: ID!, $firstName:String, $lastName:String, $isDeveloper:Int, $isTrader:Int, $isDataAnalyst:Int, $roleId:String!) {
+    updateUser (id: $id, firstName:$firstName, lastName: $lastName, isDeveloper: $isDeveloper, isTrader: $isTrader, isDataAnalyst: $isDataAnalyst, roleId: $roleId){
       id
       alias
     }
 }
 `
-export {getUsersQuery, getRolesQuery, addUserMutation, getUserProfileQuery}
+export {getUsersQuery, getRolesQuery, addUserMutation, updateUserMutation, getUserProfileQuery}

server/models/user.js

@@ -2,6 +2,7 @@ const mongoose = require('mongoose');
 const Schema = mongoose.Schema;
 
 const userSchema = new Schema({
+authId: String,
 alias: String,
 firstName:String,
 lastName: String,

server/schema/schema.js

@@ -25,6 +25,7 @@ const UserType = new GraphQLObjectType({
   name: 'User',
   fields: () => ({
     id: { type: GraphQLID},
+    authId: { type: GraphQLString},
     alias: {type: GraphQLString},
     firstName: {type: GraphQLString},
     lastName: {type: GraphQLString},
@@ -64,7 +65,8 @@ const RootQuery = new GraphQLObjectType({
         args: {id: {type: GraphQLID}},
         resolve(parent,args) {
           // Code to get data from data source.
-          return User.findById(args.id);
+
+          return User.findById(args.id, onRespnse);
         }
       },
       role: {
@@ -99,23 +101,14 @@ const Mutation = new GraphQLObjectType({
       type: UserType,
       args: {
         alias: {type: new GraphQLNonNull(GraphQLString)},
-        firstName: {type: GraphQLString},
-        lastName: {type: GraphQLString},
-        isDeveloper: {type: GraphQLInt},
-        isTrader: {type: GraphQLInt},
-        isDataAnalyst: {type: GraphQLInt},
-        roleId: {type: new GraphQLNonNull(GraphQLString)}
+        authId: {type: new GraphQLNonNull(GraphQLString)}
       },
       resolve(parent, args) {
 
         let user = new User({
           alias: args.alias,
-          firstName: args.firstName,
-          lastName: args.lastName,
-          isDeveloper: args.isDeveloper,
-          isTrader: args.isTrader,
-          isDataAnalyst: args.isDataAnalyst,
-          roleId: args.roleId
+          authId: args.authId,
+          roleId: "1"
         });
         return user.save();
       }
@@ -124,7 +117,6 @@ const Mutation = new GraphQLObjectType({
       type: UserType,
       args: {
         id: {type: new GraphQLNonNull(GraphQLID)},
-        alias: {type: new GraphQLNonNull(GraphQLString)},
         firstName: {type: GraphQLString},
         lastName: {type: GraphQLString},
         isDeveloper: {type: GraphQLInt},
@@ -139,7 +131,6 @@ const Mutation = new GraphQLObjectType({
         };
 
         let updatedUser = {
-          alias: args.alias,
           firstName: args.firstName,
           lastName: args.lastName,
           isDeveloper: args.isDeveloper,