recalculate

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

@@ -1,4 +1,6 @@
-import { useMemo, useRef } from 'react';
+import {
+  useCallback, useEffect, useRef, useState,
+} from 'react';
 
 import { useSWRxCurrentPage } from '~/stores/page';
 import { usePageControlsX } from '~/stores/ui';
@@ -11,19 +13,28 @@ import styles from './PageHeader.module.scss';
 const moduleClass = styles['page-header'] ?? '';
 
 export const PageHeader = (): JSX.Element => {
+
   const { data: currentPage } = useSWRxCurrentPage();
   const { data: pageControlsX } = usePageControlsX();
   const pageHeaderRef = useRef<HTMLDivElement>(null);
 
-  const maxWidth = useMemo(() => {
+  const [maxWidth, setMaxWidth] = useState<number>();
+
+  const calcMaxWidth = useCallback(() => {
     if (pageControlsX == null || pageHeaderRef.current == null) {
       // Length that allows users to use PageHeader functionality.
-      return 300;
+      setMaxWidth(300);
+      return;
     }
     // At least 10px space between PageHeader and PageControls
-    return pageControlsX - pageHeaderRef.current.getBoundingClientRect().x - 10;
+    const maxWidth = pageControlsX - pageHeaderRef.current.getBoundingClientRect().x - 10;
+    setMaxWidth(maxWidth);
   }, [pageControlsX]);
 
+  useEffect(() => {
+    calcMaxWidth();
+  }, [calcMaxWidth]);
+
   if (currentPage == null) {
     return <></>;
   }
@@ -33,11 +44,13 @@ export const PageHeader = (): JSX.Element => {
       <PagePathHeader
         currentPage={currentPage}
         maxWidth={maxWidth}
+        onRenameTerminated={calcMaxWidth}
       />
       <div className="mt-0 mt-md-1">
         <PageTitleHeader
           currentPage={currentPage}
           maxWidth={maxWidth}
+          onMoveTerminated={calcMaxWidth}
         />
       </div>
     </div>

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

@@ -25,11 +25,14 @@ type Props = {
   currentPage: IPagePopulatedToShowRevision,
   className?: string,
   maxWidth?: number,
+  onRenameTerminated?: () => void,
 }
 
 export const PagePathHeader = memo((props: Props): JSX.Element => {
   const { t } = useTranslation();
-  const { currentPage, className, maxWidth } = props;
+  const {
+    currentPage, className, maxWidth, onRenameTerminated,
+  } = props;
 
   const dPagePath = new DevidedPagePath(currentPage.path, true);
   const parentPagePath = dPagePath.former;
@@ -49,7 +52,8 @@ export const PagePathHeader = memo((props: Props): JSX.Element => {
 
   const onRenameFinish = useCallback(() => {
     setRenameInputShown(false);
-  }, []);
+    onRenameTerminated?.();
+  }, [onRenameTerminated]);
 
   const onRenameFailure = useCallback(() => {
     setRenameInputShown(true);

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

@@ -1,4 +1,4 @@
-import { useState, useCallback, useEffect } from 'react';
+import { useState, useCallback } from 'react';
 
 import nodePath from 'path';
 
@@ -24,11 +24,12 @@ type Props = {
   currentPage: IPagePopulatedToShowRevision,
   className?: string,
   maxWidth?: number,
+  onMoveTerminated?: () => void,
 };
 
 export const PageTitleHeader = (props: Props): JSX.Element => {
   const { t } = useTranslation();
-  const { currentPage, maxWidth } = props;
+  const { currentPage, maxWidth, onMoveTerminated } = props;
 
   const currentPagePath = currentPage.path;
 
@@ -52,7 +53,8 @@ export const PageTitleHeader = (props: Props): JSX.Element => {
 
   const onRenameFinish = useCallback(() => {
     setRenameInputShown(false);
-  }, []);
+    onMoveTerminated?.();
+  }, [onMoveTerminated]);
 
   const onRenameFailure = useCallback(() => {
     setRenameInputShown(true);