BugFix

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

@@ -2,6 +2,8 @@ import { useState, useEffect, useCallback } from 'react';
 import type { FC } from 'react';
 
 import type { IPagePopulatedToShowRevision } from '@growi/core';
+import { DevidedPagePath } from '@growi/core/dist/models';
+import { normalizePath } from '@growi/core/dist/utils/path-utils';
 import { useTranslation } from 'next-i18next';
 
 import { ValidationTarget } from '~/client/util/input-validator';
@@ -27,12 +29,14 @@ export const PagePathHeader: FC<Props> = (props) => {
   const { t } = useTranslation();
   const { currentPage } = props;
 
-  const currentPagePath = currentPage.path;
-  const linkedPagePath = new LinkedPagePath(currentPagePath);
+  const dPagePath = new DevidedPagePath(currentPage.path, true);
+  const parentPagePath = dPagePath.former;
+
+  const linkedPagePath = new LinkedPagePath(parentPagePath);
 
   const [isRenameInputShown, setRenameInputShown] = useState(false);
   const [isButtonsShown, setButtonShown] = useState(false);
-  const [editedPagePath, setEditedPagePath] = useState(currentPagePath);
+  const [editingParentPagePath, setEditingParentPagePath] = useState(parentPagePath);
 
   const { data: PageSelectModalData, open: openPageSelectModal } = usePageSelectModal();
   const isOpened = PageSelectModalData?.isOpened ?? false;
@@ -48,27 +52,31 @@ export const PagePathHeader: FC<Props> = (props) => {
   }, []);
 
   const onInputChange = useCallback((inputText: string) => {
-    setEditedPagePath(inputText);
+    setEditingParentPagePath(inputText);
   }, []);
 
   const onPressEnter = useCallback(() => {
-    pagePathRenameHandler(editedPagePath, onRenameFinish, onRenameFailure);
-  }, [editedPagePath, onRenameFailure, onRenameFinish, pagePathRenameHandler]);
+    const pathToRename = normalizePath(`${editingParentPagePath}/${dPagePath.latter}`);
+    pagePathRenameHandler(pathToRename, onRenameFinish, onRenameFailure);
+  }, [editingParentPagePath, onRenameFailure, onRenameFinish, pagePathRenameHandler, dPagePath.latter]);
 
   const onPressEscape = useCallback(() => {
-    setEditedPagePath(currentPagePath);
+    // reset
+    setEditingParentPagePath(parentPagePath);
     setRenameInputShown(false);
-  }, [currentPagePath]);
+  }, [parentPagePath]);
 
   const onClickEditButton = useCallback(() => {
     if (isRenameInputShown) {
-      pagePathRenameHandler(editedPagePath, onRenameFinish, onRenameFailure);
-    }
-    else {
-      setEditedPagePath(currentPagePath);
-      setRenameInputShown(true);
+      const pathToRename = normalizePath(`${editingParentPagePath}/${dPagePath.latter}`);
+      pagePathRenameHandler(pathToRename, onRenameFinish, onRenameFailure);
+      return;
     }
-  }, [currentPagePath, editedPagePath, isRenameInputShown, onRenameFailure, onRenameFinish, pagePathRenameHandler]);
+
+    // reset
+    setEditingParentPagePath(parentPagePath);
+    setRenameInputShown(true);
+  }, [isRenameInputShown, parentPagePath, editingParentPagePath, dPagePath.latter, pagePathRenameHandler, onRenameFinish, onRenameFailure]);
 
   const clickOutSideHandler = useCallback((e) => {
     const container = document.getElementById('page-path-header');
@@ -87,6 +95,10 @@ export const PagePathHeader: FC<Props> = (props) => {
   }, [clickOutSideHandler]);
 
 
+  if (dPagePath.isRoot) {
+    return <></>;
+  }
+
   return (
     <div
       id="page-path-header"
@@ -99,7 +111,7 @@ export const PagePathHeader: FC<Props> = (props) => {
           ? (
             <ClosableTextInput
               useAutosizeInput
-              value={editedPagePath}
+              value={editingParentPagePath}
               placeholder={t('Input page name')}
               onPressEnter={onPressEnter}
               onPressEscape={onPressEscape}