Extracted AddUserField

scm-ui/public/locales/en/groups.json

@@ -29,6 +29,13 @@
   "edit-group-button": {
     "label": "Edit"
   },
+  "add-user-button": {
+    "label": "Add user"
+  },
+  "add-user-textfield": {
+    "label": "Add user",
+    "error": "Error adding user"
+  },
   "group-form": {
     "submit": "Submit",
     "name-error": "Group name is invalid",

scm-ui/src/components/buttons/Button.js

@@ -7,7 +7,7 @@ export type ButtonProps = {
   label: string,
   loading?: boolean,
   disabled?: boolean,
-  action?: () => void,
+  action?: (event: Event) => void,
   link?: string,
   fullWidth?: boolean,
   className?: string
@@ -37,7 +37,7 @@ class Button extends React.Component<Props> {
     return (
       <button
         disabled={disabled}
-        onClick={action ? action : () => {}}
+        onClick={action ? action : (event: Event) => {}}
         className={classNames(
           "button",
           "is-" + type,

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

@@ -0,0 +1,54 @@
+//@flow
+import React from "react";
+
+import { translate } from "react-i18next";
+import AddButton from "../../components/buttons/AddButton";
+import InputField from "../../components/forms/InputField";
+
+type Props = {
+  t: string => string,
+  addUser: string => void
+};
+
+type State = {
+  userToAdd: string
+};
+
+class AddUserField extends React.Component<Props, State> {
+  constructor(props) {
+    super(props);
+    this.state = {
+      userToAdd: ""
+    };
+  }
+  render() {
+    const { t } = this.props;
+    return (
+      <div className="field">
+        <InputField
+          label={t("add-user-textfield.label")}
+          errorMessage={t("add-user-textfield.error")}
+          onChange={this.handleAddUserChange}
+          validationError={false} //TODO: validate user name
+          value={this.state.userToAdd}
+        />
+        <AddButton
+          label={t("add-user-button.label")}
+          action={this.addButtonClicked}
+        />
+      </div>
+    );
+  }
+
+  addButtonClicked = (event: Event) => {
+    event.preventDefault();
+    this.props.addUser(this.state.userToAdd);
+    this.setState({ ...this.state, userToAdd: "" });
+  };
+
+  handleAddUserChange = (username: string) => {
+    this.setState({ ...this.state, userToAdd: username });
+  };
+}
+
+export default translate("groups")(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,
+      nameValidationError: false
-      userToAdd: ""
     };
   }
 
   componentDidMount() {
-    const { group } = this.props
+    const { group } = this.props;
     if (group) {
-      this.setState({group: {...group}})
+      this.setState({...this.state, group: { ...group } });
     }
   }
 
@@ -69,9 +68,9 @@ 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 = (
@@ -99,47 +98,60 @@ render() {
         <table className="table is-hoverable is-fullwidth">
           <tbody>
             {this.state.group.members.map((user, index) => {
-            return <tr key={user}>
+              return (
+                <tr key={user}>
                   <td key={user}>{user}</td>
-            <td><Button label="Remove" action={this.removeUser.bind(this, user)} key={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} />
+        <AddUserField addUser={this.addUser} />
-
+        <SubmitButton
-          <SubmitButton disabled={!this.isValid()} label={t("group-form.submit")} loading={loading}/>
+          disabled={!this.isValid()}
+          label={t("group-form.submit")}
+          loading={loading}
+        />
       </form>
     );
   }
 
-removeUser(user: string, event: Event) {
+  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) => {
     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);