execute removeUser on UserrGroupDatailPage

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

@@ -1,5 +1,5 @@
 import React, {
-  FC, useState, useCallback, useEffect,
+  FC, useState, useCallback, useEffect, useMemo,
 } from 'react';
 
 
@@ -13,6 +13,7 @@ import {
   apiv3Get, apiv3Put, apiv3Delete, apiv3Post,
 } from '~/client/util/apiv3-client';
 import { IUserGroup, IUserGroupHasId } from '~/interfaces/user';
+import Xss from '~/services/xss';
 import { useIsAclEnabled } from '~/stores/context';
 import { useUpdateUserGroupConfirmModal } from '~/stores/modal';
 import {
@@ -20,6 +21,7 @@ import {
   useSWRxSelectableParentUserGroups, useSWRxSelectableChildUserGroups, useSWRxAncestorUserGroups,
 } from '~/stores/user-group';
 
+
 const UserGroupPageList = dynamic(() => import('./UserGroupPageList'), { ssr: false });
 const UserGroupUserModal = dynamic(() => import('./UserGroupUserModal'), { ssr: false });
 const UserGroupUserTable = dynamic(() => import('./UserGroupUserTable'), { ssr: false });
@@ -33,12 +35,14 @@ const UpdateParentConfirmModal = dynamic(() => import('./UpdateParentConfirmModa
 
 
 type Props = {
+  adminUserGroupDetailContainer: any;
   userGroupId?: string,
 }
 
 const UserGroupDetailPage = (props: Props) => {
   const { t } = useTranslation();
   const router = useRouter();
+  const xss = useMemo(() => new Xss(), []);
   const { userGroupId: currentUserGroupId } = props;
 
   /*
@@ -176,9 +180,16 @@ const UserGroupDetailPage = (props: Props) => {
   }, [currentUserGroupId, mutateUserGroupRelations]);
 
   const removeUserByUsername = useCallback(async(username: string) => {
-    await apiv3Delete(`/user-groups/${currentUserGroupId}/users/${username}`);
-    mutateUserGroupRelations();
-  }, [currentUserGroupId, mutateUserGroupRelations]);
+    try {
+      await apiv3Delete(`/user-groups/${currentUserGroupId}/users/${username}`);
+      toastSuccess(`Removed "${xss.process(username)}" from "${xss.process(currentUserGroup?.name)}"`);
+      mutateUserGroupRelations();
+    }
+    catch (err) {
+      // eslint-disable-next-line max-len
+      toastError(new Error(`Unable to remove "${xss.process(username)}" from "${xss.process(currentUserGroup?.name)}"`));
+    }
+  }, [currentUserGroup?.name, currentUserGroupId, mutateUserGroupRelations, xss]);
 
   const showUpdateModal = useCallback((group: IUserGroupHasId) => {
     setUpdateModalShown(true);

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useCallback, useMemo } from 'react';
+import React from 'react';
 
 import { UserPicture } from '@growi/ui';
 import dateFnsFormat from 'date-fns/format';
@@ -6,9 +6,7 @@ import { useTranslation } from 'next-i18next';
 
 
 import AdminUserGroupDetailContainer from '~/client/services/AdminUserGroupDetailContainer';
-import { toastSuccess, toastError } from '~/client/util/apiNotification';
 import { IUserGroupHasId, IUserGroupRelation } from '~/interfaces/user';
-import Xss from '~/services/xss';
 import { useSWRxUserGroupRelations } from '~/stores/user-group';
 
 import { withUnstatedContainers } from '../../UnstatedUtils';
@@ -17,7 +15,7 @@ type Props = {
   adminUserGroupDetailContainer: AdminUserGroupDetailContainer
   userGroupRelations: IUserGroupRelation[],
   userGroup: IUserGroupHasId,
-  onClickRemoveUserBtn: (username: string) => void,
+  onClickRemoveUserBtn: (username: string) => Promise<void>,
 }
 
 const UserGroupUserTable = (props: Props) => {
@@ -25,21 +23,6 @@ const UserGroupUserTable = (props: Props) => {
 
   const { adminUserGroupDetailContainer, userGroup, onClickRemoveUserBtn } = props;
   const { data: userGroupRelations } = useSWRxUserGroupRelations(userGroup._id);
-  const xss = useMemo(() => new Xss(), []);
-
-  const removeUser = useCallback(async(username: string) => {
-    try {
-      // 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(userGroup.name)}"`));
-    }
-  }, [onClickRemoveUserBtn, userGroup.name, xss]);
 
 
   return (
@@ -85,9 +68,7 @@ const UserGroupUserTable = (props: Props) => {
                     <button
                       className="dropdown-item"
                       type="button"
-                      onClick={() => {
-                        return removeUser(relatedUser.username);
-                      }}
+                      onClick={() => onClickRemoveUserBtn(relatedUser.username)}
                     >
                       <i className="icon-fw icon-user-unfollow"></i> {t('admin:user_group_management.remove_from_group')}
                     </button>