synchronize PagePathHeader and PageTitleHeader

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

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { type FC, useState } from 'react';
 
 import { useCurrentPagePath, useSWRxCurrentPage } from '~/stores/page';
 
@@ -9,6 +9,10 @@ export const PageHeader: FC = () => {
   const { data: currentPagePath } = useCurrentPagePath();
   const { data: currentPage } = useSWRxCurrentPage();
 
+  const [editingPagePath, setEditingPagePath] = useState(currentPagePath ?? '');
+
+  const editingPagePathHandler = { editingPagePath, setEditingPagePath };
+
   if (currentPage == null || currentPagePath == null) {
     return <></>;
   }
@@ -18,10 +22,12 @@ export const PageHeader: FC = () => {
       <PagePathHeader
         currentPagePath={currentPagePath}
         currentPage={currentPage}
+        editingPagePathHandler={editingPagePathHandler}
       />
       <PageTitleHeader
         currentPagePath={currentPagePath}
         currentPage={currentPage}
+        editingPagePathHandler={editingPagePathHandler}
       />
     </>
   );

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

@@ -1,7 +1,10 @@
-import type { FC } from 'react';
+import type { FC, Dispatch, SetStateAction } from 'react';
 import { useEffect, useMemo, useState } from 'react';
 
+import nodePath from 'path';
+
 import type { IPagePopulatedToShowRevision } from '@growi/core';
+import { pathUtils } from '@growi/core/dist/utils';
 
 import { usePageSelectModal } from '~/stores/modal';
 import { EditorMode, useEditorMode } from '~/stores/ui';
@@ -12,9 +15,15 @@ import { PageSelectModal } from '../PageSelectModal/PageSelectModal';
 import { TextInputForPageTitleAndPath } from './TextInputForPageTitleAndPath';
 import { usePagePathRenameHandler } from './page-header-utils';
 
-type Props = {
+type editingPagePathHandler = {
+  editingPagePath: string
+  setEditingPagePath: Dispatch<SetStateAction<string>>
+}
+
+export type Props = {
   currentPagePath: string
   currentPage: IPagePopulatedToShowRevision
+  editingPagePathHandler: editingPagePathHandler
 }
 
 export const PagePathHeader: FC<Props> = (props) => {
@@ -22,11 +31,12 @@ export const PagePathHeader: FC<Props> = (props) => {
 
   const [isRenameInputShown, setRenameInputShown] = useState(false);
   const [isButtonsShown, setButtonShown] = useState(false);
-  const [inputText, setInputText] = useState(currentPagePath);
 
   const { data: editorMode } = useEditorMode();
   const { data: PageSelectModalData, open: openPageSelectModal } = usePageSelectModal();
 
+  const { editingPagePath, setEditingPagePath } = props.editingPagePathHandler;
+
   const onRenameFinish = () => {
     setRenameInputShown(false);
   };
@@ -57,12 +67,12 @@ export const PagePathHeader: FC<Props> = (props) => {
   ), [currentPage._id, currentPagePath, isEditorMode]);
 
   const handleInputChange = (inputText: string) => {
-    setInputText(inputText);
+    setEditingPagePath(inputText);
   };
 
   const handleEditButtonClick = () => {
     if (isRenameInputShown) {
-      pagePathRenameHandler(inputText, onRenameFinish, onRenameFailure);
+      pagePathRenameHandler(editingPagePath);
     }
     else {
       setRenameInputShown(true);
@@ -101,7 +111,7 @@ export const PagePathHeader: FC<Props> = (props) => {
             <TextInputForPageTitleAndPath
               currentPage={currentPage}
               stateHandler={stateHandler}
-              inputValue={inputText}
+              inputValue={editingPagePath}
               CustomComponent={PagePath}
               handleInputChange={handleInputChange}
             />

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

@@ -6,21 +6,20 @@ import nodePath from 'path';
 import type { IPagePopulatedToShowRevision } from '@growi/core';
 import { pathUtils } from '@growi/core/dist/utils';
 
+import type { Props } from './PagePathHeader';
 import { TextInputForPageTitleAndPath } from './TextInputForPageTitleAndPath';
 import { usePagePathRenameHandler } from './page-header-utils';
 
-type Props = {
-  currentPagePath: string,
-  currentPage: IPagePopulatedToShowRevision;
-}
-
 
 export const PageTitleHeader: FC<Props> = (props) => {
   const { currentPagePath, currentPage } = props;
-  const pageName = nodePath.basename(currentPagePath ?? '') || '/';
+  const pageTitle = nodePath.basename(currentPagePath ?? '') || '/';
 
   const [isRenameInputShown, setRenameInputShown] = useState(false);
-  const [inputText, setInputText] = useState(pageName);
+
+  const { editingPagePath, setEditingPagePath } = props.editingPagePathHandler;
+
+  const editingPageTitle = nodePath.basename(editingPagePath);
 
   const onRenameFinish = () => {
     setRenameInputShown(false);
@@ -34,23 +33,23 @@ export const PageTitleHeader: FC<Props> = (props) => {
 
   const stateHandler = { isRenameInputShown, setRenameInputShown };
 
-  const PageTitle = useMemo(() => (<div onClick={() => setRenameInputShown(true)}>{pageName}</div>), [pageName]);
+  const PageTitle = useMemo(() => (<div onClick={() => setRenameInputShown(true)}>{pageTitle}</div>), [pageTitle]);
 
   const handleInputChange = (inputText: string) => {
-    setInputText(inputText);
+    const parentPath = pathUtils.addTrailingSlash(nodePath.dirname(currentPage.path ?? ''));
+    const newPagePath = nodePath.resolve(parentPath, inputText);
+
+    setEditingPagePath(newPagePath);
   };
 
   const onBlurHandler = () => {
-    pagePathRenameHandler(inputText);
+    pagePathRenameHandler(editingPagePath);
   };
 
   const buttonStyle = isRenameInputShown ? '' : 'd-none';
 
   const handleButtonClick = () => {
-    const parentPath = pathUtils.addTrailingSlash(nodePath.dirname(currentPage.path ?? ''));
-    const newPagePath = nodePath.resolve(parentPath, inputText);
-
-    pagePathRenameHandler(newPagePath);
+    pagePathRenameHandler(editingPagePath);
   };
 
   return (
@@ -62,7 +61,7 @@ export const PageTitleHeader: FC<Props> = (props) => {
         <TextInputForPageTitleAndPath
           currentPage={currentPage}
           stateHandler={stateHandler}
-          inputValue={inputText}
+          inputValue={editingPageTitle}
           CustomComponent={PageTitle}
           handleInputChange={handleInputChange}
         />