✨(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,11 +1,14 @@
 import { t } from 'i18next';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo } from 'react';
 import { InView } from 'react-intersection-observer';
 
 import { Box } from '@/components/';
 import { QuickSearchData, QuickSearchGroup } from '@/components/quick-search';
-import { Doc, useInfiniteDocs } from '@/docs/doc-management';
+import { useSearchDocs } from '@/docs/doc-management/api/searchDocs';
 
+import { Doc } from '../../doc-management';
+
+import { DocSearchFiltersValues } from './DocSearchFilters';
 import { DocSearchItem } from './DocSearchItem';
 
 type DocSearchContentProps = {
@@ -27,16 +30,8 @@ export const DocSearchContent = ({
   renderSearchElement,
   isSearchNotMandatory,
 }: DocSearchContentProps) => {
-  const {
-    data,
-    isFetching,
-    isRefetching,
-    isLoading,
-    fetchNextPage,
-    hasNextPage,
-  } = useInfiniteDocs({
-    page: 1,
-    ...(search ? { title: search } : {}),
+  const { data, isFetching, isRefetching, isLoading } = useSearchDocs({
+    q: search,
   });
 
   const loading = isFetching || isRefetching || isLoading;
@@ -79,8 +74,6 @@ export const DocSearchContent = ({
   }, [
     search,
     data?.pages,
-    fetchNextPage,
-    hasNextPage,
     filterResults,
     groupName,
     isSearchNotMandatory,