pl-fe: rewrites

Signed-off-by: mkljczk <git@mkljczk.pl>

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';

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<boolean>(false);
   const [isNearTop, setNearTop] = useState<boolean>(true);

packages/pl-fe/src/queries/search.ts

@@ -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<PaginatedResponse<Account>, 'next'>): Promise<PaginatedResponse<Account>> => {
-    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<PaginatedResponse<Account>>) | null },
-    getNextPageParam: (config) => config.next ? config : undefined,
-  });
-
-  const data = flattenPages(queryInfo.data);
-
-  return {
-    ...queryInfo,
-    data,
-  };
-};
-
-export { useAccountSearch as default };

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<SearchAccountParams, 'limit' | 'offset'>,
+) => {
+  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 };