From 678c6f22fe0188a9e4445ce50097c5612055c0ee Mon Sep 17 00:00:00 2001 From: Timofey Boyko Date: Fri, 9 Feb 2024 17:23:08 +0300 Subject: [PATCH] Selectors: fix search --- .../components/panels/AddUsersPanel/index.tsx | 67 ++++++++++++------- .../selector/sub-components/Body.tsx | 6 +- .../Files/FilesSelector.constants.ts | 2 +- packages/shared/selectors/Files/index.tsx | 9 ++- packages/shared/selectors/People/index.tsx | 29 +++++--- packages/shared/selectors/Room/index.tsx | 26 +++---- 6 files changed, 83 insertions(+), 56 deletions(-) diff --git a/packages/client/src/components/panels/AddUsersPanel/index.tsx b/packages/client/src/components/panels/AddUsersPanel/index.tsx index db93ca1459..7de0252087 100644 --- a/packages/client/src/components/panels/AddUsersPanel/index.tsx +++ b/packages/client/src/components/panels/AddUsersPanel/index.tsx @@ -19,7 +19,7 @@ import { } from "@docspace/shared/components/selector/Selector.types"; import { toastr } from "@docspace/shared/components/toast"; import { Text } from "@docspace/shared/components/text"; - +import useLoadingWithTimeout from "@docspace/shared/hooks/useLoadingWithTimeout"; import { getUserRole } from "@docspace/shared/utils/common"; import Filter from "@docspace/shared/api/people/filter"; import { getMembersList } from "@docspace/shared/api/people"; @@ -27,6 +27,7 @@ import { ShareAccessRights } from "@docspace/shared/enums"; import { RowLoader, SearchLoader } from "@docspace/shared/skeletons/selector"; import { TUser } from "@docspace/shared/api/people/types"; import { AvatarRole } from "@docspace/shared/components/avatar"; +import { LOADER_TIMEOUT } from "@docspace/shared/constants"; const toListItem = (item: TUser) => { const { @@ -103,6 +104,8 @@ const AddUsersPanel = ({ ]); const isFirstLoad = useRef(true); + const [isInit, setIsInit] = useState(true); + const [isLoading, setIsLoading] = useLoadingWithTimeout(0, true); const accessRight = defaultAccess || @@ -173,23 +176,29 @@ const AddUsersPanel = ({ const [total, setTotal] = useState(0); const totalRef = useRef(0); - const onSearch = useCallback((value: string, callback?: Function) => { - setSearchValue(() => { + const onSearch = useCallback( + (value: string, callback?: Function) => { isFirstLoad.current = true; + setIsLoading(true); + setSearchValue(() => { + return value; + }); + callback?.(); + }, + [setIsLoading], + ); - return value; - }); - callback?.(); - }, []); - - const onClearSearch = useCallback((callback?: Function) => { - setSearchValue(() => { + const onClearSearch = useCallback( + (callback?: Function) => { isFirstLoad.current = true; - - return ""; - }); - callback?.(); - }, []); + setIsLoading(true); + setSearchValue(() => { + return ""; + }); + callback?.(); + }, + [setIsLoading], + ); const loadNextPage = useCallback( async (startIndex: number) => { @@ -213,20 +222,26 @@ const AddUsersPanel = ({ const newTotal = response.total - totalDifferent; - setItemsList((list) => { - const newItems = [...list, ...items]; + if (isFirstLoad.current) { + setItemsList([...items]); + setHasNextPage(items.length < newTotal); + } else { + setItemsList((list) => { + const newItems = [...list, ...items]; + setHasNextPage(newItems.length < newTotal); - setHasNextPage(newItems.length < newTotal); - return newItems; - }); + return newItems; + }); + } setTotal(newTotal); totalRef.current = newTotal; setIsNextPageLoading(false); - + setIsLoading(false); + setIsInit(false); isFirstLoad.current = false; }, - [getFilterWithOutDisabledUser, roomId, searchValue], + [getFilterWithOutDisabledUser, roomId, searchValue, setIsLoading], ); const emptyScreenImage = theme.isBase @@ -340,16 +355,16 @@ const AddUsersPanel = ({ isNextPageLoading={isNextPageLoading} loadNextPage={loadNextPage} totalItems={total} - isLoading={isFirstLoad.current} + isLoading={isLoading} searchLoader={} - isSearchLoading={isFirstLoad.current} + isSearchLoading={isInit} rowLoader={ } /> diff --git a/packages/shared/components/selector/sub-components/Body.tsx b/packages/shared/components/selector/sub-components/Body.tsx index 298b624698..ac520c4711 100644 --- a/packages/shared/components/selector/sub-components/Body.tsx +++ b/packages/shared/components/selector/sub-components/Body.tsx @@ -168,7 +168,9 @@ const Body = ({ {(withSearch && isSearchLoading) || isBreadCrumbsLoading ? ( searchLoader - ) : withSearch || (itemsCount > 0 && withSearch) ? ( + ) : withSearch || + (itemsCount > 0 && withSearch) || + (withSearch && isSearch) ? ( {rowLoader} ) : itemsCount === 0 ? ( (false); const [searchValue, setSearchValue] = React.useState(""); + const [isInit, setIsInit] = React.useState(true); const { getIcon } = useFilesSettings(getIconProp); @@ -193,6 +194,7 @@ const FilesSelector = ({ (item: TSelectorItem) => { if (item.isFolder) { setIsFirstLoad(true); + setItems([]); setBreadCrumbs((value) => [ ...value, @@ -401,7 +403,8 @@ const FilesSelector = ({ : {}; const withSearch = - !isRoot && items.length ? items.length > 0 : !isRoot && isFirstLoad; + !!searchValue || + (!isRoot && items?.length ? items.length > 0 : !isRoot && isFirstLoad); const searchProps: TSelectorSearch = withSearch ? { @@ -479,7 +482,7 @@ const FilesSelector = ({ emptyScreenImage={ theme?.isBase ? EmptyScreenAltSvgUrl : EmptyScreenAltSvgDarkUrl } - emptyScreenHeader={t("SelectorEmptyScreenHeader")} + emptyScreenHeader={t("Common:SelectorEmptyScreenHeader")} emptyScreenDescription="" searchEmptyScreenImage={ theme?.isBase @@ -487,7 +490,7 @@ const FilesSelector = ({ : EmptyScreenFilterAltDarkSvgUrl } searchEmptyScreenHeader={t("Common:NotFoundTitle")} - searchEmptyScreenDescription={t("EmptyFilterDescriptionText")} + searchEmptyScreenDescription={t("Common:EmptyFilterDescriptionText")} isLoading={showLoader} rowLoader={ { - const tempItems = [...i, ...data]; - + if (isFirstLoad) { const newItems = withOutCurrentAuthorizedUser - ? removeCurrentUserFromList(tempItems) - : moveCurrentUserToTopOfList(tempItems); + ? removeCurrentUserFromList(data) + : moveCurrentUserToTopOfList(data); setHasNextPage(newItems.length < newTotal); + setItemsList(newItems); + } else { + setItemsList((i) => { + const tempItems = [...i, ...data]; - return newItems; - }); + const newItems = withOutCurrentAuthorizedUser + ? removeCurrentUserFromList(tempItems) + : moveCurrentUserToTopOfList(tempItems); + + setHasNextPage(newItems.length < newTotal); + + return newItems; + }); + } setTotal(newTotal); totalRef.current = newTotal; @@ -202,18 +211,16 @@ const PeopleSelector = ({ ); const onSearch = useCallback((value: string, callback?: Function) => { + isFirstLoad.current = true; setSearchValue(() => { - isFirstLoad.current = true; - return value; }); callback?.(); }, []); const onClearSearch = useCallback((callback?: Function) => { + isFirstLoad.current = true; setSearchValue(() => { - isFirstLoad.current = true; - return ""; }); callback?.(); diff --git a/packages/shared/selectors/Room/index.tsx b/packages/shared/selectors/Room/index.tsx index 9f6ae55a57..09d57f6eec 100644 --- a/packages/shared/selectors/Room/index.tsx +++ b/packages/shared/selectors/Room/index.tsx @@ -57,9 +57,8 @@ const RoomSelector = ({ const onSearchAction = React.useCallback( (value: string, callback?: Function) => { + isFirstLoad.current = true; setSearchValue(() => { - isFirstLoad.current = true; - return value; }); callback?.(); @@ -68,9 +67,8 @@ const RoomSelector = ({ ); const onClearSearchAction = React.useCallback((callback?: Function) => { + isFirstLoad.current = true; setSearchValue(() => { - isFirstLoad.current = true; - return ""; }); callback?.(); @@ -99,17 +97,19 @@ const RoomSelector = ({ setHasNextPage(count === PAGE_COUNT); - setItems((prevItems) => { - const newItems = [...rooms] as TSelectorItem[]; + if (isFirstLoad) { + setTotal(totalCount); - if (isFirstLoad) { - setTotal(totalCount); - isFirstLoad.current = false; - return newItems; - } + setItems([...rooms] as TSelectorItem[]); + } else { + setItems((prevItems) => { + const newItems = [...rooms] as TSelectorItem[]; - return [...prevItems, ...newItems]; - }); + return [...prevItems, ...newItems]; + }); + } + + isFirstLoad.current = false; setIsNextPageLoading(false); },