optimize PageDuplicateModal

packages/app/src/components/PageDuplicateModal.tsx

@@ -75,10 +75,10 @@ const PageDuplicateModal = (): JSX.Element => {
   }, [checkExistPaths]);
 
   useEffect(() => {
-    if (page != null && pageNameInput !== page.path) {
+    if (isOpened && page != null && pageNameInput !== page.path) {
       checkExistPathsDebounce(page.path, pageNameInput);
     }
-  }, [pageNameInput, subordinatedPages, checkExistPathsDebounce, page]);
+  }, [isOpened, pageNameInput, subordinatedPages, checkExistPathsDebounce, page]);
 
   /**
    * change pageNameInput for PagePathAutoComplete
@@ -150,22 +150,15 @@ const PageDuplicateModal = (): JSX.Element => {
 
   }, [isOpened]);
 
-  if (page == null) {
-    return <></>;
-  }
-
-
-  const { path } = page;
-  const isTargetPageDuplicate = existingPaths.includes(pageNameInput);
-
-  const submitButtonEnabled = existingPaths.length === 0
-  || (isDuplicateRecursively && isDuplicateRecursivelyWithoutExistPath);
 
   const bodyContent = () => {
-    if (!isOpened) {
+    if (!isOpened || page == null) {
       return <></>;
     }
 
+    const { path } = page;
+    const isTargetPageDuplicate = existingPaths.includes(pageNameInput);
+
     return (
       <>
         <div className="form-group"><label>{t('modal_duplicate.label.Current page name')}</label><br />
@@ -246,10 +239,13 @@ const PageDuplicateModal = (): JSX.Element => {
   };
 
   const footerContent = () => {
-    if (!isOpened) {
+    if (!isOpened || page == null) {
       return <></>;
     }
 
+    const submitButtonEnabled = existingPaths.length === 0
+    || (isDuplicateRecursively && isDuplicateRecursivelyWithoutExistPath);
+
     return (
       <>
         <ApiErrorMessageList errs={errs} targetPath={pageNameInput} />