diff --git a/src/frontend/apps/impress/src/features/docs/doc-management/api/searchDocs.tsx b/src/frontend/apps/impress/src/features/docs/doc-management/api/searchDocs.tsx new file mode 100644 index 00000000..68660f77 --- /dev/null +++ b/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; +export const getDocs = async (params: DocsParams): Promise => { + 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; +}; + +export const useSearchDocs = (params: DocsParams) => { + return useQuery({ + queryKey: [KEY_LIST_DOC, 'search', params], + queryFn: () => getDocs(params), + }); +}; diff --git a/src/frontend/apps/impress/src/features/docs/doc-management/api/useDocs.tsx b/src/frontend/apps/impress/src/features/docs/doc-management/api/useDocs.tsx index 90e1461e..911e52ba 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-management/api/useDocs.tsx +++ b/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()); } diff --git a/src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchContent.tsx b/src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchContent.tsx index fc14d8bc..32b92623 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchContent.tsx +++ b/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 = 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: void fetchNextPage()} />, - }, - ] - : [], }; - }, [search, data?.pages, fetchNextPage, hasNextPage]); + }, [search, data?.results]); useEffect(() => { onLoadingChange?.(loading);