From a4db4e74f4aa498f85ab86ff63fe29479d3d70cd Mon Sep 17 00:00:00 2001
From: AndySok <andrey.sokolov123@gmail.com>
Date: Mon, 29 Jun 2020 02:15:56 -0400
Subject: [PATCH 1/2] added chips to pass roles

---
 .../profile/components/CreateUserForm.tsx     |   6 +-
 .../profile/components/EditUserForm.tsx       |   6 +-
 .../profile/components/UserFormBase.tsx       |  13 +--
 .../profile/components/helpers/RoleField.tsx  | 105 +++++++++++++-----
 4 files changed, 88 insertions(+), 42 deletions(-)

diff --git a/src/modules/profile/components/CreateUserForm.tsx b/src/modules/profile/components/CreateUserForm.tsx
index facbd14..0fc0cc6 100644
--- a/src/modules/profile/components/CreateUserForm.tsx
+++ b/src/modules/profile/components/CreateUserForm.tsx
@@ -20,7 +20,7 @@ mutation createUser(
     $password: String!,
     $password_confirmation: String!,
     $profile_picture_b64: String,
-    $role: String!
+    $role: [String]!
 ) {
     createUser(
         first_name: $first_name,
@@ -47,7 +47,7 @@ interface IVariables {
     email: string,
     password?: string,
     password_confirmation?: string,
-    role: string,
+    role: string[],
     profile_picture_b64: string
 }
 
@@ -60,7 +60,7 @@ const initialUserState = {
     password: "Hello",
     password_confirmation: "",
     isCreate: true,
-    role: "",
+    role: [],
     profile_pic_url: "",
     profile_picture_b64: ""
 }
diff --git a/src/modules/profile/components/EditUserForm.tsx b/src/modules/profile/components/EditUserForm.tsx
index 1e24e4d..2edb93b 100644
--- a/src/modules/profile/components/EditUserForm.tsx
+++ b/src/modules/profile/components/EditUserForm.tsx
@@ -43,7 +43,7 @@ mutation updateUser(
     $last_name: String!,
     $email: String!,
     $profile_picture_b64: String,
-    $role: String,
+    $role: [String]!,
     $id: ID!,
     ) {
         updateUser(
@@ -70,7 +70,7 @@ interface IVariables {
     first_name: string,
     last_name: string,
     email: string,
-    role: string,
+    role: string[],
     profile_picture_b64: string
 }
 
@@ -122,7 +122,7 @@ const EditUserUnconnected: React.FunctionComponent<any> = ({ slug }) => {
                                                                     email: data.userBySlug!.email,
                                                                     profile_pic_url: data.userBySlug!.profile_pic_url,
                                                                     password: "",
-                                                                    role: "",
+                                                                    role: [""],
                                                                     isCreate: false,
                                                                     profile_picture_b64: ""
                                                                 }}
diff --git a/src/modules/profile/components/UserFormBase.tsx b/src/modules/profile/components/UserFormBase.tsx
index 8b7df9a..7a2f363 100644
--- a/src/modules/profile/components/UserFormBase.tsx
+++ b/src/modules/profile/components/UserFormBase.tsx
@@ -15,9 +15,9 @@ interface IState {
     email: string,
     password: string,
     profile_pic_url: string,
-    role: string,
+    role: string[],
     isCreate: boolean,
-    profile_picture_b64: string
+    profile_picture_b64: string,
 }
 
 interface IProps {
@@ -31,7 +31,6 @@ export class UserFormBase extends React.Component<IProps, IState> {
         super(props);
         this.state = props.initialState;
     }
-
     public render() {
         let password = this.state.isCreate &&
                     <div>
@@ -74,9 +73,9 @@ export class UserFormBase extends React.Component<IProps, IState> {
                     {password}
                     <RoleField
                         role={this.state.role}
-                        onChange={this.handleRoleChange}
+                        onInteraction={this.handleRoleChange}
                         label="Role"
-                        required={this.state.isCreate}
+                        required={true}
                     />
                     <br/>
                     <img 
@@ -91,7 +90,7 @@ export class UserFormBase extends React.Component<IProps, IState> {
                         onPFPURLChange={this.handlePFPURLChange}
                     />
                 </div>
-                <Button>
+                <Button type='submit'>
                     {this.props.postLabel}
                 </Button>
             </form>
@@ -118,7 +117,7 @@ export class UserFormBase extends React.Component<IProps, IState> {
             password
         })
     }
-    private handleRoleChange = (role: string) => {
+    private handleRoleChange = (role: string[]) => {
         this.setState({
             role
         })
diff --git a/src/modules/profile/components/helpers/RoleField.tsx b/src/modules/profile/components/helpers/RoleField.tsx
index ac7a228..ecdd15c 100644
--- a/src/modules/profile/components/helpers/RoleField.tsx
+++ b/src/modules/profile/components/helpers/RoleField.tsx
@@ -1,33 +1,80 @@
-import * as React from 'react';
+    import * as React from 'react';
 
-import { Select } from '@rmwc/select';
+    import {Chip} from '@rmwc/chip';
+    import {ChipIcon} from '@rmwc/chip';
+    import {ChipSet} from '@rmwc/chip';
+    
+    interface IProps {
+        onInteraction: (s: string[]) => void,
+        error?: string,
+        label: string,
+        required:boolean,
+        role: String[]
+    }
 
-interface IProps {
-    role: string,
-    onChange: (s: string) => void,
-    error?: string,
-    label: string,
-    required?: boolean,
-}
+    export const RoleField: React.FunctionComponent<IProps> = ({
+        role = [],
+    }) => {
 
-export const RoleField: React.SFC<IProps> = ({
-    role,
-    onChange,
-    error,
-    label,
-    required
-}) => {
-    return (
-        <Select
-            className="UserField"
-            value={role}
-            onChange={(e: React.FormEvent<HTMLInputElement>) => onChange(e.currentTarget.value)}
-            label={label}
-            enhanced
-            outlined
-            options={["Contributor", "Illustrator", "Photographer"]}
-            required={required}
-        />
-    );
-};
+        function select(value: any){
+            toggleSelected(value);
+            arrayEdit(value);
+        };
+        function arrayEdit(this: any, roles: string){
+            if(role.includes(roles)){
+                const index = role.indexOf(roles);
+                delete role[index]
+            } else{
+            role.push(roles);
+            }
+        }
+        const [selected, setSelected] = React.useState({
+            contributor: false,
+            illustrator: false,
+            photographer: false
+        });
+    
+        const toggleSelected = (key: keyof typeof selected) =>
+            setSelected({
+                ...selected,
+                [key]: !selected[key]
+        });
 
+        return (
+            <ChipSet 
+            filter
+            style={{marginLeft: "1.5%", marginTop:"0.5%"}}
+            >
+                <Chip 
+                    type='button'
+                    icon="insert_comment"
+                    selected={selected.contributor}
+                    checkmark
+                    onInteraction={() => select('contributor')}
+                    label="Contributor"
+                    key="contributor"
+                    value='contributor'
+                />
+                <Chip
+                    type='button'
+                    icon="palette"
+                    selected={selected.illustrator}
+                    checkmark
+                    onInteraction={() => select('illustrator')}
+                    label="Illustrator"
+                    key="illustrator"
+                    value='illustrator'
+                />
+                <Chip
+                    type='button'
+                    icon="camera_alt"
+                    selected={selected.photographer}
+                    checkmark
+                    onInteraction={() => select('photographer')}
+                    label="Photographer"
+                    key='photographer'
+                    value='photographer'
+                />
+            </ChipSet>
+        );
+    };
\ No newline at end of file

From 961854ec3a6f5fca1ca4688a4454edc8e8a25037 Mon Sep 17 00:00:00 2001
From: AndySok <andrey.sokolov123@gmail.com>
Date: Mon, 29 Jun 2020 15:15:47 -0400
Subject: [PATCH 2/2] role changes

---
 .../profile/components/CreateUserForm.tsx     |  2 +-
 .../profile/components/EditUserForm.tsx       |  4 ++--
 .../profile/components/helpers/RoleField.tsx  | 21 ++++++++-----------
 3 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/src/modules/profile/components/CreateUserForm.tsx b/src/modules/profile/components/CreateUserForm.tsx
index 0fc0cc6..fc4ca86 100644
--- a/src/modules/profile/components/CreateUserForm.tsx
+++ b/src/modules/profile/components/CreateUserForm.tsx
@@ -20,7 +20,7 @@ mutation createUser(
     $password: String!,
     $password_confirmation: String!,
     $profile_picture_b64: String,
-    $role: [String]!
+    $role: [String!]!
 ) {
     createUser(
         first_name: $first_name,
diff --git a/src/modules/profile/components/EditUserForm.tsx b/src/modules/profile/components/EditUserForm.tsx
index 2edb93b..00212ed 100644
--- a/src/modules/profile/components/EditUserForm.tsx
+++ b/src/modules/profile/components/EditUserForm.tsx
@@ -43,7 +43,7 @@ mutation updateUser(
     $last_name: String!,
     $email: String!,
     $profile_picture_b64: String,
-    $role: [String]!,
+    $role: [String!]!,
     $id: ID!,
     ) {
         updateUser(
@@ -122,7 +122,7 @@ const EditUserUnconnected: React.FunctionComponent<any> = ({ slug }) => {
                                                                     email: data.userBySlug!.email,
                                                                     profile_pic_url: data.userBySlug!.profile_pic_url,
                                                                     password: "",
-                                                                    role: [""],
+                                                                    role: [],
                                                                     isCreate: false,
                                                                     profile_picture_b64: ""
                                                                 }}
diff --git a/src/modules/profile/components/helpers/RoleField.tsx b/src/modules/profile/components/helpers/RoleField.tsx
index ecdd15c..483851a 100644
--- a/src/modules/profile/components/helpers/RoleField.tsx
+++ b/src/modules/profile/components/helpers/RoleField.tsx
@@ -29,9 +29,9 @@
             }
         }
         const [selected, setSelected] = React.useState({
-            contributor: false,
-            illustrator: false,
-            photographer: false
+            Contributor: false,
+            Illustrator: false,
+            Photographer: false
         });
     
         const toggleSelected = (key: keyof typeof selected) =>
@@ -48,32 +48,29 @@
                 <Chip 
                     type='button'
                     icon="insert_comment"
-                    selected={selected.contributor}
+                    selected={selected.Contributor}
                     checkmark
-                    onInteraction={() => select('contributor')}
+                    onInteraction={() => select('Contributor')}
                     label="Contributor"
                     key="contributor"
-                    value='contributor'
                 />
                 <Chip
                     type='button'
                     icon="palette"
-                    selected={selected.illustrator}
+                    selected={selected.Illustrator}
                     checkmark
-                    onInteraction={() => select('illustrator')}
+                    onInteraction={() => select('Illustrator')}
                     label="Illustrator"
                     key="illustrator"
-                    value='illustrator'
                 />
                 <Chip
                     type='button'
                     icon="camera_alt"
-                    selected={selected.photographer}
+                    selected={selected.Photographer}
                     checkmark
-                    onInteraction={() => select('photographer')}
+                    onInteraction={() => select("Photographer")}
                     label="Photographer"
                     key='photographer'
-                    value='photographer'
                 />
             </ChipSet>
         );