add user to user group

packages/app/src/client/services/AdminUserGroupDetailContainer.js

@@ -39,7 +39,6 @@ export default class AdminUserGroupDetailContainer extends Container {
 
     this.state = {
       // TODO: [SPA] get userGroup from props
-      // userGroup: JSON.parse(rootElem.getAttribute('data-user-group')),
       userGroupRelations: [], // For user list
 
       // TODO 85062: /_api/v3/user-groups/children?include_grand_child=boolean
@@ -62,6 +61,7 @@ export default class AdminUserGroupDetailContainer extends Container {
     this.closeUserGroupUserModal = this.closeUserGroupUserModal.bind(this);
     this.addUserByUsername = this.addUserByUsername.bind(this);
     this.removeUserByUsername = this.removeUserByUsername.bind(this);
+    this.fetchApplicableUsers = this.fetchApplicableUsers.bind(this);
   }
 
   /**
@@ -71,29 +71,6 @@ export default class AdminUserGroupDetailContainer extends Container {
     return 'AdminUserGroupDetailContainer';
   }
 
-  /**
-   * retrieve user group data
-   */
-  // async init() {
-  //   try {
-  //     const [
-  //       userGroupRelations,
-  //       relatedPages,
-  //     ] = await Promise.all([
-  //       apiv3Get(`/user-groups/${this.state.userGroup._id}/user-group-relations`).then((res) => { return res.data.userGroupRelations }),
-  //       apiv3Get(`/user-groups/${this.state.userGroup._id}/pages`).then((res) => { return res.data.pages }),
-  //     ]);
-
-  //     await this.setState({
-  //       userGroupRelations,
-  //       relatedPages,
-  //     });
-  //   }
-  //   catch (err) {
-  //     logger.error(err);
-  //     toastError(new Error('Failed to fetch data'));
-  //   }
-  // }
 
   /**
    * switch isAlsoMailSearched
@@ -116,22 +93,6 @@ export default class AdminUserGroupDetailContainer extends Container {
     this.setState({ searchType });
   }
 
-  /**
-   * update user group
-   *
-   * @memberOf AdminUserGroupDetailContainer
-   * @param {object} param update param for user group
-   * @return {object} response object
-   */
-  async updateUserGroup(param) {
-    const res = await apiv3Put(`/user-groups/${this.state.userGroup._id}`, param);
-    const { userGroup } = res.data;
-
-    await this.setState({ userGroup });
-
-    return res;
-  }
-
   /**
    * open a modal
    *
@@ -150,38 +111,38 @@ export default class AdminUserGroupDetailContainer extends Container {
     await this.setState({ isUserGroupUserModalOpen: false });
   }
 
-  /**
-   * search user for invitation
-   * @param {string} username username of the user to be searched
-   */
-  async fetchApplicableUsers(searchWord) {
-    const res = await apiv3Get(`/user-groups/${this.state.userGroup._id}/unrelated-users`, {
-      searchWord,
-      searchType: this.state.searchType,
-      isAlsoMailSearched: this.state.isAlsoMailSearched,
-      isAlsoNameSearched: this.state.isAlsoNameSearched,
-    });
-
-    const { users } = res.data;
+  // /**
+  //  * search user for invitation
+  //  * @param {string} username username of the user to be searched
+  //  */
+  // async fetchApplicableUsers(searchWord) {
+  //   const res = await apiv3Get(`/user-groups/${this.state.userGroup._id}/unrelated-users`, {
+  //     searchWord,
+  //     searchType: this.state.searchType,
+  //     isAlsoMailSearched: this.state.isAlsoMailSearched,
+  //     isAlsoNameSearched: this.state.isAlsoNameSearched,
+  //   });
+
+  //   const { users } = res.data;
+
+  //   return users;
+  // }
 
-    return users;
-  }
 
+  // /**
+  //  * update user group
+  //  *
+  //  * @memberOf AdminUserGroupDetailContainer
+  //  * @param {string} username username of the user to be added to the group
+  //  */
+  // async addUserByUsername(username) {
+  //   const res = await apiv3Post(`/user-groups/${this.state.userGroup._id}/users/${username}`);
 
-  /**
-   * update user group
-   *
-   * @memberOf AdminUserGroupDetailContainer
-   * @param {string} username username of the user to be added to the group
-   */
-  async addUserByUsername(username) {
-    const res = await apiv3Post(`/user-groups/${this.state.userGroup._id}/users/${username}`);
+  //   // do not add users for ducaplicate
+  //   if (res.data.userGroupRelation == null) { return }
 
-    // do not add users for ducaplicate
-    if (res.data.userGroupRelation == null) { return }
-
-    this.init();
-  }
+  //   this.init();
+  // }
 
   /**
    * update user group

packages/app/src/components/Admin/UserGroupDetail/UserGroupDetailPage.tsx

@@ -170,7 +170,6 @@ const UserGroupDetailPage = (props: Props) => {
     return users;
   }, [currentUserGroupId, searchType, isAlsoMailSearched, isAlsoNameSearched]);
 
-  // TODO 85062: will be used in UserGroupUserFormByInput
   const addUserByUsername = useCallback(async(username: string) => {
     await apiv3Post(`/user-groups/${currentUserGroupId}/users/${username}`);
     mutateUserGroupRelations();
@@ -341,7 +340,7 @@ const UserGroupDetailPage = (props: Props) => {
       </div>
       <h2 className="admin-setting-header mt-4">{t('admin:user_group_management.user_list')}</h2>
       <UserGroupUserTable userGroup={currentUserGroup} userGroupRelations={childUserGroupRelations} />
-      <UserGroupUserModal />
+      <UserGroupUserModal userGroup={currentUserGroup} onClickAddUserBtn={addUserByUsername} onSearchApplicableUsers={fetchApplicableUsers} />
 
       <h2 className="admin-setting-header mt-4">{t('admin:user_group_management.child_group_list')}</h2>
       <UserGroupDropdown

packages/app/src/components/Admin/UserGroupDetail/UserGroupUserFormByInput.jsx

@@ -38,15 +38,14 @@ class UserGroupUserFormByInput extends React.Component {
   }
 
   async addUserBySubmit() {
-    const { adminUserGroupDetailContainer } = this.props;
-    const { userGroup } = adminUserGroupDetailContainer.state;
+    const { userGroup, adminUserGroupDetailContainer, onClickAddUserBtn } = this.props;
 
     if (this.state.inputUser.length === 0) { return }
     const userName = this.state.inputUser[0].username;
 
     try {
-      await adminUserGroupDetailContainer.addUserByUsername(userName);
-      await adminUserGroupDetailContainer.init();
+      await onClickAddUserBtn(userName);
+      // await adminUserGroupDetailContainer.init();
       await adminUserGroupDetailContainer.closeUserGroupUserModal();
       toastSuccess(`Added "${this.xss.process(userName)}" to "${this.xss.process(userGroup.name)}"`);
       this.setState({ inputUser: '' });
@@ -63,13 +62,14 @@ class UserGroupUserFormByInput extends React.Component {
   }
 
   async searhApplicableUsers() {
-    const { adminUserGroupDetailContainer } = this.props;
+    const { onSearchApplicableUsers } = this.props;
 
     try {
-      const users = await adminUserGroupDetailContainer.fetchApplicableUsers(this.state.keyword);
+      const users = await onSearchApplicableUsers(this.state.keyword);
       this.setState({ applicableUsers: users, isLoading: false });
     }
     catch (err) {
+      console.log('searhApplicableUsers_err', err);
       toastError(err);
     }
   }
@@ -83,7 +83,6 @@ class UserGroupUserFormByInput extends React.Component {
   }
 
   handleSearch(keyword) {
-
     if (keyword === '') {
       return;
     }
@@ -103,12 +102,12 @@ class UserGroupUserFormByInput extends React.Component {
     const { adminUserGroupDetailContainer } = this.props;
     const user = option;
     return (
-      <React.Fragment>
+      <>
         <UserPicture user={user} size="sm" noLink noTooltip />
         <strong className="ml-2">{user.username}</strong>
         {adminUserGroupDetailContainer.state.isAlsoNameSearched && <span className="ml-2">{user.name}</span>}
         {adminUserGroupDetailContainer.state.isAlsoMailSearched && <span className="ml-2">{user.email}</span>}
-      </React.Fragment>
+      </>
     );
   }
 
@@ -162,6 +161,9 @@ class UserGroupUserFormByInput extends React.Component {
 UserGroupUserFormByInput.propTypes = {
   t: PropTypes.func.isRequired, // i18next
   adminUserGroupDetailContainer: PropTypes.instanceOf(AdminUserGroupDetailContainer).isRequired,
+  onClickAddUserBtn: PropTypes.func,
+  onSearchApplicableUsers: PropTypes.func,
+  userGroup: PropTypes.object,
 };
 
 const UserGroupUserFormByInputWrapperFC = (props) => {

packages/app/src/components/Admin/UserGroupDetail/UserGroupUserModal.jsx

@@ -17,7 +17,9 @@ import UserGroupUserFormByInput from './UserGroupUserFormByInput';
 class UserGroupUserModal extends React.Component {
 
   render() {
-    const { t, adminUserGroupDetailContainer } = this.props;
+    const {
+      t, userGroup, adminUserGroupDetailContainer, onClickAddUserBtn, onSearchApplicableUsers,
+    } = this.props;
 
     return (
       <Modal isOpen={adminUserGroupDetailContainer.state.isUserGroupUserModalOpen} toggle={adminUserGroupDetailContainer.closeUserGroupUserModal}>
@@ -27,7 +29,7 @@ class UserGroupUserModal extends React.Component {
         <ModalBody>
           <p className="card well">{t('admin:user_group_management.add_modal.description')}</p>
           <div className="p-3">
-            <UserGroupUserFormByInput />
+            <UserGroupUserFormByInput userGroup={userGroup} onClickAddUserBtn={onClickAddUserBtn} onSearchApplicableUsers={onSearchApplicableUsers} />
           </div>
           <h2 className="border-bottom">{t('admin:user_group_management.add_modal.search_option')}</h2>
           <div className="row mt-4">
@@ -81,11 +83,20 @@ class UserGroupUserModal extends React.Component {
 UserGroupUserModal.propTypes = {
   t: PropTypes.func.isRequired, // i18next
   adminUserGroupDetailContainer: PropTypes.instanceOf(AdminUserGroupDetailContainer).isRequired,
+  onClickAddUserBtn: PropTypes.func,
+  onSearchApplicableUsers: PropTypes.func,
+  userGroup: PropTypes.object.isRequired,
 };
 
 const UserGroupUserModalWrapperFC = (props) => {
   const { t } = useTranslation();
-  return <UserGroupUserModal t={t} {...props} />;
+  return <UserGroupUserModal
+    t={t}
+    userGroup={props.userGroup}
+    onClickAddUserBtn={props.onClickAddUserBtn}
+    onSearchApplicableUsers={props.onSearchApplicableUsers}
+    {...props}
+  />;
 };
 /**
  * Wrapper component for using unstated