♻️(frontend) refactor DocSearchModalGlobal

The new logic allows simplifying Search modal and page

src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-inline-content/Interlinking/SearchPage.tsx

@@ -3,6 +3,7 @@ import {
   StyleSchema,
 } from '@blocknote/core';
 import { useBlockNoteEditor } from '@blocknote/react';
+import { useTreeContext } from '@gouvfr-lasuite/ui-kit';
 import type { KeyboardEvent } from 'react';
 import { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -26,12 +27,13 @@ import {
 import FoundPageIcon from '@/docs/doc-editor/assets/doc-found.svg';
 import AddPageIcon from '@/docs/doc-editor/assets/doc-plus.svg';
 import {
+  Doc,
   getEmojiAndTitle,
   useCreateChildDocTree,
   useDocStore,
   useTrans,
 } from '@/docs/doc-management';
-import { DocSearchSubPageContent, DocSearchTarget } from '@/docs/doc-search';
+import { DocSearchContent, DocSearchTarget } from '@/docs/doc-search';
 import { useResponsiveStore } from '@/stores';
 
 const inputStyle = css`
@@ -87,7 +89,7 @@ export const SearchPage = ({
   const { isDesktop } = useResponsiveStore();
   const { untitledDocument } = useTrans();
   const isEditable = editor.isEditable;
-
+  const treeContext = useTreeContext<Doc>();
   /**
    * createReactInlineContentSpec add automatically the focus after
    * the inline content, so we need to set the focus on the input
@@ -226,9 +228,11 @@ export const SearchPage = ({
             `}
             $margin={{ top: '0.5rem' }}
           >
-            <DocSearchSubPageContent
+            <DocSearchContent
+              groupName={t('Select a document')}
               search={search}
-              filters={{ target: DocSearchTarget.CURRENT }}
+              target={DocSearchTarget.CURRENT}
+              parentPath={treeContext?.root?.path}
               onSelect={(doc) => {
                 if (!isEditable) {
                   return;
@@ -256,7 +260,7 @@ export const SearchPage = ({
 
                 editor.focus();
               }}
-              renderElement={(doc) => {
+              renderSearchElement={(doc) => {
                 const { emoji, titleWithoutEmoji } = getEmojiAndTitle(
                   doc.title || untitledDocument,
                 );

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

@@ -1,10 +1,11 @@
 import { t } from 'i18next';
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { InView } from 'react-intersection-observer';
 
 import { Box } from '@/components/';
 import { QuickSearchData, QuickSearchGroup } from '@/components/quick-search';
 import { useInfiniteSearchDocs } from '@/docs/doc-management/api/useSearchDocs';
+import { DocSearchTarget } from '@/docs/doc-search';
 
 import { Doc } from '../../doc-management';
 
@@ -17,6 +18,8 @@ type DocSearchContentProps = {
   isSearchNotMandatory?: boolean;
   onSelect: (doc: Doc) => void;
   onLoadingChange?: (loading: boolean) => void;
+  target?: DocSearchTarget;
+  parentPath?: string;
   renderSearchElement?: (doc: Doc) => React.ReactNode;
 };
 
@@ -27,6 +30,8 @@ export const DocSearchContent = ({
   onSelect,
   onLoadingChange,
   renderSearchElement,
+  target,
+  parentPath,
   isSearchNotMandatory,
 }: DocSearchContentProps) => {
   const {
@@ -36,10 +41,17 @@ export const DocSearchContent = ({
     isLoading,
     fetchNextPage,
     hasNextPage,
-  } = useInfiniteSearchDocs({
-    page: 1,
-    q: search,
-  });
+  } = useInfiniteSearchDocs(
+    {
+      q: search,
+      page: 1,
+      target,
+      parentPath,
+    },
+    {
+      enabled: target !== DocSearchTarget.CURRENT || !!parentPath,
+    },
+  );
 
   const loading = isFetching || isRefetching || isLoading;
   const [docsData, setDocsData] = useState<QuickSearchData<Doc>>({
@@ -85,6 +97,8 @@ export const DocSearchContent = ({
     groupName,
     isSearchNotMandatory,
     loading,
+    hasNextPage,
+    fetchNextPage,
   ]);
 
   useEffect(() => {

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

@@ -1,4 +1,5 @@
 import { Modal, ModalSize } from '@gouvfr-lasuite/cunningham-react';
+import { TreeContextType, useTreeContext } from '@gouvfr-lasuite/ui-kit';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
 import { useState } from 'react';
@@ -8,45 +9,39 @@ import { useDebouncedCallback } from 'use-debounce';
 import { Box, ButtonCloseModal, Text } from '@/components';
 import { QuickSearch } from '@/components/quick-search';
 import { Doc, useDocUtils } from '@/docs/doc-management';
+import {
+  DocSearchFilters,
+  DocSearchFiltersValues,
+  DocSearchTarget,
+} from '@/docs/doc-search';
 import { useResponsiveStore } from '@/stores';
 
 import EmptySearchIcon from '../assets/illustration-docs-empty.png';
 
 import { DocSearchContent } from './DocSearchContent';
-import {
-  DocSearchFilters,
-  DocSearchFiltersValues,
-  DocSearchTarget,
-} from './DocSearchFilters';
-import { DocSearchItem } from './DocSearchItem';
-import { DocSearchSubPageContent } from './DocSearchSubPageContent';
 
 type DocSearchModalGlobalProps = {
   onClose: () => void;
   isOpen: boolean;
   showFilters?: boolean;
   defaultFilters?: DocSearchFiltersValues;
+  treeContext?: TreeContextType<Doc> | null;
 };
 
 const DocSearchModalGlobal = ({
   showFilters = false,
   defaultFilters,
+  treeContext,
   ...modalProps
 }: DocSearchModalGlobalProps) => {
   const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
-
   const router = useRouter();
-  const isDocPage = router.pathname === '/docs/[id]';
-
   const [search, setSearch] = useState('');
   const [filters, setFilters] = useState<DocSearchFiltersValues>(
     defaultFilters ?? {},
   );
-
-  const target = filters.target ?? DocSearchTarget.ALL;
   const { isDesktop } = useResponsiveStore();
-
   const handleInputSearch = useDebouncedCallback(setSearch, 300);
 
   const handleSelect = (doc: Doc) => {
@@ -121,24 +116,22 @@ const DocSearchModalGlobal = ({
               </Box>
             )}
             {search && (
-              <>
-                {target === DocSearchTarget.ALL && (
-                  <DocSearchContent
-                    groupName={t('Select a document')}
-                    search={search}
-                    onSelect={handleSelect}
-                    onLoadingChange={setLoading}
-                  />
-                )}
-                {isDocPage && target === DocSearchTarget.CURRENT && (
-                  <DocSearchSubPageContent
-                    search={search}
-                    onSelect={handleSelect}
-                    onLoadingChange={setLoading}
-                    renderElement={(doc) => <DocSearchItem doc={doc} />}
-                  />
-                )}
-              </>
+              <DocSearchContent
+                groupName={t('Select a document')}
+                search={search}
+                onSelect={handleSelect}
+                onLoadingChange={setLoading}
+                target={
+                  filters.target === DocSearchTarget.CURRENT
+                    ? DocSearchTarget.CURRENT
+                    : DocSearchTarget.ALL
+                }
+                parentPath={
+                  filters.target === DocSearchTarget.CURRENT
+                    ? treeContext?.root?.path
+                    : undefined
+                }
+              />
             )}
           </Box>
         </QuickSearch>
@@ -157,6 +150,7 @@ const DocSearchModalDetail = ({
 }: DocSearchModalDetailProps) => {
   const { hasChildren, isChild } = useDocUtils(doc);
   const isWithChildren = isChild || hasChildren;
+  const treeContext = useTreeContext<Doc>();
 
   let defaultFilters = DocSearchTarget.ALL;
   let showFilters = false;
@@ -170,6 +164,7 @@ const DocSearchModalDetail = ({
       {...modalProps}
       showFilters={showFilters}
       defaultFilters={{ target: defaultFilters }}
+      treeContext={treeContext}
     />
   );
 };

src/frontend/apps/impress/src/features/docs/doc-search/components/index.ts

@@ -1,4 +1,3 @@
 export * from './DocSearchContent';
 export * from './DocSearchModal';
 export * from './DocSearchFilters';
-export * from './DocSearchSubPageContent';