handle postAdd and postRemove

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

@@ -31,37 +31,40 @@ class UserGroupUserModal extends React.Component {
   async addUserBySubmit(e) {
     e.preventDefault();
 
-    await this.addUser(this.state.username);
+    const { user, userGroup, userGroupRelation } = await this.addUser(this.state.username);
 
     this.setState({ username: '' });
-    this.handlePostAddUser();
+    this.handlePostAdd(user, userGroup, userGroupRelation);
   }
 
   async addUserByClick(username) {
-    await this.addUser(username);
+    const { user, userGroup, userGroupRelation } = await this.addUser(username);
 
-    this.handlePostAddUser();
+    this.handlePostAdd(user, userGroup, userGroupRelation);
   }
 
   async addUser(username) {
     try {
-      await this.props.appContainer.apiv3.post(`/user-groups/${this.props.userGroup._id}/users/${username}`);
+      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;
     }
     catch (err) {
       toastError(new Error(`Unable to add "${this.xss.process(username)}" to "${this.xss.process(this.props.userGroup.name)}"`));
     }
   }
 
-  handlePostAddUser() {
-    this.props.handleClose();
+  handlePostAdd(user, userGroup, userGroupRelation) {
+    this.props.onAdd(user, userGroup, userGroupRelation);
+    this.props.onClose();
   }
 
   render() {
     const { t } = this.props;
 
     return (
-      <Modal show={this.props.show} onHide={this.props.handleClose}>
+      <Modal show={this.props.show} onHide={this.props.onClose}>
         <Modal.Header closeButton>
           <Modal.Title>{ t('user_group_management.add_user') }</Modal.Title>
         </Modal.Header>
@@ -116,7 +119,8 @@ UserGroupUserModal.propTypes = {
   t: PropTypes.func.isRequired, // i18next
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
   show: PropTypes.bool.isRequired,
-  handleClose: PropTypes.func.isRequired,
+  onClose: PropTypes.func.isRequired,
+  onAdd: PropTypes.func.isRequired,
   userGroup: PropTypes.object.isRequired,
   notRelatedUsers: PropTypes.arrayOf(PropTypes.object).isRequired,
 };

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

@@ -15,6 +15,8 @@ class UserGroupUserTable extends React.Component {
     super(props);
 
     this.state = {
+      userGroupRelations: props.userGroupRelations,
+      notRelatedUsers: props.notRelatedUsers,
       isUserGroupUserModalOpen: false,
     };
 
@@ -23,11 +25,20 @@ class UserGroupUserTable extends React.Component {
     this.removeUser = this.removeUser.bind(this);
     this.openUserGroupUserModal = this.openUserGroupUserModal.bind(this);
     this.closeUserGroupUserModal = this.closeUserGroupUserModal.bind(this);
+    this.addUser = this.addUser.bind(this);
   }
 
   async removeUser(username) {
     try {
-      await this.props.appContainer.apiv3.delete(`/user-groups/${this.props.userGroup._id}/users/${username}`);
+      const res = await this.props.appContainer.apiv3.delete(`/user-groups/${this.props.userGroup._id}/users/${username}`);
+
+      this.setState((prevState) => {
+        return {
+          userGroupRelations: prevState.userGroupRelations.filter((u) => { return u._id !== res.data.userGroupRelation._id }),
+          notRelatedUsers: [...prevState.notRelatedUsers, res.data.user],
+        };
+      });
+
       toastSuccess(`Removed "${username}" from "${this.xss.process(this.props.userGroup.name)}"`);
     }
     catch (err) {
@@ -43,6 +54,15 @@ class UserGroupUserTable extends React.Component {
     this.setState({ isUserGroupUserModalOpen: false });
   }
 
+  addUser(user, userGroup, userGroupRelation) {
+    this.setState((prevState) => {
+      return {
+        userGroupRelations: [...prevState.userGroupRelations, userGroupRelation],
+        notRelatedUsers: prevState.notRelatedUsers.filter((u) => { return u._id !== user._id }),
+      };
+    });
+  }
+
   render() {
     const { t } = this.props;
 
@@ -64,7 +84,7 @@ class UserGroupUserTable extends React.Component {
             </tr>
           </thead>
           <tbody>
-            {this.props.userGroupRelations.map((sRelation) => {
+            {this.state.userGroupRelations.map((sRelation) => {
               const { relatedUser } = sRelation;
 
               return (
@@ -96,7 +116,7 @@ class UserGroupUserTable extends React.Component {
               );
             })}
 
-            {this.props.userGroupRelations.length === 0 ? (
+            {this.state.userGroupRelations.length === 0 ? (
               <tr>
                 <td></td>
                 <td className="text-center">
@@ -116,8 +136,9 @@ class UserGroupUserTable extends React.Component {
 
         <UserGroupUserModal
           show={this.state.isUserGroupUserModalOpen}
-          handleClose={this.closeUserGroupUserModal}
-          notRelatedUsers={this.props.notRelatedUsers}
+          onClose={this.closeUserGroupUserModal}
+          onAdd={this.addUser}
+          notRelatedUsers={this.state.notRelatedUsers}
           userGroup={this.props.userGroup}
         />
 

src/server/routes/apiv3/user-group.js

@@ -342,9 +342,10 @@ module.exports = (crowi) => {
         User.findUserByUsername(username),
       ]);
 
-      await UserGroupRelation.createRelation(userGroup, user);
+      const userGroupRelation = await UserGroupRelation.createRelation(userGroup, user);
+      await userGroupRelation.populate('relatedUser', User.USER_PUBLIC_FIELDS).execPopulate();
 
-      return res.apiv3({ userGroup, user });
+      return res.apiv3({ user, userGroup, userGroupRelation });
     }
     catch (err) {
       const msg = `Error occurred in adding the user "${username}" to group "${id}"`;
@@ -410,7 +411,7 @@ module.exports = (crowi) => {
 
       await userGroupRelation.remove();
 
-      return res.apiv3({ userGroup, user });
+      return res.apiv3({ user, userGroup, userGroupRelation });
     }
     catch (err) {
       const msg = `Error occurred in removing the user "${username}" from group "${id}"`;