Merge branch 'imprv/140068-improve-PageTitleHeader' into imprv/140074-display-parent-page-path-in-PagePathHeader

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

@@ -1,16 +1,11 @@
 import { useState } from 'react';
-import type { Dispatch, SetStateAction, FC } from 'react';
+import type { FC } from 'react';
 
 import { useSWRxCurrentPage } from '~/stores/page';
 
 import { PagePathHeader } from './PagePathHeader';
 import { PageTitleHeader } from './PageTitleHeader';
 
-export type editedPagePathHandler = {
-  editedPagePath: string
-  setEditedPagePath: Dispatch<SetStateAction<string>>
-}
-
 export const PageHeader: FC = () => {
   const { data: currentPage } = useSWRxCurrentPage();
   const currentPagePath = currentPage?.path;
@@ -18,7 +13,7 @@ export const PageHeader: FC = () => {
 
   const [editedPagePath, setEditedPagePath] = useState(currentPagePath ?? '');
 
-  const editedPagePathStateHandler = { editedPagePath, setEditedPagePath };
+  const editedPagePathState = { editedPagePath, setEditedPagePath };
 
   if (currentPage == null) {
     return <></>;
@@ -28,11 +23,11 @@ export const PageHeader: FC = () => {
     <>
       <PagePathHeader
         currentPage={currentPage}
-        editedPagePathHandler={editedPagePathStateHandler}
+        editedPagePathState={editedPagePathState}
       />
       <PageTitleHeader
         currentPage={currentPage}
-        editedPagePathHandler={editedPagePathStateHandler}
+        editedPagePathState={editedPagePathState}
       />
     </>
   );

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

@@ -1,5 +1,5 @@
-import type { FC } from 'react';
 import { useMemo, useState, useEffect } from 'react';
+import type { FC } from 'react';
 
 import nodePath from 'path';
 
@@ -12,18 +12,18 @@ import { EditorMode, useEditorMode } from '~/stores/ui';
 import { PagePathNav } from '../Common/PagePathNav';
 import { PageSelectModal } from '../PageSelectModal/PageSelectModal';
 
-import type { editedPagePathHandler } from './PageHeader';
+import type { editedPagePathState } from './TextInputForPageTitleAndPath';
 import { TextInputForPageTitleAndPath } from './TextInputForPageTitleAndPath';
 import { usePagePathRenameHandler } from './page-header-utils';
 
 
 export type Props = {
   currentPage: IPagePopulatedToShowRevision
-  editedPagePathHandler: editedPagePathHandler
+  editedPagePathState: editedPagePathState
 }
 
 export const PagePathHeader: FC<Props> = (props) => {
-  const { currentPage, editedPagePathHandler } = props;
+  const { currentPage, editedPagePathState } = props;
 
   const currentPagePath = currentPage.path;
 
@@ -33,7 +33,7 @@ export const PagePathHeader: FC<Props> = (props) => {
   const { data: editorMode } = useEditorMode();
   const { data: PageSelectModalData, open: openPageSelectModal } = usePageSelectModal();
 
-  const { editedPagePath, setEditedPagePath } = editedPagePathHandler;
+  const { editedPagePath, setEditedPagePath } = editedPagePathState;
 
   const pageTitle = nodePath.basename(currentPagePath ?? '') || '/';
   const parentPagePath = pathUtils.addHeadingSlash(nodePath.dirname(currentPage.path ?? ''));
@@ -56,15 +56,12 @@ export const PagePathHeader: FC<Props> = (props) => {
   const isEditorMode = !isViewMode;
 
   const PagePath = useMemo(() => (
-    <>
-      {currentPagePath != null && (
-        <PagePathNav
-          pagePath={parentPagePath}
-          isSingleLineMode={isEditorMode}
-        />
-      )}
-    </>
-  ), [currentPagePath, isEditorMode, parentPagePath]);
+    <PagePathNav
+      pageId={currentPage._id}
+      pagePath={currentPagePath}
+      isSingleLineMode={isEditorMode}
+    />
+  ), [currentPage._id, currentPagePath, isEditorMode]);
 
   const handleInputChange = (inputText: string) => {
     const editingParentPagePath = inputText;
@@ -112,8 +109,8 @@ export const PagePathHeader: FC<Props> = (props) => {
           <TextInputForPageTitleAndPath
             currentPage={currentPage}
             stateHandler={stateHandler}
-            editedPagePathHandler={editedPagePathHandler}
-            inputValue={parentPagePath}
+            editedPagePathState={editedPagePathState}
+            inputValue={editedPagePath}
             CustomComponent={PagePath}
             handleInputChange={handleInputChange}
           />

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

@@ -13,15 +13,15 @@ import { usePagePathRenameHandler } from './page-header-utils';
 
 
 export const PageTitleHeader: FC<Props> = (props) => {
-  const { currentPage, editedPagePathHandler } = props;
+  const { currentPage, editedPagePathState } = props;
 
   const currentPagePath = currentPage.path;
 
-  const pageTitle = nodePath.basename(currentPagePath ?? '') || '/';
+  const pageTitle = nodePath.basename(currentPagePath) || '/';
 
   const [isRenameInputShown, setRenameInputShown] = useState(false);
 
-  const { editedPagePath, setEditedPagePath } = editedPagePathHandler;
+  const { editedPagePath, setEditedPagePath } = editedPagePathState;
 
   const editingPageTitle = nodePath.basename(editedPagePath);
 
@@ -58,7 +58,7 @@ export const PageTitleHeader: FC<Props> = (props) => {
         <TextInputForPageTitleAndPath
           currentPage={currentPage}
           stateHandler={stateHandler}
-          editedPagePathHandler={editedPagePathHandler}
+          editedPagePathState={editedPagePathState}
           inputValue={editingPageTitle}
           CustomComponent={PageTitle}
           handleInputChange={handleInputChange}

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

@@ -8,10 +8,12 @@ import { ValidationTarget } from '~/client/util/input-validator';
 
 import ClosableTextInput from '../Common/ClosableTextInput';
 
-
-import type { editedPagePathHandler } from './PageHeader';
 import { usePagePathRenameHandler } from './page-header-utils';
 
+export type editedPagePathState = {
+  editedPagePath: string
+  setEditedPagePath: Dispatch<SetStateAction<string>>
+}
 
 type StateHandler = {
   isRenameInputShown: boolean
@@ -21,7 +23,7 @@ type StateHandler = {
 type Props = {
   currentPage: IPagePopulatedToShowRevision
   stateHandler: StateHandler
-  editedPagePathHandler: editedPagePathHandler
+  editedPagePathState: editedPagePathState
   inputValue: string
   CustomComponent: JSX.Element
   handleInputChange?: (string) => void
@@ -29,12 +31,13 @@ type Props = {
 
 export const TextInputForPageTitleAndPath: FC<Props> = (props) => {
   const {
-    currentPage, stateHandler, inputValue, CustomComponent, handleInputChange, editedPagePathHandler,
+    currentPage, stateHandler, inputValue, CustomComponent, handleInputChange, editedPagePathState,
   } = props;
 
   const { t } = useTranslation();
 
   const { isRenameInputShown, setRenameInputShown } = stateHandler;
+
   const { editedPagePath, setEditedPagePath } = editedPagePathHandler;
 
   const onRenameFinish = () => {