refactor

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

@@ -13,22 +13,22 @@ import { PageTitleHeader } from './PageTitleHeader';
 
 export const PageHeader: FC = () => {
   const { data: currentPage } = useSWRxCurrentPage();
-  const currentPagePath = currentPage?.path;
+  // const currentPagePath = currentPage?.path;
 
-  const [editedPagePath, setEditedPagePath] = useState(currentPagePath ?? '');
+  // const [editedPagePath, setEditedPagePath] = useState(currentPagePath ?? '');
 
-  const editedPageTitle = nodePath.basename(editedPagePath);
+  // const editedPageTitle = nodePath.basename(editedPagePath);
 
-  const onInputChangeForPagePath = useCallback((inputText: string) => {
-    const parentPath = pathUtils.addTrailingSlash(nodePath.dirname(currentPage?.path ?? ''));
-    const newPagePath = nodePath.resolve(parentPath, inputText);
+  // const onInputChangeForPagePath = useCallback((inputText: string) => {
+  //   const parentPath = pathUtils.addTrailingSlash(nodePath.dirname(currentPage?.path ?? ''));
+  //   const newPagePath = nodePath.resolve(parentPath, inputText);
 
-    setEditedPagePath(newPagePath);
-  }, [currentPage?.path, setEditedPagePath]);
+  //   setEditedPagePath(newPagePath);
+  // }, [currentPage?.path, setEditedPagePath]);
 
-  const onInputChangeForPageTitle = (inputText: string) => {
-    setEditedPagePath(inputText);
-  };
+  // const onInputChangeForPageTitle = (inputText: string) => {
+  //   setEditedPagePath(inputText);
+  // };
 
   if (currentPage == null) {
     return <></>;
@@ -38,13 +38,13 @@ export const PageHeader: FC = () => {
     <>
       <PagePathHeader
         currentPage={currentPage}
-        inputValue={editedPagePath}
-        onInputChange={onInputChangeForPagePath}
+        // inputValue={editedPagePath}
+        // onInputChange={onInputChangeForPagePath}
       />
       <PageTitleHeader
         currentPage={currentPage}
-        inputValue={editedPageTitle}
-        onInputChange={onInputChangeForPageTitle}
+        // inputValue={editedPageTitle}
+        // onInputChange={onInputChangeForPageTitle}
       />
     </>
   );

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

@@ -17,8 +17,8 @@ import { usePagePathRenameHandler } from './page-header-utils';
 
 export type Props = {
   currentPage: IPagePopulatedToShowRevision
-  inputValue: string
-  onInputChange?: (inputText: string) => void
+  // inputValue: string
+  // onInputChange?: (inputText: string) => void
 }
 
 export const PagePathHeader: FC<Props> = (props) => {
@@ -28,10 +28,12 @@ export const PagePathHeader: FC<Props> = (props) => {
 
   const [isRenameInputShown, setRenameInputShown] = useState(false);
   const [isButtonsShown, setButtonShown] = useState(false);
+  const [editedPagePath, setEditedPagePath] = useState(currentPagePath);
 
   const { data: editorMode } = useEditorMode();
   const { data: PageSelectModalData, open: openPageSelectModal } = usePageSelectModal();
 
+
   const onRenameFinish = () => {
     setRenameInputShown(false);
   };
@@ -40,7 +42,16 @@ export const PagePathHeader: FC<Props> = (props) => {
     setRenameInputShown(true);
   };
 
-  const pagePathRenameHandler = usePagePathRenameHandler(currentPage, onRenameFinish, onRenameFailure);
+  const onInputChange = (inputText: string) => {
+    setEditedPagePath(inputText);
+  };
+
+  const onPressEscape = () => {
+    setEditedPagePath(currentPagePath);
+    setRenameInputShown(false);
+  };
+
+  const pagePathRenameHandler = usePagePathRenameHandler(currentPage);
 
   const stateHandler = { isRenameInputShown, setRenameInputShown };
 
@@ -59,12 +70,14 @@ export const PagePathHeader: FC<Props> = (props) => {
 
   const onClickEditButton = useCallback(() => {
     if (isRenameInputShown) {
-      pagePathRenameHandler(props.inputValue);
+      pagePathRenameHandler(editedPagePath, onRenameFinish, onRenameFailure);
     }
     else {
+      console.log(currentPagePath);
+      setEditedPagePath(currentPagePath);
       setRenameInputShown(true);
     }
-  }, [isRenameInputShown, pagePathRenameHandler, props.inputValue]);
+  }, [currentPagePath, editedPagePath, isRenameInputShown, pagePathRenameHandler]);
 
   const buttonStyle = isButtonsShown ? '' : 'd-none';
 
@@ -97,9 +110,10 @@ export const PagePathHeader: FC<Props> = (props) => {
           <TextInputForPageTitleAndPath
             currentPage={currentPage}
             stateHandler={stateHandler}
-            inputValue={props.inputValue}
+            inputValue={editedPagePath}
             CustomComponent={PagePath}
-            onInputChange={props.onInputChange}
+            onInputChange={onInputChange}
+            onPressEscape={onPressEscape}
           />
         </div>
         <div className={`${buttonStyle} col-4 row`}>

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

@@ -18,6 +18,9 @@ export const PageTitleHeader: FC<Props> = (props) => {
   const pageTitle = nodePath.basename(currentPagePath) || '/';
 
   const [isRenameInputShown, setRenameInputShown] = useState(false);
+  const [editedPagePath, setEditedPagePath] = useState(currentPagePath);
+
+  const editedPageTitle = nodePath.basename(editedPagePath);
 
   const onRenameFinish = () => {
     setRenameInputShown(false);
@@ -27,16 +30,34 @@ export const PageTitleHeader: FC<Props> = (props) => {
     setRenameInputShown(true);
   };
 
-  const pagePathRenameHandler = usePagePathRenameHandler(currentPage, onRenameFinish, onRenameFailure);
+  const onInputChange = useCallback((inputText: string) => {
+    const parentPath = pathUtils.addTrailingSlash(nodePath.dirname(currentPage?.path ?? ''));
+    const newPagePath = nodePath.resolve(parentPath, inputText);
+
+    setEditedPagePath(newPagePath);
+  }, [currentPage?.path, setEditedPagePath]);
+
+  const onPressEscape = () => {
+    setEditedPagePath(currentPagePath);
+    setRenameInputShown(false);
+  };
+
+  const onClickPageTitle = () => {
+    console.log(currentPagePath);
+    setEditedPagePath(currentPagePath);
+    setRenameInputShown(true);
+  };
+
+  const pagePathRenameHandler = usePagePathRenameHandler(currentPage);
 
   const stateHandler = { isRenameInputShown, setRenameInputShown };
 
-  const PageTitle = useMemo(() => (<div onClick={() => setRenameInputShown(true)}>{pageTitle}</div>), [pageTitle]);
+  const PageTitle = useMemo(() => (<div onClick={onClickPageTitle}>{pageTitle}</div>), [pageTitle]);
 
   const buttonStyle = isRenameInputShown ? '' : 'd-none';
 
   const onClickButton = () => {
-    pagePathRenameHandler(props.inputValue);
+    pagePathRenameHandler(editedPagePath, onRenameFinish, onRenameFailure);
   };
 
   return (
@@ -45,9 +66,10 @@ export const PageTitleHeader: FC<Props> = (props) => {
         <TextInputForPageTitleAndPath
           currentPage={currentPage}
           stateHandler={stateHandler}
-          inputValue={props.inputValue}
+          inputValue={editedPageTitle}
           CustomComponent={PageTitle}
-          onInputChange={props.onInputChange}
+          onInputChange={onInputChange}
+          onPressEscape={onPressEscape}
         />
       </div>
       <div className={`col-4 ${buttonStyle}`}>

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

@@ -35,6 +35,9 @@ export const usePagePathRenameHandler = (
       return;
     }
 
+    console.log(newPagePath);
+    console.log(currentPagePath);
+
     try {
       await apiv3Put('/pages/rename', {
         pageId: currentPage._id,