improve page-header-utils

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

@@ -1,6 +1,5 @@
-import {
-  FC, useEffect, useMemo, useState,
-} from 'react';
+import type { FC } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
 import type { IPagePopulatedToShowRevision } from '@growi/core';
 
@@ -36,7 +35,7 @@ export const PagePathHeader: FC<Props> = (props) => {
     setRenameInputShown(true);
   };
 
-  const pagePathRenameHandler = usePagePathRenameHandler(currentPage, onRenameFinish, onRenameFailure);
+  const pagePathRenameHandler = usePagePathRenameHandler(currentPage);
 
   const stateHandler = { isRenameInputShown, setRenameInputShown };
 
@@ -63,7 +62,7 @@ export const PagePathHeader: FC<Props> = (props) => {
 
   const handleEditButtonClick = () => {
     if (isRenameInputShown) {
-      pagePathRenameHandler(inputText);
+      pagePathRenameHandler(inputText, onRenameFinish, onRenameFailure);
     }
     else {
       setRenameInputShown(true);

apps/app/src/components/PageHeader/TextInputForPageTitleAndPath.tsx

@@ -1,5 +1,5 @@
-import { FC, useCallback } from 'react';
-import type { Dispatch, SetStateAction } from 'react';
+import { useCallback } from 'react';
+import type { Dispatch, SetStateAction, FC } from 'react';
 
 import nodePath from 'path';
 
@@ -37,24 +37,25 @@ export const TextInputForPageTitleAndPath: FC<Props> = (props) => {
 
   const { isRenameInputShown, setRenameInputShown } = stateHandler;
 
-  const onRenameFinish = () => {
-    setRenameInputShown(false);
-  };
 
-  const onRenameFailure = () => {
-    setRenameInputShown(true);
-  };
-
-  const pagePathRenameHandler = usePagePathRenameHandler(currentPage, onRenameFinish, onRenameFailure);
+  const pagePathRenameHandler = usePagePathRenameHandler(currentPage);
 
   const onPressEnter = useCallback((inputPagePath: string) => {
 
+    const onRenameFinish = () => {
+      setRenameInputShown(false);
+    };
+
+    const onRenameFailure = () => {
+      setRenameInputShown(true);
+    };
+
     const parentPath = pathUtils.addTrailingSlash(nodePath.dirname(currentPage.path ?? ''));
     const newPagePath = nodePath.resolve(parentPath, inputPagePath);
 
-    pagePathRenameHandler(newPagePath);
+    pagePathRenameHandler(newPagePath, onRenameFinish, onRenameFailure);
 
-  }, [currentPage.path, pagePathRenameHandler]);
+  }, [currentPage.path, pagePathRenameHandler, setRenameInputShown]);
 
   return (
     <>

apps/app/src/components/PageHeader/page-header-utils.ts

@@ -8,16 +8,20 @@ import { toastSuccess, toastError } from '~/client/util/toastr';
 import { useSWRMUTxCurrentPage } from '~/stores/page';
 import { mutatePageTree, mutatePageList } from '~/stores/page-listing';
 
+type PagePathRenameHandler = (newPagePath: string, onRenameFinish?: () => void, onRenameFailure?: () => void) => Promise<void>;
+
 export const usePagePathRenameHandler = (
-    currentPage?: IPagePopulatedToShowRevision | null, onRenameFinish?: () => void, onRenameFailure?: () => void,
-): (newPagePath: string) => Promise<void> => {
+    currentPage?: IPagePopulatedToShowRevision | null,
+): PagePathRenameHandler => {
 
   const { trigger: mutateCurrentPage } = useSWRMUTxCurrentPage();
   const { t } = useTranslation();
 
   const currentPagePath = currentPage?.path;
 
-  const pagePathRenameHandler = useCallback(async(newPagePath: string) => {
+  const pagePathRenameHandler = useCallback(async(
+      newPagePath: string, onRenameFinish?: () => void, onRenameFailure?: () => void,
+  ) => {
 
     const onRenamed = (fromPath: string | undefined, toPath: string) => {
       mutatePageTree();
@@ -34,7 +38,6 @@ export const usePagePathRenameHandler = (
     }
 
     try {
-      onRenameFinish?.();
       await apiv3Put('/pages/rename', {
         pageId: currentPage?._id,
         revisionId: currentPage?.revision._id,
@@ -43,13 +46,15 @@ export const usePagePathRenameHandler = (
 
       onRenamed(currentPage?.path, newPagePath);
 
+      onRenameFinish?.();
+
       toastSuccess(t('renamed_pages', { path: currentPage?.path }));
     }
     catch (err) {
       onRenameFailure?.();
       toastError(err);
     }
-  }, [currentPage?._id, currentPage?.path, currentPage?.revision._id, currentPagePath, mutateCurrentPage, onRenameFailure, onRenameFinish, t]);
+  }, [currentPage?._id, currentPage?.path, currentPage?.revision._id, currentPagePath, mutateCurrentPage, t]);
 
   return pagePathRenameHandler;
 };