diff --git a/packages/web/hooks/useScrollPagination.tsx b/packages/web/hooks/useScrollPagination.tsx index 9b90f5eeb..8188f4a4d 100644 --- a/packages/web/hooks/useScrollPagination.tsx +++ b/packages/web/hooks/useScrollPagination.tsx @@ -14,6 +14,7 @@ import { } from 'ahooks'; import MyBox from '../components/common/MyBox'; import { useTranslation } from 'next-i18next'; +import { useRequest2 } from './useRequest'; type ItemHeight = (index: number, data: T) => number; const thresholdVal = 100; @@ -183,22 +184,21 @@ export function useScrollPagination< >( api: (data: TParams) => Promise, { - refreshDeps, scrollLoadType = 'bottom', pageSize = 10, params = {}, EmptyTip, - showErrorToast = true + showErrorToast = true, + ...props }: { - refreshDeps?: any[]; scrollLoadType?: 'top' | 'bottom'; pageSize?: number; params?: Record; EmptyTip?: React.JSX.Element; showErrorToast?: boolean; - } + } & Parameters[1] ) { const { t } = useTranslation(); const { toast } = useToast(); @@ -213,6 +213,7 @@ export function useScrollPagination< const loadData = useLockFn( async (init = false, ScrollContainerRef?: RefObject) => { if (noMore && !init) return; + setTrue(); if (init) { setData([]); @@ -221,8 +222,6 @@ export function useScrollPagination< const offset = init ? 0 : data.length; - setTrue(); - try { const res = await api({ offset, @@ -274,7 +273,7 @@ export function useScrollPagination< ({ children, ScrollContainerRef, - isLoading, + isLoading: isLoadingProp, ...props }: { isLoading?: boolean; @@ -283,7 +282,7 @@ export function useScrollPagination< } & BoxProps) => { const ref = ScrollContainerRef || ScrollRef; const loadText = useMemo(() => { - if (isLoading) return t('common:common.is_requesting'); + if (isLoading || isLoadingProp) return t('common:common.is_requesting'); if (noMore) return t('common:common.request_end'); return t('common:common.request_more'); }, [isLoading, noMore]); @@ -338,13 +337,13 @@ export function useScrollPagination< ); // Reload data - useRequest( + useRequest2( async () => { loadData(true); }, { manual: false, - refreshDeps + ...props } ); diff --git a/projects/app/src/components/support/permission/MemberManager/MemberModal.tsx b/projects/app/src/components/support/permission/MemberManager/MemberModal.tsx index 11f70e921..f577b310a 100644 --- a/projects/app/src/components/support/permission/MemberManager/MemberModal.tsx +++ b/projects/app/src/components/support/permission/MemberManager/MemberModal.tsx @@ -79,7 +79,10 @@ function MemberModal({ withOrgs: true, status: 'active', searchKey - } + }, + throttleWait: 500, + debounceWait: 200, + refreshDeps: [searchKey] }); const { @@ -100,13 +103,6 @@ function MemberModal({ } ); - const search = _.debounce(() => { - refreshList(); - refreshGroups(); - }, 200); - - useEffect(search, [searchKey]); - const [selectedOrgList, setSelectedOrgIdList] = useState([]); const [selectedMemberList, setSelectedMemberList] = useState< diff --git a/projects/app/src/pageComponents/account/team/GroupManage/GroupManageMember.tsx b/projects/app/src/pageComponents/account/team/GroupManage/GroupManageMember.tsx index 2ce0f2c23..f7005b35c 100644 --- a/projects/app/src/pageComponents/account/team/GroupManage/GroupManageMember.tsx +++ b/projects/app/src/pageComponents/account/team/GroupManage/GroupManageMember.tsx @@ -62,11 +62,11 @@ function GroupEditModal({ status: 'active', withOrgs: true, searchKey - } + }, + throttleWait: 500, + debounceWait: 200, + refreshDeps: [searchKey] }); - const refetchMemberList = _.debounce(refreshList, 200); - - useEffect(() => refetchMemberList, [searchKey]); const groupId = useMemo(() => String(group._id), [group._id]); diff --git a/projects/app/src/pageComponents/account/team/GroupManage/GroupTransferOwnerModal.tsx b/projects/app/src/pageComponents/account/team/GroupManage/GroupTransferOwnerModal.tsx index 9915b6afc..8365c25d7 100644 --- a/projects/app/src/pageComponents/account/team/GroupManage/GroupTransferOwnerModal.tsx +++ b/projects/app/src/pageComponents/account/team/GroupManage/GroupTransferOwnerModal.tsx @@ -48,14 +48,14 @@ export function ChangeOwnerModal({ { pageSize: 20, params: { - searchKey: searchKey - } + searchKey + }, + refreshDeps: [searchKey], + debounceWait: 200, + throttleWait: 500 } ); - const search = _.debounce(refreshList, 500); - useEffect(() => search, [searchKey]); - const { isOpen: isOpenMemberListMenu, onClose: onCloseMemberListMenu, diff --git a/projects/app/src/pageComponents/account/team/MemberTable.tsx b/projects/app/src/pageComponents/account/team/MemberTable.tsx index ec31b1ae9..278d09464 100644 --- a/projects/app/src/pageComponents/account/team/MemberTable.tsx +++ b/projects/app/src/pageComponents/account/team/MemberTable.tsx @@ -102,17 +102,12 @@ function MemberTable({ Tabs }: { Tabs: React.ReactNode }) { withPermission: true, withOrgs: true, searchKey - } + }, + refreshDeps: [searchKey, status], + throttleWait: 500, + debounceWait: 200 }); - const refreshList = _.debounce(() => { - refetchMemberList(); - }, 200); - - useEffect(() => { - refreshList(); - }, [searchKey, status]); - const onRefreshMembers = useCallback(() => { refetchMemberList(); }, [refetchMemberList]); diff --git a/projects/app/src/pageComponents/account/team/OrgManage/OrgMemberManageModal.tsx b/projects/app/src/pageComponents/account/team/OrgManage/OrgMemberManageModal.tsx index f67263933..5acb4a103 100644 --- a/projects/app/src/pageComponents/account/team/OrgManage/OrgMemberManageModal.tsx +++ b/projects/app/src/pageComponents/account/team/OrgManage/OrgMemberManageModal.tsx @@ -3,7 +3,6 @@ import { Box, Button, Flex, Grid, HStack, ModalBody, ModalFooter } from '@chakra import type { GroupMemberRole } from '@fastgpt/global/support/permission/memberGroup/constant'; import Avatar from '@fastgpt/web/components/common/Avatar'; import MyIcon from '@fastgpt/web/components/common/Icon'; -import type { IconNameType } from '@fastgpt/web/components/common/Icon/type'; import SearchInput from '@fastgpt/web/components/common/Input/SearchInput'; import MyModal from '@fastgpt/web/components/common/MyModal'; import { useRequest2 } from '@fastgpt/web/hooks/useRequest'; @@ -31,32 +30,32 @@ function OrgMemberManageModal({ onClose: () => void; }) { const { t } = useTranslation(); + const [searchKey, setSearchKey] = useState(''); - const { - data: allMembers, - ScrollData: MemberScrollData, - isLoading: isLoadingMembers - } = useScrollPagination(getTeamMembers, { + const { data: allMembers, ScrollData: MemberScrollData } = useScrollPagination(getTeamMembers, { pageSize: 20, params: { withOrgs: true, withPermission: false, - status: 'active' - } + status: 'active', + searchKey + }, + throttleWait: 500, + debounceWait: 200, + refreshDeps: [searchKey] }); - const { - data: orgMembers, - ScrollData: OrgMemberScrollData, - isLoading: isLoadingOrgMembers - } = useScrollPagination(getTeamMembers, { - pageSize: 100000, - params: { - orgId: currentOrg._id, - withOrgs: false, - withPermission: false + const { data: orgMembers, ScrollData: OrgMemberScrollData } = useScrollPagination( + getTeamMembers, + { + pageSize: 100000, + params: { + orgId: currentOrg._id, + withOrgs: false, + withPermission: false + } } - }); + ); const [selected, setSelected] = useState<{ name: string; tmbId: string; avatar: string }[]>([]); @@ -70,8 +69,6 @@ function OrgMemberManageModal({ ); }, [orgMembers]); - const [searchKey, setSearchKey] = useState(''); - const { run: onUpdate, loading: isLoadingUpdate } = useRequest2( () => { return putUpdateOrgMembers({ @@ -147,7 +144,7 @@ function OrgMemberManageModal({ setSearchKey(e.target.value); }} /> - + {allMembers.map((member) => { return ( - + {`${t('common:chosen')}:${selected.length}`} {selected.map((member) => { return ( diff --git a/projects/app/src/pageComponents/account/team/OrgManage/index.tsx b/projects/app/src/pageComponents/account/team/OrgManage/index.tsx index 0d1f16ac9..aec2c18e8 100644 --- a/projects/app/src/pageComponents/account/team/OrgManage/index.tsx +++ b/projects/app/src/pageComponents/account/team/OrgManage/index.tsx @@ -81,7 +81,7 @@ function OrgTable({ Tabs }: { Tabs: React.ReactNode }) { const { currentOrg, orgs, - isLoadingOrgs, + isLoading, paths, onClickOrg, members, @@ -134,18 +134,14 @@ function OrgTable({ Tabs }: { Tabs: React.ReactNode }) { /> - + - + {!searchKey && ( + + )} - + diff --git a/projects/app/src/pageComponents/app/detail/PublishHistoriesSlider.tsx b/projects/app/src/pageComponents/app/detail/PublishHistoriesSlider.tsx index e367e1963..cec0d8ab6 100644 --- a/projects/app/src/pageComponents/app/detail/PublishHistoriesSlider.tsx +++ b/projects/app/src/pageComponents/app/detail/PublishHistoriesSlider.tsx @@ -185,8 +185,7 @@ const TeamCloud = ({ const { ScrollData, data: scrollDataList, - setData, - isLoading + setData } = useScrollPagination(getWorkflowVersionList, { pageSize: 30, params: { @@ -230,7 +229,7 @@ const TeamCloud = ({ ); return ( - + {scrollDataList.map((item, index) => { const firstPublishedIndex = scrollDataList.findIndex((data) => data.isPublish); diff --git a/projects/app/src/web/support/user/team/org/hooks/useOrg.tsx b/projects/app/src/web/support/user/team/org/hooks/useOrg.tsx index 8ffc7c134..bfb7ff86a 100644 --- a/projects/app/src/web/support/user/team/org/hooks/useOrg.tsx +++ b/projects/app/src/web/support/user/team/org/hooks/useOrg.tsx @@ -41,14 +41,11 @@ function useOrg({ withPermission = true }: { withPermission?: boolean } = {}) { () => getOrgList({ orgId: currentOrg._id, withPermission: withPermission, searchKey }), { manual: false, - refreshDeps: [userInfo?.team?.teamId, path, currentOrg._id] + refreshDeps: [userInfo?.team?.teamId, path, currentOrg._id, searchKey], + debounceWait: 200, + throttleWait: 500 } ); - const search = _.debounce(() => { - if (!searchKey) return; - refetchOrgs(); - }, 200); - useEffect(() => search, [searchKey]); const paths = useMemo(() => { if (!currentOrg) return []; @@ -63,14 +60,19 @@ function useOrg({ withPermission = true }: { withPermission?: boolean } = {}) { }, [currentOrg, orgStack]); const onClickOrg = (org: OrgListItemType) => { - setOrgStack([...orgStack, org]); - setSearchKey(''); + if (searchKey) { + setOrgStack([org]); + setSearchKey(''); + } else { + setOrgStack([...orgStack, org]); + } }; const { data: members = [], ScrollData: MemberScrollData, - refreshList: refetchMembers + refreshList: refetchMembers, + isLoading: isLoadingMembers } = useScrollPagination(getTeamMembers, { pageSize: 20, params: { @@ -106,11 +108,13 @@ function useOrg({ withPermission = true }: { withPermission?: boolean } = {}) { ]); }; + const isLoading = isLoadingOrgs || isLoadingMembers; + return { orgStack, currentOrg, orgs, - isLoadingOrgs, + isLoading, paths, onClickOrg, members,