3 boolean fields fully working and connected to the current form to add users

client/public/index.html

@@ -35,21 +35,10 @@
         <!-- font awesome -->
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
 
-    <!--The following 3 tags are needed for Materialize to work.-->
-    <!--Import Google Icon Font-->
-    <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-    <!--Import materialize.css-->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
-    <!--Let browser know website is optimized for mobile-->
-    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-
     <title>Advanced Algos - Users Module</title>
 
   </head>
   <body>
-    <!--Import jQuery before materialize.js-->
-    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
 
     <noscript>
       You need to enable JavaScript to run this app.

client/src/components/AddUser.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
 import {graphql, compose} from 'react-apollo';
 import {getRolesQuery, addUserMutation, getUsersQuery} from '../queries/queries';
 
@@ -9,10 +10,10 @@ class AddUser extends Component {
       alias: '',
       firstName: '',
       lastName: '',
-      isDeveloper: '',
-      isTrader: '',
-      isDataAnalyst: '',
-      idRole: ''
+      isDeveloper: 0,
+      isTrader: 0,
+      isDataAnalyst: 0,
+      roleId: '1'
     };
   }
     displayRoles(){
@@ -25,7 +26,9 @@ class AddUser extends Component {
             });
         }
     }
+
     submitForm(e){
+      console.log(this.state);
       e.preventDefault();
       this.props.addUserMutation({
         variables: {
@@ -40,10 +43,74 @@ class AddUser extends Component {
         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)}>
+
                 <div className="row">
                   <div className="input-field col s6">
                     <input id="alias" type="text" className="validate" onChange={ (e) => this.setState({ alias:e.target.value})}/>
@@ -64,28 +131,29 @@ class AddUser extends Component {
                 </div>
                 <div className="row">
                   <div className="input-field col s12">
-                    <input id="developer" type="checkbox" onChange={ (e) => this.setState({ isDeveloper:e.target.value})}/>
-                    <label htmlFor="developer">Developer</label>
+                    <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="trader" type="checkbox" onChange={ (e) => this.setState({ isTrader:e.target.value})}/>
-                    <label htmlFor="trader">Trader</label>
+                    <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="dataAnalyst" type="checkbox" onChange={ (e) => this.setState({ isDataAnalyst:e.target.value})}/>
-                    <label htmlFor="dataAnalyst">Data Analyst</label>
+                    <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" onChange={ (e) => this.setState({ roleId:e.target.value})}>
+                    <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>
                 </div>

client/src/queries/queries.js

@@ -36,7 +36,7 @@ const getRolesQuery = gql`
 `
 
 const addUserMutation = gql`
-mutation($alias: String!, $firstName:String, $lastName:String, $isDeveloper:String, $isTrader:String, $isDataAnalyst:String, $roleId:String!) {
+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){
       id
       alias

server/schema/schema.js

@@ -13,9 +13,10 @@ const {
 } = graphql; // Destructuring this variables from inside the package.
 
 let roles = [
-  {id: '1', name: 'Developer'},
-  {id: '2', name: 'Trader'},
-  {id: '3', name: 'Data Analyst'}
+  {id: '1', name: 'Not Defined'},
+  {id: '2', name: 'Developer'},
+  {id: '3', name: 'Trader'},
+  {id: '4', name: 'Data Analyst'}
 ];
 
 // Types
@@ -27,9 +28,9 @@ const UserType = new GraphQLObjectType({
     alias: {type: GraphQLString},
     firstName: {type: GraphQLString},
     lastName: {type: GraphQLString},
-    isDeveloper: {type: GraphQLString},
-    isTrader: {type: GraphQLString},
-    isDataAnalyst: {type: GraphQLString},
+    isDeveloper: {type: GraphQLInt},
+    isTrader: {type: GraphQLInt},
+    isDataAnalyst: {type: GraphQLInt},
     roleId: {type: GraphQLString},
     role: {
       type: RoleType,