♻️(frontend) replace useModal hook

useModal hook does not use useCallback for its
methods that creates useless rerenders.

Author: AntoLC

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

@@ -1,4 +1,4 @@
-import { Modal, ModalProps, ModalSize } from '@openfun/cunningham-react';
+import { Modal, ModalSize } from '@openfun/cunningham-react';
 import Image from 'next/image';
 import { useRouter } from 'next/navigation';
 import { useMemo, useState } from 'react';
@@ -19,7 +19,10 @@ import EmptySearchIcon from '../assets/illustration-docs-empty.png';
 
 import { DocSearchItem } from './DocSearchItem';
 
-type DocSearchModalProps = ModalProps & {};
+type DocSearchModalProps = {
+  onClose: () => void;
+  isOpen: boolean;
+};
 
 export const DocSearchModal = ({ ...modalProps }: DocSearchModalProps) => {
   const { t } = useTranslation();

src/frontend/apps/impress/src/features/left-panel/components/LefPanelTargetFilters.tsx

@@ -44,7 +44,7 @@ export const LeftPanelTargetFilters = () => {
   const onSelectQuery = (query: DocDefaultFilter) => {
     const params = new URLSearchParams(searchParams);
     params.set('target', query);
-    router.replace(`${pathname}?${params.toString()}`);
+    router.push(`${pathname}?${params.toString()}`);
     togglePanel();
   };
 

src/frontend/apps/impress/src/features/left-panel/components/LeftPanel.tsx

@@ -1,5 +1,5 @@
 import { usePathname } from 'next/navigation';
-import { useCallback, useEffect } from 'react';
+import { useEffect } from 'react';
 import { createGlobalStyle, css } from 'styled-components';
 
 import { Box, SeparatedSection } from '@/components';
@@ -30,13 +30,9 @@ export const LeftPanel = () => {
   const colors = theme.colorsTokens();
   const spacings = theme.spacingsTokens();
 
-  const toggle = useCallback(() => {
-    togglePanel(false);
-  }, [togglePanel]);
-
   useEffect(() => {
-    toggle();
-  }, [pathname, toggle]);
+    togglePanel(false);
+  }, [pathname, togglePanel]);
 
   return (
     <>

src/frontend/apps/impress/src/features/left-panel/components/LeftPanelHeader.tsx

@@ -1,7 +1,7 @@
-import { Button, ModalSize, useModal } from '@openfun/cunningham-react';
+import { Button } from '@openfun/cunningham-react';
 import { t } from 'i18next';
 import { useRouter } from 'next/navigation';
-import { PropsWithChildren } from 'react';
+import { PropsWithChildren, useCallback, useState } from 'react';
 
 import { Box, Icon, SeparatedSection } from '@/components';
 import { useCreateDoc } from '@/docs/doc-management';
@@ -13,17 +13,24 @@ import { useLeftPanelStore } from '../stores';
 
 export const LeftPanelHeader = ({ children }: PropsWithChildren) => {
   const router = useRouter();
-  const searchModal = useModal();
   const { authenticated } = useAuth();
-  useCmdK(() => {
+  const [isSearchModalOpen, setIsSearchModalOpen] = useState(false);
+
+  const openSearchModal = useCallback(() => {
     const isEditorToolbarOpen =
       document.getElementsByClassName('bn-formatting-toolbar').length > 0;
     if (isEditorToolbarOpen) {
       return;
     }
 
-    searchModal.open();
-  });
+    setIsSearchModalOpen(true);
+  }, []);
+
+  const closeSearchModal = useCallback(() => {
+    setIsSearchModalOpen(false);
+  }, []);
+
+  useCmdK(openSearchModal);
   const { togglePanel } = useLeftPanelStore();
 
   const { mutate: createDoc } = useCreateDoc({
@@ -64,7 +71,7 @@ export const LeftPanelHeader = ({ children }: PropsWithChildren) => {
               />
               {authenticated && (
                 <Button
-                  onClick={searchModal.open}
+                  onClick={openSearchModal}
                   size="medium"
                   color="tertiary-text"
                   icon={
@@ -80,8 +87,8 @@ export const LeftPanelHeader = ({ children }: PropsWithChildren) => {
         </SeparatedSection>
         {children}
       </Box>
-      {searchModal.isOpen && (
-        <DocSearchModal {...searchModal} size={ModalSize.LARGE} />
+      {isSearchModalOpen && (
+        <DocSearchModal onClose={closeSearchModal} isOpen={isSearchModalOpen} />
       )}
     </>
   );