memorize xss instance

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

@@ -59,9 +59,9 @@ export default class AdminUserGroupDetailContainer extends Container {
     this.switchIsAlsoNameSearched = this.switchIsAlsoNameSearched.bind(this);
     this.openUserGroupUserModal = this.openUserGroupUserModal.bind(this);
     this.closeUserGroupUserModal = this.closeUserGroupUserModal.bind(this);
-    this.addUserByUsername = this.addUserByUsername.bind(this);
-    this.removeUserByUsername = this.removeUserByUsername.bind(this);
-    this.fetchApplicableUsers = this.fetchApplicableUsers.bind(this);
+    // this.addUserByUsername = this.addUserByUsername.bind(this);
+    // this.removeUserByUsername = this.removeUserByUsername.bind(this);
+    // this.fetchApplicableUsers = this.fetchApplicableUsers.bind(this);
   }
 
   /**
@@ -150,14 +150,14 @@ export default class AdminUserGroupDetailContainer extends Container {
    * @memberOf AdminUserGroupDetailContainer
    * @param {string} username username of the user to be removed from the group
    */
-  async removeUserByUsername(username) {
-    const res = await apiv3Delete(`/user-groups/${this.state.userGroup._id}/users/${username}`);
-
-    this.setState((prevState) => {
-      return {
-        userGroupRelations: prevState.userGroupRelations.filter((u) => { return u._id !== res.data.userGroupRelation._id }),
-      };
-    });
-  }
+  // async removeUserByUsername(username) {
+  //   const res = await apiv3Delete(`/user-groups/${this.state.userGroup._id}/users/${username}`);
+
+  //   this.setState((prevState) => {
+  //     return {
+  //       userGroupRelations: prevState.userGroupRelations.filter((u) => { return u._id !== res.data.userGroupRelation._id }),
+  //     };
+  //   });
+  // }
 
 }

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

@@ -339,7 +339,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} />
+      <UserGroupUserTable userGroup={currentUserGroup} userGroupRelations={childUserGroupRelations} onClickRemoveUserBtn={removeUserByUsername} />
       <UserGroupUserModal userGroup={currentUserGroup} onClickAddUserBtn={addUserByUsername} onSearchApplicableUsers={fetchApplicableUsers} />
 
       <h2 className="admin-setting-header mt-4">{t('admin:user_group_management.child_group_list')}</h2>

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

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useCallback, useMemo } from 'react';
 
 import { UserPicture } from '@growi/ui';
 import dateFnsFormat from 'date-fns/format';
@@ -17,31 +17,29 @@ type Props = {
   adminUserGroupDetailContainer: AdminUserGroupDetailContainer
   userGroupRelations: IUserGroupRelation[],
   userGroup: IUserGroupHasId,
+  onClickRemoveUserBtn: (username: string) => void,
 }
 
 const UserGroupUserTable = (props: Props) => {
   const { t } = useTranslation();
 
-  const { adminUserGroupDetailContainer, userGroup } = props;
+  const { adminUserGroupDetailContainer, userGroup, onClickRemoveUserBtn } = props;
   const { data: userGroupRelations } = useSWRxUserGroupRelations(userGroup._id);
+  const xss = useMemo(() => new Xss(), []);
 
-  let xss;
-
-  useEffect(() => {
-    xss = new Xss();
-  }, []);
-
-
-  const removeUser = async(username: string) => {
+  const removeUser = useCallback(async(username: string) => {
     try {
-      await props.adminUserGroupDetailContainer.removeUserByUsername(username);
-      toastSuccess(`Removed "${xss.process(username)}" from "${xss.process(props.adminUserGroupDetailContainer.state.userGroup.name)}"`);
+      // await props.adminUserGroupDetailContainer.removeUserByUsername(username);
+      await onClickRemoveUserBtn(username);
+      // toastSuccess(`Removed "${xss.process(username)}" from "${xss.process(props.adminUserGroupDetailContainer.state.userGroup.name)}"`);
+      toastSuccess(`Removed "${xss.process(username)}" from "${xss.process(userGroup.name)}"`);
     }
     catch (err) {
       // eslint-disable-next-line max-len
-      toastError(new Error(`Unable to remove "${xss.process(username)}" from "${xss.process(props.adminUserGroupDetailContainer.state.userGroup.name)}"`));
+      // toastError(new Error(`Unable to remove "${xss.process(username)}" from "${xss.process(props.adminUserGroupDetailContainer.state.userGroup.name)}"`));
+      toastError(new Error(`Unable to remove "${xss.process(username)}" from "${xss.process(userGroup.name)}"`));
     }
-  };
+  }, [onClickRemoveUserBtn, userGroup.name, xss]);
 
 
   return (