WIP: bucket relay

src/client/js/components/Admin/UserGroupDetail/UserGroupDetailPage.jsx

@@ -34,8 +34,8 @@ class UserGroupDetailPage extends React.Component {
 
     this.openUserGroupUserModal = this.openUserGroupUserModal.bind(this);
     this.closeUserGroupUserModal = this.closeUserGroupUserModal.bind(this);
-    this.removeUser = this.removeUser.bind(this);
-    this.addUser = this.addUser.bind(this);
+    this.removeUserFromState = this.removeUserFromState.bind(this);
+    this.addUserToState = this.addUserToState.bind(this);
   }
 
   openUserGroupUserModal() {
@@ -46,7 +46,7 @@ class UserGroupDetailPage extends React.Component {
     this.setState({ isUserGroupUserModalOpen: false });
   }
 
-  async removeUser(username) {
+  async removeUserFromState(username) {
     try {
       const res = await this.props.appContainer.apiv3.delete(`/user-groups/${this.state.userGroup._id}/users/${username}`);
 
@@ -64,7 +64,7 @@ class UserGroupDetailPage extends React.Component {
     }
   }
 
-  addUser(user, userGroup, userGroupRelation) {
+  addUserToState(user, userGroup, userGroupRelation) {
     this.setState((prevState) => {
       return {
         userGroupRelations: [...prevState.userGroupRelations, userGroupRelation],
@@ -89,12 +89,12 @@ class UserGroupDetailPage extends React.Component {
         <UserGroupUserTable
           userGroupRelations={this.state.userGroupRelations}
           openUserGroupUserModal={this.openUserGroupUserModal}
-          removeUser={this.removeUser}
+          removeUser={this.removeUserFromState}
         />
         <UserGroupUserModal
           show={this.state.isUserGroupUserModalOpen}
           onClose={this.closeUserGroupUserModal}
-          onAdd={this.addUser}
+          onAdd={this.addUserToState}
           notRelatedUsers={this.state.notRelatedUsers}
           userGroup={this.state.userGroup}
         />

src/client/js/components/Admin/UserGroupDetail/UserGroupUserFormByInput.jsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
+
+import { toastSuccess, toastError } from '../../../util/apiNotification';
+
+class UserGroupUserFormByInput extends React.Component {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      username: '',
+    };
+
+    this.xss = window.xss;
+
+    this.changeUsername = this.changeUsername.bind(this);
+    this.addUserBySubmit = this.addUserBySubmit.bind(this);
+  }
+
+  changeUsername(e) {
+    this.setState({ username: e.target.value });
+  }
+
+  async addUserBySubmit(e) {
+    e.preventDefault();
+    const { username } = this.state;
+
+    try {
+      const res = await this.props.addUserByUsername(username);
+      const { user, userGroup, userGroupRelation } = res.data;
+      this.props.onAdd(user, userGroup, userGroupRelation);
+      toastSuccess(`Added "${this.xss.process(username)}"`);
+      this.setState({ username: '' });
+      this.props.onClose();
+    }
+    catch (err) {
+      toastError(new Error(`Unable to add "${this.xss.process(username)}"`));
+    }
+  }
+
+  render() {
+    const { t } = this.props;
+
+    return (
+      <form className="form-inline" onSubmit={this.addUserBySubmit}>
+        <div className="form-group">
+          <input
+            type="text"
+            name="username"
+            className="form-control input-sm"
+            placeholder={t('User Name')}
+            value={this.state.username}
+            onChange={this.changeUsername}
+          />
+        </div>
+        <button type="submit" className="btn btn-sm btn-success">{ t('Add') }</button>
+      </form>
+    );
+  }
+
+}
+
+UserGroupUserFormByInput.propTypes = {
+  t: PropTypes.func.isRequired, // i18next
+  onClose: PropTypes.func.isRequired,
+  addUserByUsername: PropTypes.func.isRequired,
+  onAdd: PropTypes.func.isRequired,
+};
+
+export default withTranslation()(UserGroupUserFormByInput);

src/client/js/components/Admin/UserGroupDetail/UserGroupUserModal.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 import Modal from 'react-bootstrap/es/Modal';
 
+import UserGroupUserFormByInput from './UserGroupUserFormByInput';
 import { createSubscribedElement } from '../../UnstatedUtils';
 import AppContainer from '../../../services/AppContainer';
 import { toastSuccess, toastError } from '../../../util/apiNotification';
@@ -12,29 +13,10 @@ class UserGroupUserModal extends React.Component {
   constructor(props) {
     super(props);
 
-    this.state = {
-      username: '',
-    };
-
     this.xss = window.xss;
 
-    this.handleChange = this.handleChange.bind(this);
-    this.addUserBySubmit = this.addUserBySubmit.bind(this);
     this.addUserByClick = this.addUserByClick.bind(this);
-    this.addUser = this.addUser.bind(this);
-  }
-
-  handleChange(e) {
-    this.setState({ username: e.target.value });
-  }
-
-  async addUserBySubmit(e) {
-    e.preventDefault();
-
-    const { user, userGroup, userGroupRelation } = await this.addUser(this.state.username);
-
-    this.setState({ username: '' });
-    this.handlePostAdd(user, userGroup, userGroupRelation);
+    this.addUserByUsername = this.addUserByUsername.bind(this);
   }
 
   async addUserByClick(username) {
@@ -43,23 +25,17 @@ class UserGroupUserModal extends React.Component {
     this.handlePostAdd(user, userGroup, userGroupRelation);
   }
 
-  async addUser(username) {
+  async addUserByUsername(username) {
     try {
       const res = await this.props.appContainer.apiv3.post(`/user-groups/${this.props.userGroup._id}/users/${username}`);
-      toastSuccess(`Added "${username}" to "${this.xss.process(this.props.userGroup.name)}"`);
-
-      return res.data;
+      const { user, userGroup, userGroupRelation } = res.data;
+      this.props.onAdd(user, userGroup, userGroupRelation);
     }
     catch (err) {
       toastError(new Error(`Unable to add "${this.xss.process(username)}" to "${this.xss.process(this.props.userGroup.name)}"`));
     }
   }
 
-  handlePostAdd(user, userGroup, userGroupRelation) {
-    this.props.onAdd(user, userGroup, userGroupRelation);
-    this.props.onClose();
-  }
-
   render() {
     const { t } = this.props;
 
@@ -72,20 +48,11 @@ class UserGroupUserModal extends React.Component {
           <p>
             <strong>{ t('Method') }1.</strong> { t('user_group_management.how_to_add1') }
           </p>
-          <form className="form-inline" onSubmit={this.addUserBySubmit}>
-            <div className="form-group">
-              <input
-                type="text"
-                name="username"
-                className="form-control input-sm"
-                placeholder={t('User Name')}
-                value={this.state.username}
-                onChange={this.handleChange}
-              />
-            </div>
-            <button type="submit" className="btn btn-sm btn-success">{ t('Add') }</button>
-          </form>
-
+          <UserGroupUserFormByInput
+            addUserByUsername={this.addUserByUsername}
+            onAdd={this.props.onAdd}
+            onClose={this.props.onClose}
+          />
           <hr />
           <p>
             <strong>{ t('Method') }2.</strong> { t('user_group_management.how_to_add2') }