diff --git a/packages/pl-fe/src/features/chats/components/chat-search/chat-search.tsx b/packages/pl-fe/src/features/chats/components/chat-search/chat-search.tsx index b8b003b8f..69971a98b 100644 --- a/packages/pl-fe/src/features/chats/components/chat-search/chat-search.tsx +++ b/packages/pl-fe/src/features/chats/components/chat-search/chat-search.tsx @@ -10,7 +10,7 @@ import { ChatWidgetScreens, useChatContext } from 'pl-fe/contexts/chat-context'; import { useDebounce } from 'pl-fe/hooks/use-debounce'; import { useChats } from 'pl-fe/queries/chats'; import { queryClient } from 'pl-fe/queries/client'; -import useAccountSearch from 'pl-fe/queries/search'; +import { useAccountSearch } from 'pl-fe/queries/search/use-search-accounts'; import toast from 'pl-fe/toast'; import Blankslate from './blankslate'; diff --git a/packages/pl-fe/src/features/chats/components/chat-search/results.tsx b/packages/pl-fe/src/features/chats/components/chat-search/results.tsx index 24b1dd769..fd91367c4 100644 --- a/packages/pl-fe/src/features/chats/components/chat-search/results.tsx +++ b/packages/pl-fe/src/features/chats/components/chat-search/results.tsx @@ -7,7 +7,9 @@ import HStack from 'pl-fe/components/ui/hstack'; import Stack from 'pl-fe/components/ui/stack'; import Text from 'pl-fe/components/ui/text'; import VerificationBadge from 'pl-fe/components/verification-badge'; -import useAccountSearch from 'pl-fe/queries/search'; +import { useAppSelector } from 'pl-fe/hooks/use-app-selector'; +import { useAccountSearch } from 'pl-fe/queries/search/use-search-accounts'; +import { selectAccounts } from 'pl-fe/selectors'; import type { Account } from 'pl-api'; @@ -18,7 +20,8 @@ interface IResults { } const Results = ({ accountSearchResult, onSelect, parentRef }: IResults) => { - const { data: accounts, isFetching, hasNextPage, fetchNextPage } = accountSearchResult; + const { data: accountIds = [], isFetching, hasNextPage, fetchNextPage } = accountSearchResult; + const accounts = useAppSelector((state) => selectAccounts(state, accountIds)); const [isNearBottom, setNearBottom] = useState(false); const [isNearTop, setNearTop] = useState(true); diff --git a/packages/pl-fe/src/queries/search.ts b/packages/pl-fe/src/queries/search.ts deleted file mode 100644 index 12c2f4022..000000000 --- a/packages/pl-fe/src/queries/search.ts +++ /dev/null @@ -1,48 +0,0 @@ -import { keepPreviousData, useInfiniteQuery } from '@tanstack/react-query'; - -import { useClient } from 'pl-fe/hooks/use-client'; -import { flattenPages } from 'pl-fe/utils/queries'; - -import type { Account, PaginatedResponse } from 'pl-api'; - -const useAccountSearch = (q: string) => { - const client = useClient(); - - const getAccountSearch = async(q: string, pageParam?: Pick, 'next'>): Promise> => { - if (pageParam?.next) return pageParam.next(); - - const _getAccountSearch = async (offset = 0) => { - const response = await client.accounts.searchAccounts(q, { - limit: 10, - following: true, - offset: offset, - }); - - return { - previous: null, - next: response.length ? () => _getAccountSearch(offset + 10) : null, - items: response, - partial: false, - }; - }; - - return _getAccountSearch(0); - }; - - const queryInfo = useInfiniteQuery({ - queryKey: ['search', 'accounts', q], - queryFn: ({ pageParam }) => getAccountSearch(q, pageParam), - placeholderData: keepPreviousData, - initialPageParam: { next: null as (() => Promise>) | null }, - getNextPageParam: (config) => config.next ? config : undefined, - }); - - const data = flattenPages(queryInfo.data); - - return { - ...queryInfo, - data, - }; -}; - -export { useAccountSearch as default }; diff --git a/packages/pl-fe/src/queries/search/use-search-accounts.ts b/packages/pl-fe/src/queries/search/use-search-accounts.ts new file mode 100644 index 000000000..a7ba3a152 --- /dev/null +++ b/packages/pl-fe/src/queries/search/use-search-accounts.ts @@ -0,0 +1,32 @@ +import { useInfiniteQuery } from '@tanstack/react-query'; + +import { importEntities } from 'pl-fe/actions/importer'; +import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch'; +import { useClient } from 'pl-fe/hooks/use-client'; + +import type { SearchAccountParams } from 'pl-api'; + +const useAccountSearch = ( + query: string, + params?: Omit, +) => { + const client = useClient(); + const dispatch = useAppDispatch(); + + return useInfiniteQuery({ + queryKey: ['search', 'accountSearch', query, params], + queryFn: ({ pageParam: offset, signal }) => client.accounts.searchAccounts(query, { + ...params, + offset, + }, { signal }).then((accounts) => { + dispatch(importEntities({ accounts })); + return accounts.map(({ id }) => id); + }), + enabled: !!query?.trim(), + initialPageParam: 0, + getNextPageParam: (_, allPages) => allPages.flat().length, + select: (data) => data.pages.flat(), + }); +}; + +export { useAccountSearch };