perf: member group (#4324)

* sync collection

* remove lock

* perf: member group

projects/app/src/pageComponents/account/team/MemberTable.tsx

@@ -17,7 +17,7 @@ import {
 import { useTranslation } from 'next-i18next';
 import { useUserStore } from '@/web/support/user/useUserStore';
 import { useConfirm } from '@fastgpt/web/hooks/useConfirm';
-import { delRemoveMember, postRestoreMember } from '@/web/support/user/team/api';
+import { delRemoveMember, getTeamMembers, postRestoreMember } from '@/web/support/user/team/api';
 import Tag from '@fastgpt/web/components/common/Tag';
 import Icon from '@fastgpt/web/components/common/Icon';
 import { useContextSelector } from 'use-context-selector';
@@ -28,7 +28,6 @@ import dynamic from 'next/dynamic';
 import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
 import { delLeaveTeam } from '@/web/support/user/team/api';
 import { GetSearchUserGroupOrg, postSyncMembers } from '@/web/support/user/api';
-import MyLoading from '@fastgpt/web/components/common/MyLoading';
 import {
   TeamMemberRoleEnum,
   TeamMemberStatusEnum
@@ -36,8 +35,10 @@ import {
 import format from 'date-fns/format';
 import OrgTags from '@/components/support/user/team/OrgTags';
 import SearchInput from '@fastgpt/web/components/common/Input/SearchInput';
-import { useState } from 'react';
+import { useCallback, useState } from 'react';
 import { downloadFetch } from '@/web/common/system/utils';
+import MyBox from '@fastgpt/web/components/common/MyBox';
+import { useScrollPagination } from '@fastgpt/web/hooks/useScrollPagination';
 
 const InviteModal = dynamic(() => import('./Invite/InviteModal'));
 const TeamTagModal = dynamic(() => import('@/components/support/user/team/TeamTagModal'));
@@ -46,20 +47,72 @@ function MemberTable({ Tabs }: { Tabs: React.ReactNode }) {
   const { t } = useTranslation();
   const { userInfo } = useUserStore();
   const { feConfigs } = useSystemStore();
+  const isSyncMember = feConfigs?.register_method?.includes('sync');
 
-  const { myTeams, refetchTeams, members, refetchMembers, onSwitchTeam, MemberScrollData } =
-    useContextSelector(TeamContext, (v) => v);
+  const { myTeams, onSwitchTeam } = useContextSelector(TeamContext, (v) => v);
 
   const {
     isOpen: isOpenTeamTagsAsync,
     onOpen: onOpenTeamTagsAsync,
     onClose: onCloseTeamTagsAsync
   } = useDisclosure();
+
+  // member action
+  const {
+    data: members = [],
+    isLoading: loadingMembers,
+    refreshList: refetchMemberList,
+    ScrollData: MemberScrollData
+  } = useScrollPagination(getTeamMembers, {
+    pageSize: 20,
+    params: {
+      withLeaved: true
+    }
+  });
+
+  const [searchText, setSearchText] = useState<string>('');
+  const { data: searchMembersData, run: refreshSearchMembers } = useRequest2(
+    async () => {
+      if (!searchText) return Promise.resolve();
+      return GetSearchUserGroupOrg(searchText, { members: true, orgs: false, groups: false });
+    },
+    {
+      manual: false,
+      throttleWait: 500,
+      refreshDeps: [searchText]
+    }
+  );
+
+  const onRefreshMembers = useCallback(() => {
+    refetchMemberList();
+    refreshSearchMembers();
+  }, [refetchMemberList, refreshSearchMembers]);
+
   const { isOpen: isOpenInvite, onOpen: onOpenInvite, onClose: onCloseInvite } = useDisclosure();
 
+  const { runAsync: onSyncMember, loading: isSyncing } = useRequest2(postSyncMembers, {
+    onSuccess: onRefreshMembers,
+    successToast: t('account_team:sync_member_success'),
+    errorToast: t('account_team:sync_member_failed')
+  });
+
+  const { ConfirmModal: ConfirmLeaveTeamModal, openConfirm: openLeaveConfirm } = useConfirm({
+    content: t('account_team:confirm_leave_team')
+  });
+  const { runAsync: onLeaveTeam } = useRequest2(delLeaveTeam, {
+    onSuccess() {
+      const defaultTeam = myTeams[0];
+      onSwitchTeam(defaultTeam.teamId);
+    },
+    errorToast: t('account_team:user_team_leave_team_failed')
+  });
+
   const { ConfirmModal: ConfirmRemoveMemberModal, openConfirm: openRemoveMember } = useConfirm({
     type: 'delete'
   });
+  const { runAsync: onRemoveMember } = useRequest2(delRemoveMember, {
+    onSuccess: onRefreshMembers
+  });
 
   const { ConfirmModal: ConfirmRestoreMemberModal, openConfirm: openRestoreMember } = useConfirm({
     type: 'common',
@@ -67,63 +120,16 @@ function MemberTable({ Tabs }: { Tabs: React.ReactNode }) {
     iconSrc: 'common/confirm/restoreTip',
     iconColor: 'primary.500'
   });
-
-  const [searchText, setSearchText] = useState<string>('');
-  const isSyncMember = feConfigs.register_method?.includes('sync');
-
-  const { data: searchMembersData } = useRequest2(
-    async () => {
-      if (!searchText) return Promise.resolve();
-      return GetSearchUserGroupOrg(searchText, { members: true, orgs: false, groups: false });
-    },
-    {
-      manual: false,
-      throttleWait: 500,
-      debounceWait: 200,
-      refreshDeps: [searchText]
-    }
-  );
-
-  const { runAsync: onLeaveTeam } = useRequest2(
-    async () => {
-      const defaultTeam = myTeams[0];
-      // change to personal team
-      onSwitchTeam(defaultTeam.teamId);
-      return delLeaveTeam();
-    },
-    {
-      onSuccess() {
-        refetchTeams();
-        refetchMembers();
-      },
-      errorToast: t('account_team:user_team_leave_team_failed')
-    }
-  );
-  const { ConfirmModal: ConfirmLeaveTeamModal, openConfirm: openLeaveConfirm } = useConfirm({
-    content: t('account_team:confirm_leave_team')
-  });
-
-  const { runAsync: onSyncMember, loading: isSyncing } = useRequest2(postSyncMembers, {
-    onSuccess() {
-      refetchMembers();
-    },
-    successToast: t('account_team:sync_member_success'),
-    errorToast: t('account_team:sync_member_failed')
-  });
-
-  const { runAsync: onRestore, loading: isUpdateInvite } = useRequest2(postRestoreMember, {
-    onSuccess() {
-      refetchMembers();
-    },
-    successToast: t('common:user.team.invite.Accepted'),
+  const { runAsync: onRestore } = useRequest2(postRestoreMember, {
+    onSuccess: onRefreshMembers,
+    successToast: t('common:common.Success'),
     errorToast: t('common:user.team.invite.Reject')
   });
 
-  const isLoading = isUpdateInvite || isSyncing;
+  const isLoading = loadingMembers || isSyncing;
 
   return (
     <>
-      {isLoading && <MyLoading />}
       <Flex justify={'space-between'} align={'center'} pb={'1rem'}>
         {Tabs}
         <HStack alignItems={'center'}>
@@ -205,7 +211,7 @@ function MemberTable({ Tabs }: { Tabs: React.ReactNode }) {
         </HStack>
       </Flex>
 
-      <Box flex={'1 0 0'} overflow={'auto'}>
+      <MyBox isLoading={isLoading} flex={'1 0 0'} overflow={'auto'}>
         <MemberScrollData>
           <TableContainer overflow={'unset'} fontSize={'sm'}>
             <Table overflow={'unset'}>
@@ -272,10 +278,7 @@ function MemberTable({ Tabs }: { Tabs: React.ReactNode }) {
                               }}
                               onClick={() => {
                                 openRemoveMember(
-                                  () =>
-                                    delRemoveMember(member.tmbId).then(() =>
-                                      Promise.all([refetchMembers()])
-                                    ),
+                                  () => onRemoveMember(member.tmbId),
                                   undefined,
                                   t('account_team:remove_tip', {
                                     username: member.memberName
@@ -317,7 +320,7 @@ function MemberTable({ Tabs }: { Tabs: React.ReactNode }) {
             <ConfirmRestoreMemberModal />
           </TableContainer>
         </MemberScrollData>
-      </Box>
+      </MyBox>
 
       <ConfirmLeaveTeamModal />
       {isOpenInvite && userInfo?.team?.teamId && <InviteModal onClose={onCloseInvite} />}