refactor

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

@@ -1,19 +1,34 @@
-import { useState } from 'react';
+import { useState, useCallback } from 'react';
 import type { FC } from 'react';
 
+import nodePath from 'path';
+
+import { pathUtils } from '@growi/core/dist/utils';
+
 import { useSWRxCurrentPage } from '~/stores/page';
 
 import { PagePathHeader } from './PagePathHeader';
 import { PageTitleHeader } from './PageTitleHeader';
 
+
 export const PageHeader: FC = () => {
   const { data: currentPage } = useSWRxCurrentPage();
   const currentPagePath = currentPage?.path;
 
-
   const [editedPagePath, setEditedPagePath] = useState(currentPagePath ?? '');
 
-  const editedPagePathState = { editedPagePath, setEditedPagePath };
+  const editedPageTitle = nodePath.basename(editedPagePath);
+
+  const onInputChangeForPagePath = useCallback((inputText: string) => {
+    const parentPath = pathUtils.addTrailingSlash(nodePath.dirname(currentPage?.path ?? ''));
+    const newPagePath = nodePath.resolve(parentPath, inputText);
+
+    setEditedPagePath(newPagePath);
+  }, [currentPage?.path, setEditedPagePath]);
+
+  const onInputChangeForPageTitle = (inputText: string) => {
+    setEditedPagePath(inputText);
+  };
 
   if (currentPage == null) {
     return <></>;
@@ -23,11 +38,13 @@ export const PageHeader: FC = () => {
     <>
       <PagePathHeader
         currentPage={currentPage}
-        editedPagePathState={editedPagePathState}
+        inputValue={editedPagePath}
+        onInputChange={onInputChangeForPagePath}
       />
       <PageTitleHeader
         currentPage={currentPage}
-        editedPagePathState={editedPagePathState}
+        inputValue={editedPageTitle}
+        onInputChange={onInputChangeForPageTitle}
       />
     </>
   );

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

@@ -11,18 +11,18 @@ import { EditorMode, useEditorMode } from '~/stores/ui';
 import { PagePathNav } from '../Common/PagePathNav';
 import { PageSelectModal } from '../PageSelectModal/PageSelectModal';
 
-import type { editedPagePathState } from './TextInputForPageTitleAndPath';
 import { TextInputForPageTitleAndPath } from './TextInputForPageTitleAndPath';
 import { usePagePathRenameHandler } from './page-header-utils';
 
 
 export type Props = {
   currentPage: IPagePopulatedToShowRevision
-  editedPagePathState: editedPagePathState
+  inputValue: string
+  onInputChange?: (inputText: string) => void
 }
 
 export const PagePathHeader: FC<Props> = (props) => {
-  const { currentPage, editedPagePathState } = props;
+  const { currentPage } = props;
 
   const currentPagePath = currentPage.path;
 
@@ -32,8 +32,6 @@ export const PagePathHeader: FC<Props> = (props) => {
   const { data: editorMode } = useEditorMode();
   const { data: PageSelectModalData, open: openPageSelectModal } = usePageSelectModal();
 
-  const { editedPagePath, setEditedPagePath } = editedPagePathState;
-
   const onRenameFinish = () => {
     setRenameInputShown(false);
   };
@@ -59,18 +57,14 @@ export const PagePathHeader: FC<Props> = (props) => {
     />
   ), [currentPage._id, currentPagePath, isEditorMode]);
 
-  const handleInputChange = (inputText: string) => {
-    setEditedPagePath(inputText);
-  };
-
-  const handleEditButtonClick = useCallback(() => {
+  const onClickEditButton = useCallback(() => {
     if (isRenameInputShown) {
-      pagePathRenameHandler(editedPagePath);
+      pagePathRenameHandler(props.inputValue);
     }
     else {
       setRenameInputShown(true);
     }
-  }, [editedPagePath, isRenameInputShown, pagePathRenameHandler]);
+  }, [isRenameInputShown, pagePathRenameHandler, props.inputValue]);
 
   const buttonStyle = isButtonsShown ? '' : 'd-none';
 
@@ -103,15 +97,14 @@ export const PagePathHeader: FC<Props> = (props) => {
           <TextInputForPageTitleAndPath
             currentPage={currentPage}
             stateHandler={stateHandler}
-            editedPagePathState={editedPagePathState}
-            inputValue={editedPagePath}
+            inputValue={props.inputValue}
             CustomComponent={PagePath}
-            handleInputChange={handleInputChange}
+            onInputChange={props.onInputChange}
           />
         </div>
         <div className={`${buttonStyle} col-4 row`}>
           <div className="col-4">
-            <button type="button" onClick={handleEditButtonClick}>
+            <button type="button" onClick={onClickEditButton}>
               {isRenameInputShown ? <span className="material-symbols-outlined">check_circle</span> : <span className="material-symbols-outlined">edit</span>}
             </button>
           </div>

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

@@ -11,7 +11,7 @@ import { usePagePathRenameHandler } from './page-header-utils';
 
 
 export const PageTitleHeader: FC<Props> = (props) => {
-  const { currentPage, editedPagePathState } = props;
+  const { currentPage } = props;
 
   const currentPagePath = currentPage.path;
 
@@ -19,10 +19,6 @@ export const PageTitleHeader: FC<Props> = (props) => {
 
   const [isRenameInputShown, setRenameInputShown] = useState(false);
 
-  const { editedPagePath, setEditedPagePath } = editedPagePathState;
-
-  const editingPageTitle = nodePath.basename(editedPagePath);
-
   const onRenameFinish = () => {
     setRenameInputShown(false);
   };
@@ -37,17 +33,10 @@ export const PageTitleHeader: FC<Props> = (props) => {
 
   const PageTitle = useMemo(() => (<div onClick={() => setRenameInputShown(true)}>{pageTitle}</div>), [pageTitle]);
 
-  const handleInputChange = useCallback((inputText: string) => {
-    const parentPath = pathUtils.addTrailingSlash(nodePath.dirname(currentPage.path ?? ''));
-    const newPagePath = nodePath.resolve(parentPath, inputText);
-
-    setEditedPagePath(newPagePath);
-  }, [currentPage.path, setEditedPagePath]);
-
   const buttonStyle = isRenameInputShown ? '' : 'd-none';
 
-  const handleButtonClick = () => {
-    pagePathRenameHandler(editedPagePath);
+  const onClickButton = () => {
+    pagePathRenameHandler(props.inputValue);
   };
 
   return (
@@ -56,14 +45,13 @@ export const PageTitleHeader: FC<Props> = (props) => {
         <TextInputForPageTitleAndPath
           currentPage={currentPage}
           stateHandler={stateHandler}
-          editedPagePathState={editedPagePathState}
-          inputValue={editingPageTitle}
+          inputValue={props.inputValue}
           CustomComponent={PageTitle}
-          handleInputChange={handleInputChange}
+          onInputChange={props.onInputChange}
         />
       </div>
       <div className={`col-4 ${buttonStyle}`}>
-        <button type="button" onClick={handleButtonClick}>
+        <button type="button" onClick={onClickButton}>
           <span className="material-symbols-outlined">check_circle</span>
         </button>
       </div>

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

@@ -26,21 +26,20 @@ type StateHandler = {
 type Props = {
   currentPage: IPagePopulatedToShowRevision
   stateHandler: StateHandler
-  editedPagePathState: editedPagePathState
   inputValue: string
   CustomComponent: JSX.Element
-  handleInputChange?: (string) => void
+  onInputChange?: (string) => void
+  onPressEscape?: () => void
 }
 
 export const TextInputForPageTitleAndPath: FC<Props> = (props) => {
   const {
-    currentPage, stateHandler, inputValue, CustomComponent, handleInputChange, editedPagePathState,
+    currentPage, stateHandler, inputValue, CustomComponent, onInputChange,
   } = props;
 
   const { t } = useTranslation();
 
   const { isRenameInputShown, setRenameInputShown } = stateHandler;
-  const { setEditedPagePath } = editedPagePathState;
 
 
   const pagePathRenameHandler = usePagePathRenameHandler(currentPage);
@@ -62,10 +61,10 @@ export const TextInputForPageTitleAndPath: FC<Props> = (props) => {
 
   }, [currentPage.path, pagePathRenameHandler, setRenameInputShown]);
 
-  const onPressEscape = useCallback(() => {
-    setEditedPagePath(currentPage.path);
-    setRenameInputShown(false);
-  }, [currentPage.path, setEditedPagePath, setRenameInputShown]);
+  // const onPressEscape = useCallback(() => {
+  //   setEditedPagePath(currentPage.path);
+  //   setRenameInputShown(false);
+  // }, [currentPage.path, setEditedPagePath, setRenameInputShown]);
 
   return (
     <>
@@ -75,9 +74,9 @@ export const TextInputForPageTitleAndPath: FC<Props> = (props) => {
             value={inputValue}
             placeholder={t('Input page name')}
             onPressEnter={onPressEnter}
-            onPressEscape={onPressEscape}
+            onPressEscape={props.onPressEscape}
             validationTarget={ValidationTarget.PAGE}
-            handleInputChange={handleInputChange}
+            handleInputChange={onInputChange}
           />
         </div>
       ) : (