✨(frontend) add useSearch

frontend is now calling the search endpoint

Signed-off-by: charles <[email protected]>

src/frontend/apps/impress/src/features/docs/doc-management/api/searchDocs.tsx

@@ -0,0 +1,43 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { APIError, APIList, errorCauses, fetchAPI } from '@/api';
+import { KEY_LIST_DOC } from '@/docs/doc-management';
+
+import { Doc } from '../types';
+
+export type DocsParams = {
+  q: string;
+};
+
+export const constructParams = (params: DocsParams): URLSearchParams => {
+  const searchParams = new URLSearchParams();
+
+  if (params.q.length > 0) {
+    searchParams.set('q', params.q);
+  } else {
+    searchParams.set('q', '*');
+  }
+
+  return searchParams;
+};
+
+export type DocsResponse = APIList<Doc>;
+export const getDocs = async (params: DocsParams): Promise<DocsResponse> => {
+  const searchParams = constructParams(params);
+  const response = await fetchAPI(
+    `documents/search/?${searchParams.toString()}`,
+  );
+
+  if (!response.ok) {
+    throw new APIError('Failed to get the docs', await errorCauses(response));
+  }
+
+  return response.json() as Promise<DocsResponse>;
+};
+
+export const useSearchDocs = (params: DocsParams) => {
+  return useQuery<DocsResponse, APIError, DocsResponse>({
+    queryKey: [KEY_LIST_DOC, 'search', params],
+    queryFn: () => getDocs(params),
+  });
+};

src/frontend/apps/impress/src/features/docs/doc-management/api/useDocs.tsx

@@ -15,7 +15,6 @@ export type DocsParams = {
   page: number;
   ordering?: DocsOrdering;
   is_creator_me?: boolean;
-  title?: string;
   is_favorite?: boolean;
 };
 
@@ -31,9 +30,6 @@ export const constructParams = (params: DocsParams): URLSearchParams => {
   if (params.is_creator_me !== undefined) {
     searchParams.set('is_creator_me', params.is_creator_me.toString());
   }
-  if (params.title && params.title.length > 0) {
-    searchParams.set('title', params.title);
-  }
   if (params.is_favorite !== undefined) {
     searchParams.set('is_favorite', params.is_favorite.toString());
   }

src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchContent.tsx

@@ -1,10 +1,10 @@
 import { t } from 'i18next';
 import { useEffect, useMemo } from 'react';
-import { InView } from 'react-intersection-observer';
 
 import { QuickSearchData, QuickSearchGroup } from '@/components/quick-search';
+import { useSearchDocs } from '@/docs/doc-management/api/searchDocs';
 
-import { Doc, useInfiniteDocs } from '../../doc-management';
+import { Doc } from '../../doc-management';
 
 import { DocSearchFiltersValues } from './DocSearchFilters';
 import { DocSearchItem } from './DocSearchItem';
@@ -22,37 +22,22 @@ export const DocSearchContent = ({
   onSelect,
   onLoadingChange,
 }: DocSearchContentProps) => {
-  const {
-    data,
-    isFetching,
-    isRefetching,
-    isLoading,
-    fetchNextPage,
-    hasNextPage,
-  } = useInfiniteDocs({
-    page: 1,
-    title: search,
+  const { data, isFetching, isRefetching, isLoading } = useSearchDocs({
+    q: search,
     ...filters,
   });
 
   const loading = isFetching || isRefetching || isLoading;
 
   const docsData: QuickSearchData<Doc> = useMemo(() => {
-    const docs = data?.pages.flatMap((page) => page.results) || [];
+    const docs = data?.results || [];
 
     return {
       groupName: docs.length > 0 ? t('Select a document') : '',
       elements: search ? docs : [],
       emptyString: t('No document found'),
-      endActions: hasNextPage
-        ? [
-            {
-              content: <InView onChange={() => void fetchNextPage()} />,
-            },
-          ]
-        : [],
     };
-  }, [search, data?.pages, fetchNextPage, hasNextPage]);
+  }, [search, data?.results]);
 
   useEffect(() => {
     onLoadingChange?.(loading);