refactor some modal to fix early return problem

apps/app/src/client/components/PageDuplicateModal.tsx

@@ -303,13 +303,9 @@ const PageDuplicateModal = (): React.JSX.Element => {
   const { isOpened } = usePageDuplicateModalStatus();
   const { close: closeDuplicateModal } = usePageDuplicateModalActions();
 
-  if (!isOpened) {
-    return <></>;
-  }
-
   return (
     <Modal size="lg" isOpen={isOpened} toggle={closeDuplicateModal} data-testid="page-duplicate-modal" className="grw-duplicate-page" autoFocus={false}>
-      <PageDuplicateModalSubstance />
+      {isOpened && <PageDuplicateModalSubstance />}
     </Modal>
   );
 };

apps/app/src/client/components/PageEditor/DrawioModal.tsx

@@ -185,15 +185,5 @@ const DrawioModalSubstance = (): JSX.Element => {
 };
 
 export const DrawioModal = (): JSX.Element => {
-  const drawioModalData = useDrawioModalStatus();
-  const drawioModalDataInEditor = useDrawioModalForEditorStatus();
-
-  const isOpened = drawioModalData?.isOpened ?? false;
-  const isOpenedInEditor = drawioModalDataInEditor?.isOpened ?? false;
-
-  if (!isOpened && !isOpenedInEditor) {
-    return <></>;
-  }
-
   return <DrawioModalSubstance />;
 };

apps/app/src/client/components/PageEditor/HandsontableModal.tsx

@@ -535,12 +535,5 @@ export const HandsontableModalSubstance = (): JSX.Element => {
 };
 
 export const HandsontableModal = (): JSX.Element => {
-  const handsontableModalData = useHandsontableModalStatus();
-  const isOpened = handsontableModalData?.isOpened ?? false;
-
-  if (!isOpened) {
-    return <></>;
-  }
-
   return <HandsontableModalSubstance />;
 };

apps/app/src/client/components/PageEditor/LinkEditModal.tsx

@@ -378,13 +378,11 @@ export const LinkEditModal = (): React.JSX.Element => {
   const linkEditModalStatus = useLinkEditModalStatus();
   const { close } = useLinkEditModalActions();
 
-  if (linkEditModalStatus == null || !linkEditModalStatus.isOpened) {
-    return <></>;
-  }
+  const isOpened = linkEditModalStatus?.isOpened ?? false;
 
   return (
-    <Modal className="link-edit-modal" isOpen={linkEditModalStatus.isOpened} toggle={close} size="lg" autoFocus={false}>
-      <LinkEditModalSubstance />
+    <Modal className="link-edit-modal" isOpen={isOpened} toggle={close} size="lg" autoFocus={false}>
+      {isOpened && <LinkEditModalSubstance />}
     </Modal>
   );
 };

apps/app/src/client/components/PagePresentationModal.tsx

