Adds chips to push roles

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: ""
 }

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: ""
  }}

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

src/modules/profile/components/helpers/RoleField.tsx

@@ -1,33 +1,77 @@
-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"
+ />
+ <Chip
+ type='button'
+ icon="palette"
+ selected={selected.Illustrator}
+ checkmark
+ onInteraction={() => select('Illustrator')}
+ label="Illustrator"
+ key="illustrator"
+ />
+ <Chip
+ type='button'
+ icon="camera_alt"
+ selected={selected.Photographer}
+ checkmark
+ onInteraction={() => select("Photographer")}
+ label="Photographer"
+ key='photographer'
+ />
+ </ChipSet>
+ );
+ };