refactoring of pagePathRenameHandler

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

@@ -3,7 +3,6 @@ import {
 } from 'react';
 
 import type { IPagePopulatedToShowRevision } from '@growi/core';
-import { useTranslation } from 'next-i18next';
 
 import { usePageSelectModal } from '~/stores/modal';
 import { EditorMode, useEditorMode } from '~/stores/ui';
@@ -26,8 +25,6 @@ export const PagePathHeader: FC<Props> = (props) => {
   const [isButtonsShown, setButtonShown] = useState(false);
   const [inputText, setInputText] = useState('');
 
-  const { t } = useTranslation();
-
   const { data: editorMode } = useEditorMode();
   const { data: PageSelectModalData, open: openPageSelectModal } = usePageSelectModal();
 
@@ -39,7 +36,7 @@ export const PagePathHeader: FC<Props> = (props) => {
     setRenameInputShown(true);
   };
 
-  const pagePathSubmitHandler = usePagePathRenameHandler(currentPage, currentPagePath, onRenameFinish, onRenameFailure);
+  const pagePathSubmitHandler = usePagePathRenameHandler(currentPage, onRenameFinish, onRenameFailure);
 
   const stateHandler = { isRenameInputShown, setRenameInputShown };
 
@@ -103,7 +100,6 @@ export const PagePathHeader: FC<Props> = (props) => {
             onMouseEnter={() => setButtonShown(true)}
           >
             <TextInputForPageTitleAndPath
-              currentPagePath={currentPagePath}
               currentPage={currentPage}
               stateHandler={stateHandler}
               inputValue={currentPagePath}

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

@@ -25,7 +25,6 @@ export const PageTitleHeader: FC<Props> = (props) => {
   return (
     <div onBlur={() => setRenameInputShown(false)}>
       <TextInputForPageTitleAndPath
-        currentPagePath={currentPagePath}
         currentPage={currentPage}
         stateHandler={stateHandler}
         inputValue={pageName}

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

@@ -1,22 +1,26 @@
-import { FC } from 'react';
+import { FC, useCallback } from 'react';
 import type { Dispatch, SetStateAction } from 'react';
 
+import nodePath from 'path';
+
 import type { IPagePopulatedToShowRevision } from '@growi/core';
+import { pathUtils } from '@growi/core/dist/utils';
 import { useTranslation } from 'next-i18next';
 
 import { ValidationTarget } from '~/client/util/input-validator';
 
 import ClosableTextInput from '../Common/ClosableTextInput';
 
+
 import { usePagePathRenameHandler } from './page-header-utils';
 
+
 type StateHandler = {
   isRenameInputShown: boolean
   setRenameInputShown: Dispatch<SetStateAction<boolean>>
 }
 
 type Props = {
-  currentPagePath: string
   currentPage: IPagePopulatedToShowRevision
   stateHandler: StateHandler
   inputValue: string
@@ -26,7 +30,7 @@ type Props = {
 
 export const TextInputForPageTitleAndPath: FC<Props> = (props) => {
   const {
-    currentPagePath, currentPage, stateHandler, inputValue, CustomComponent, handleInputChange,
+    currentPage, stateHandler, inputValue, CustomComponent, handleInputChange,
   } = props;
 
   const { t } = useTranslation();
@@ -41,7 +45,16 @@ export const TextInputForPageTitleAndPath: FC<Props> = (props) => {
     setRenameInputShown(true);
   };
 
-  const pagePathSubmitHandler = usePagePathRenameHandler(currentPage, currentPagePath, onRenameFinish, onRenameFailure);
+  const pagePathSubmitHandler = usePagePathRenameHandler(currentPage, onRenameFinish, onRenameFailure);
+
+  const onPressEnter = useCallback((inputPagePath: string) => {
+
+    const parentPath = pathUtils.addTrailingSlash(nodePath.dirname(currentPage.path ?? ''));
+    const newPagePath = nodePath.resolve(parentPath, inputPagePath);
+
+    pagePathSubmitHandler(newPagePath);
+
+  }, [currentPage.path, pagePathSubmitHandler]);
 
   return (
     <>
@@ -50,7 +63,7 @@ export const TextInputForPageTitleAndPath: FC<Props> = (props) => {
           <ClosableTextInput
             value={inputValue}
             placeholder={t('Input page name')}
-            onPressEnter={pagePathSubmitHandler}
+            onPressEnter={onPressEnter}
             validationTarget={ValidationTarget.PAGE}
             handleInputChange={handleInputChange}
           />

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

@@ -1,7 +1,4 @@
-import nodePath from 'path';
-
 import type { IPagePopulatedToShowRevision } from '@growi/core';
-import { pathUtils } from '@growi/core/dist/utils';
 import { useTranslation } from 'next-i18next';
 
 import { apiv3Put } from '~/client/util/apiv3-client';
@@ -11,12 +8,14 @@ import { mutatePageTree, mutatePageList } from '~/stores/page-listing';
 import { mutateSearching } from '~/stores/search';
 
 export const usePagePathRenameHandler = (
-    currentPage: IPagePopulatedToShowRevision, currentPagePath: string, onRenameFinish?: () => void, onRenameFailure?: () => void,
-): (inputText: string) => Promise<void> => {
+    currentPage: IPagePopulatedToShowRevision, onRenameFinish?: () => void, onRenameFailure?: () => void,
+): (newPagePath: string) => Promise<void> => {
 
   const { trigger: mutateCurrentPage } = useSWRMUTxCurrentPage();
   const { t } = useTranslation();
 
+  const currentPagePath = currentPage.path;
+
   const onRenamed = (fromPath: string | undefined, toPath: string) => {
     mutatePageTree();
     mutateSearching();
@@ -27,12 +26,9 @@ export const usePagePathRenameHandler = (
     }
   };
 
-  const pagePathRenameHandler = async(inputText: string) => {
-
-    const parentPath = pathUtils.addTrailingSlash(nodePath.dirname(currentPage.path ?? ''));
-    const newPagePath = nodePath.resolve(parentPath, inputText);
+  const pagePathRenameHandler = async(newPagePath: string) => {
 
-    if (newPagePath === currentPage.path || inputText === '') {
+    if (newPagePath === currentPage.path || newPagePath === '') {
       onRenameFinish?.();
       return;
     }