Extracted AddUserField

scm-ui/src/groups/components/GroupForm.js

@@ -6,6 +6,7 @@ import { SubmitButton, Button } from "../../components/buttons";
 import { translate } from "react-i18next";
 import type { Group } from "../types/Group";
 import * as validator from "./groupValidation";
+import AddUserField from "./AddUserField";
 
 type Props = {
   t: string => string,
@@ -16,7 +17,6 @@ type Props = {
 
 type State = {
   group: Group,
-  userToAdd: string,
   nameValidationError: boolean
 };
 
@@ -34,15 +34,14 @@ class GroupForm extends React.Component<Props, State> {
         members: [],
         type: ""
       },
-      nameValidationError: false,
-      userToAdd: ""
+      nameValidationError: false
     };
   }
 
   componentDidMount() {
-    const { group } = this.props
+    const { group } = this.props;
     if (group) {
-      this.setState({group: {...group}})
+      this.setState({...this.state, group: { ...group } });
     }
   }
 
@@ -56,7 +55,7 @@ class GroupForm extends React.Component<Props, State> {
   isValid = () => {
     const group = this.state.group;
     return !(
-      this.state.nameValidationError || 
+      this.state.nameValidationError ||
       this.isFalsy(group.name) ||
       this.isFalsy(group.description)
     );
@@ -69,23 +68,23 @@ class GroupForm extends React.Component<Props, State> {
     }
   };
 
-render() {
+  render() {
     const { t, loading } = this.props;
-    const group = this.state.group
+    const group = this.state.group;
     let nameField = null;
     if (!this.props.group) {
       nameField = (
         <InputField
-        label={t("group.name")}
-        errorMessage={t("group-form.name-error")}
-        onChange={this.handleGroupNameChange}
-        value={group.name}
-        validationError={this.state.nameValidationError}
-      />
+          label={t("group.name")}
+          errorMessage={t("group-form.name-error")}
+          onChange={this.handleGroupNameChange}
+          value={group.name}
+          validationError={this.state.nameValidationError}
+        />
       );
     }
 
-    return (   
+    return (
       <form onSubmit={this.submit}>
         {nameField}
         <InputField
@@ -97,49 +96,62 @@ render() {
         />
         <label className="label">{t("group.members")}</label>
         <table className="table is-hoverable is-fullwidth">
-        <tbody>
-          {this.state.group.members.map((user, index) => {
-            return <tr key={user}>
-            <td key={user}>{user}</td>
-            <td><Button label="Remove" action={this.removeUser.bind(this, user)} key={user}/></td>
-            </tr>
-          })}
-        </tbody>
-      </table>
-        <InputField
-          label="Add user"
-          errorMessage="Error"
-          onChange={this.handleAddUserChange}
-          validationError={false} 
-          value={this.state.userToAdd}/>
-        
-          <Button label="Add user" action={this.addUserClick} />
+          <tbody>
+            {this.state.group.members.map((user, index) => {
+              return (
+                <tr key={user}>
+                  <td key={user}>{user}</td>
+                  <td>
+                    <Button
+                      label="Remove"
+                      action={this.removeUser.bind(this, user)}
+                      key={user}
+                    />
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
 
-          <SubmitButton disabled={!this.isValid()} label={t("group-form.submit")} loading={loading}/>
+        <AddUserField addUser={this.addUser} />
+        <SubmitButton
+          disabled={!this.isValid()}
+          label={t("group-form.submit")}
+          loading={loading}
+        />
       </form>
     );
   }
 
-removeUser(user: string, event: Event) {
-    event.preventDefault();
-    let newMembers = this.state.group.members.filter(name => name !== user)
-    this.setState({...this.state, group: {
-      ...this.state.group,
-      members: newMembers}
-    })
-  }
-
-
-
-  addUserClick = (event: Event) => {
+  removeUser(user: string, event: Event) {
     event.preventDefault();
+    let newMembers = this.state.group.members.filter(name => name !== user);
     this.setState({
       ...this.state,
-      userToAdd: "",
       group: {
         ...this.state.group,
-        members: [...this.state.group.members, this.state.userToAdd]}
-    })
+        members: newMembers
+      }
+    });
+  }
+
+  addUser = (username: string) => {
+    if (this.isMember(username)) {
+      return;
+    }
+
+    this.setState({
+      ...this.state,
+      group: {
+        ...this.state.group,
+        members: [...this.state.group.members, username]
+      }
+    });
+  }
+
+  isMember = (username: string) => {
+    return this.state.group.members.includes(username)
   }
 
   handleGroupNameChange = (name: string) => {
@@ -154,13 +166,6 @@ removeUser(user: string, event: Event) {
       group: { ...this.state.group, description }
     });
   };
-
-  handleAddUserChange = (username: string) => {
-    this.setState({
-      ...this.state,
-      userToAdd: username
-    })
-  }
 }
 
 export default translate("groups")(GroupForm);