@@ -118,10 +118,6 @@ const PagePresentationModal = (): React.JSX.Element => {
 
   const isOpen = presentationModalData?.isOpened ?? false;
 
-  if (!isOpen) {
-    return <></>;
-  }
-
   return (
     <Modal
       isOpen={isOpen}
@@ -129,7 +125,7 @@ const PagePresentationModal = (): React.JSX.Element => {
       data-testid="page-presentation-modal"
       className={moduleClass}
     >
-      <PagePresentationModalSubstance />
+      {isOpen && <PagePresentationModalSubstance />}
     </Modal>
   );
 };

apps/app/src/client/components/PageRenameModal.tsx

@@ -375,13 +375,9 @@ const PageRenameModal = (): React.JSX.Element => {
   const { isOpened } = usePageRenameModalStatus();
   const { close: closeRenameModal } = usePageRenameModalActions();
 
-  if (!isOpened) {
-    return <></>;
-  }
-
   return (
     <Modal size="lg" isOpen={isOpened} toggle={closeRenameModal} data-testid="page-rename-modal" autoFocus={false}>
-      <PageRenameModalSubstance />
+      {isOpened && <PageRenameModalSubstance />}
     </Modal>
   );
 };

apps/app/src/client/components/PutbackPageModal.jsx

@@ -2,6 +2,7 @@ import React, { useState, useCallback, useMemo } from 'react';
 
 
 import { useTranslation } from 'next-i18next';
+import PropTypes from 'prop-types';
 import {
   Modal, ModalHeader, ModalBody, ModalFooter,
 } from 'reactstrap';
@@ -12,12 +13,10 @@ import { mutateAllPageInfo } from '~/stores/page';
 
 import ApiErrorMessageList from './PageManagement/ApiErrorMessageList';
 
-const PutBackPageModal = () => {
+const PutBackPageModalSubstance = ({ pageDataToRevert, closePutBackPageModal }) => {
   const { t } = useTranslation();
 
-  const pageDataToRevert = usePutBackPageModalStatus();
-  const { close: closePutBackPageModal } = usePutBackPageModalActions();
-  const { isOpened, page } = pageDataToRevert;
+  const { page } = pageDataToRevert;
   const { pageId, path } = page;
   const onPutBacked = pageDataToRevert.opts?.onPutBacked;
 
@@ -99,12 +98,8 @@ const PutBackPageModal = () => {
     </>
   ), [errs, targetPath, putbackPageButtonHandler, t]);
 
-  if (!isOpened) {
-    return <></>;
-  }
-
   return (
-    <Modal isOpen={isOpened} toggle={closeModalHandler} data-testid="put-back-page-modal">
+    <>
       <ModalHeader tag="h4" toggle={closeModalHandler} className="text-info">
         {headerContent}
       </ModalHeader>
@@ -114,9 +109,42 @@ const PutBackPageModal = () => {
       <ModalFooter>
         {footerContent}
       </ModalFooter>
-    </Modal>
+    </>
   );
+};
+
+PutBackPageModalSubstance.propTypes = {
+  pageDataToRevert: PropTypes.shape({
+    page: PropTypes.shape({
+      pageId: PropTypes.string,
+      path: PropTypes.string,
+    }),
+    opts: PropTypes.shape({
+      onPutBacked: PropTypes.func,
+    }),
+  }).isRequired,
+  closePutBackPageModal: PropTypes.func.isRequired,
+};
+
+const PutBackPageModal = () => {
+  const pageDataToRevert = usePutBackPageModalStatus();
+  const { close: closePutBackPageModal } = usePutBackPageModalActions();
+  const { isOpened } = pageDataToRevert;
+
+  const closeModalHandler = useCallback(() => {
+    closePutBackPageModal();
+  }, [closePutBackPageModal]);
 
+  return (
+    <Modal isOpen={isOpened} toggle={closeModalHandler} data-testid="put-back-page-modal">
+      {isOpened && (
+        <PutBackPageModalSubstance
+          pageDataToRevert={pageDataToRevert}
+          closePutBackPageModal={closePutBackPageModal}
+        />
+      )}
+    </Modal>
+  );
 };
 
 export default PutBackPageModal;

apps/app/src/features/page-bulk-export/client/components/PageBulkExportSelectModal.tsx

@@ -162,14 +162,9 @@ const PageBulkExportSelectModalSubstance = (): JSX.Element => {
 const PageBulkExportSelectModal = (): JSX.Element => {
   const status = usePageBulkExportSelectModalStatus();
 
-  // Early return for performance optimization
-  if (!status?.isOpened) {
-    return <></>;
-  }
-
   return (
-    <Modal isOpen={status.isOpened} size="lg">
-      <PageBulkExportSelectModalSubstance />
+    <Modal isOpen={status?.isOpened ?? false} size="lg">
+      {status?.isOpened && <PageBulkExportSelectModalSubstance />}
     </Modal>
   );
 };

apps/app/src/features/search/client/components/SearchModal.tsx

@@ -177,11 +177,6 @@ const SearchModal = (): JSX.Element => {
     [onSearchOverride, setSearchKeyword],
   );
 
-  // Early return for performance optimization
-  if (!isOpened) {
-    return <></>;
-  }
-
   return (
     <Modal
       size="lg"
@@ -189,7 +184,7 @@ const SearchModal = (): JSX.Element => {
       toggle={closeSearchModal}
       data-testid="search-modal"
     >
-      <SearchModalSubstance onSearch={searchHandler} />
+      {isOpened && <SearchModalSubstance onSearch={searchHandler} />}
     </Modal>
   );
 };