From 7e7c9ac4c5e588cd69b332ae23af4b50fe8b0929 Mon Sep 17 00:00:00 2001
From: Anthony LC <anthony.le-courric@mail.numerique.gouv.fr>
Date: Mon, 17 Mar 2025 16:54:47 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(frontend)=20replace=20useMod?=
 =?UTF-8?q?al=20hook?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

useModal hook does not use useCallback for its
methods that creates useless rerenders.
---
 .../doc-search/components/DocSearchModal.tsx  |  7 ++++--
 .../components/LefPanelTargetFilters.tsx      |  2 +-
 .../left-panel/components/LeftPanel.tsx       | 10 +++-----
 .../left-panel/components/LeftPanelHeader.tsx | 25 ++++++++++++-------
 4 files changed, 25 insertions(+), 19 deletions(-)

diff --git a/src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchModal.tsx b/src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchModal.tsx
index 10c2391d..2f7db61d 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchModal.tsx
+++ b/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();
diff --git a/src/frontend/apps/impress/src/features/left-panel/components/LefPanelTargetFilters.tsx b/src/frontend/apps/impress/src/features/left-panel/components/LefPanelTargetFilters.tsx
index 1ffd3e70..f86cd602 100644
--- a/src/frontend/apps/impress/src/features/left-panel/components/LefPanelTargetFilters.tsx
+++ b/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();
   };
 
diff --git a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanel.tsx b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanel.tsx
index d0eb7292..309fe24b 100644
--- a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanel.tsx
+++ b/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 (
     <>
diff --git a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelHeader.tsx b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelHeader.tsx
index 1ef117e9..a3fcb7a9 100644
--- a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelHeader.tsx
+++ b/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} />
       )}
     </>
   );