Refactor PageSelectModal (2)

apps/app/src/client/components/PageHeader/PagePathHeader.tsx

@@ -20,7 +20,6 @@ import { usePageSelectModal } from '~/stores/modal';
 import { PagePathHierarchicalLink } from '../../../components/Common/PagePathHierarchicalLink';
 import { AutosizeSubmittableInput, getAdjustedMaxWidthForAutosizeInput } from '../Common/SubmittableInput';
 import { usePagePathRenameHandler } from '../PageEditor/page-path-rename-utils';
-import { PageSelectModal } from '../PageSelectModal/PageSelectModal';
 
 import styles from './PagePathHeader.module.scss';
 
@@ -48,8 +47,7 @@ export const PagePathHeader = memo((props: Props): JSX.Element => {
   const [isRenameInputShown, setRenameInputShown] = useState(false);
   const [isHover, setHover] = useState(false);
 
-  const { data: PageSelectModalData, open: openPageSelectModal } = usePageSelectModal();
-  const isOpened = PageSelectModalData?.isOpened ?? false;
+  const { open: openPageSelectModal } = usePageSelectModal();
 
   const [validationResult, setValidationResult] = useState<InputValidationResult>();
 
@@ -166,8 +164,6 @@ export const PagePathHeader = memo((props: Props): JSX.Element => {
           <span className="material-symbols-outlined fs-6">account_tree</span>
         </button>
       </div>
-
-      {isOpened && <PageSelectModal />}
     </div>
   );
 });

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

@@ -22,15 +22,12 @@ import ItemsTreeContentSkeleton from '../ItemsTree/ItemsTreeContentSkeleton';
 
 import { TreeItemForModal } from './TreeItemForModal';
 
-
-export const PageSelectModal: FC = () => {
+const PageSelectModalSubstance: FC = () => {
   const {
     data: PageSelectModalData,
     close: closeModal,
   } = usePageSelectModal();
 
-  const isOpened = PageSelectModalData?.isOpened ?? false;
-
   const [clickedParentPage, setClickedParentPage] = useState<IPageForItem | null>(null);
 
   const { t } = useTranslation();
@@ -74,11 +71,7 @@ export const PageSelectModal: FC = () => {
   }
 
   return (
-    <Modal
-      isOpen={isOpened}
-      toggle={closeModal}
-      centered
-    >
+    <>
       <ModalHeader toggle={closeModal}>{t('page_select_modal.select_page_location')}</ModalHeader>
       <ModalBody className="p-0">
         <Suspense fallback={<ItemsTreeContentSkeleton />}>
@@ -101,6 +94,21 @@ export const PageSelectModal: FC = () => {
         <Button color="secondary" onClick={onClickCancel}>{t('Cancel')}</Button>
         <Button color="primary" onClick={onClickDone}>{t('Done')}</Button>
       </ModalFooter>
+    </>
+  );
+};
+
+export const PageSelectModal = (): JSX.Element => {
+  const { data: pageSelectModalData, close: closePageSelectModal } = usePageSelectModal();
+  const isOpen = pageSelectModalData?.isOpened ?? false;
+
+  if (!isOpen) {
+    return <></>;
+  }
+
+  return (
+    <Modal isOpen={isOpen} toggle={closePageSelectModal} centered>
+      <PageSelectModalSubstance />
     </Modal>
   );
 };

apps/app/src/components/Layout/BasicLayout.tsx

@@ -39,6 +39,7 @@ const AiAssistantManegementModal = dynamic(
   () => import('~/features/openai/client/components/AiAssistant/AiAssistantManegementModal')
     .then(mod => mod.AiAssistantManegementModal), { ssr: false },
 );
+const PageSelectModal = dynamic(() => import('~/client/components/PageSelectModal/PageSelectModal').then(mod => mod.PageSelectModal), { ssr: false });
 
 type Props = {
   children?: ReactNode
@@ -70,6 +71,7 @@ export const BasicLayout = ({ children, className }: Props): JSX.Element => {
       <DeleteAttachmentModal />
       <DeleteBookmarkFolderModal />
       <PutbackPageModal />
+      <PageSelectModal />
       <SearchModal />
       <AiChatModal />
       <AiAssistantManegementModal />

apps/app/src/features/openai/client/components/AiAssistant/AiAssistantManegementModal.tsx

@@ -1,11 +1,10 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 
 import { useTranslation } from 'react-i18next';
 import {
   Modal, ModalHeader, ModalBody, ModalFooter, Form, FormGroup, Label, Input,
 } from 'reactstrap';
 
-import { PageSelectModal } from '~/client/components/PageSelectModal/PageSelectModal';
 import { usePageSelectModal } from '~/stores/modal';
 
 import { useAiAssistantManegementModal } from '../../stores/ai-assistant';
@@ -16,9 +15,11 @@ const moduleClass = styles['grw-ai-assistant-manegement'] ?? '';
 
 
 const AiAssistantManegementModalSubstance = (): JSX.Element => {
-  const { data: pageSelectModalData, open: openPageSelectModal } = usePageSelectModal();
+  const { open: openPageSelectModal } = usePageSelectModal();
 
-  const isPageSelectModalOpened = pageSelectModalData?.isOpened ?? false;
+  const onClickOpenPageSelectModalButton = useCallback(() => {
+    openPageSelectModal();
+  }, [openPageSelectModal]);
 
   return (
     <div className="px-4">
@@ -72,7 +73,7 @@ const AiAssistantManegementModalSubstance = (): JSX.Element => {
             <button
               type="button"
               className="btn btn-outline-primary d-flex align-items-center gap-1"
-              onClick={openPageSelectModal}
+              onClick={onClickOpenPageSelectModalButton}
             >
               <span>+</span>
               追加する
@@ -98,10 +99,6 @@ const AiAssistantManegementModalSubstance = (): JSX.Element => {
         <button type="button" className="btn btn-outline-secondary" onClick={() => {}}>キャンセル</button>
         <button type="button" className="btn btn-primary" onClick={() => {}}>作成</button>
       </ModalFooter>
-
-      { isPageSelectModalOpened && (
-        <PageSelectModal />
-      )}
     </div>
   );
 };