Merge pull request #8775 from weseek/imprv/recalculate-max-width

imprv: Re-calculate max-width for page tile on editor

apps/app/src/components/PageControls/PageControls.tsx

@@ -139,7 +139,7 @@ const PageControlsSubstance = (props: PageControlsSubstanceProps): JSX.Element =
   const likerIds = isIPageInfoForEntity(pageInfo) ? (pageInfo.likerIds ?? []).slice(0, 15) : [];
   const seenUserIds = isIPageInfoForEntity(pageInfo) ? (pageInfo.seenUserIds ?? []).slice(0, 15) : [];
 
-  const { mutateAndSave: mutatePageControlsX } = usePageControlsX();
+  const { mutate: mutatePageControlsX } = usePageControlsX();
 
   const pageControlsRef = useRef<HTMLDivElement>(null);
   const [pageControlsRect] = useRect(pageControlsRef);

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);

apps/app/src/interfaces/user-ui-settings.ts

@@ -2,7 +2,6 @@ import type { SidebarContentsType } from './ui';
 
 export interface IUserUISettings {
   currentSidebarContents: SidebarContentsType,
-  currentPageControlsX: number,
   currentProductNavWidth: number,
   preferCollapsedModeByUser: boolean,
 }

apps/app/src/server/models/user-ui-settings.ts

@@ -23,9 +23,6 @@ const schema = new Schema<UserUISettingsDocument, UserUISettingsModel>({
     enum: SidebarContentsType,
     default: SidebarContentsType.RECENT,
   },
-  currentPageControlsX: {
-    type: Number,
-  },
   currentProductNavWidth: { type: Number },
   preferCollapsedModeByUser: { type: Boolean, default: false },
 });

apps/app/src/stores/ui.tsx

@@ -272,19 +272,8 @@ export const useCurrentSidebarContents = (
   return withUtils(swrResponse, { mutateAndSave });
 };
 
-export const usePageControlsX = (
-    initialData?: number,
-): SWRResponseWithUtils<MutateAndSaveUserUISettingsUtils<number>, number> => {
-  const swrResponse = useSWRStatic('pageControlsX', initialData, { fallbackData: 1000 });
-
-  const { mutate } = swrResponse;
-
-  const mutateAndSave: MutateAndSaveUserUISettings<number> = useCallback((data, opt?) => {
-    scheduleToPut({ currentPageControlsX: data });
-    return mutate(data, opt);
-  }, [mutate]);
-
-  return withUtils(swrResponse, { mutateAndSave });
+export const usePageControlsX = (initialData?: number): SWRResponse<number> => {
+  return useSWRStatic('pageControlsX', initialData);
 };
 
 export const useCurrentProductNavWidth = (initialData?: number): SWRResponseWithUtils<MutateAndSaveUserUISettingsUtils<number>, number> => {