refactor PagePathNavSticky

apps/app/src/components-universal/Common/PagePathNav/PagePathNav.tsx

@@ -1,3 +1,5 @@
+import { useMemo } from 'react';
+
 import { DevidedPagePath } from '@growi/core/dist/models';
 import { pagePathUtils } from '@growi/core/dist/utils';
 
@@ -20,32 +22,42 @@ const Separator = ({ className }: {className?: string}): JSX.Element => {
 
 export const PagePathNav = (props: PagePathNavLayoutProps): JSX.Element => {
   const { pagePath } = props;
-  const dPagePath = new DevidedPagePath(pagePath, false, true);
 
   const isInTrash = isTrashPage(pagePath);
 
-  let formerLink;
-  let latterLink;
+  const formerLink = useMemo(() => {
+    const dPagePath = new DevidedPagePath(pagePath, false, true);
+
+    // one line
+    if (dPagePath.isRoot || dPagePath.isFormerRoot) {
+      return undefined;
+    }
 
-  // one line
-  if (dPagePath.isRoot || dPagePath.isFormerRoot) {
-    const linkedPagePath = new LinkedPagePath(pagePath);
-    latterLink = <PagePathHierarchicalLink linkedPagePath={linkedPagePath} isInTrash={isInTrash} />;
-  }
-  // two line
-  else {
+    // two line
     const linkedPagePathFormer = new LinkedPagePath(dPagePath.former);
-    const linkedPagePathLatter = new LinkedPagePath(dPagePath.latter);
-    formerLink = (
+    return (
       <>
         <PagePathHierarchicalLink linkedPagePath={linkedPagePathFormer} isInTrash={isInTrash} />
         <Separator />
       </>
     );
-    latterLink = (
+  }, [isInTrash, pagePath]);
+
+  const latterLink = useMemo(() => {
+    const dPagePath = new DevidedPagePath(pagePath, false, true);
+
+    // one line
+    if (dPagePath.isRoot || dPagePath.isFormerRoot) {
+      const linkedPagePath = new LinkedPagePath(pagePath);
+      return <PagePathHierarchicalLink linkedPagePath={linkedPagePath} isInTrash={isInTrash} />;
+    }
+
+    // two line
+    const linkedPagePathLatter = new LinkedPagePath(dPagePath.latter);
+    return (
       <PagePathHierarchicalLink linkedPagePath={linkedPagePathLatter} basePath={dPagePath.former} isInTrash={isInTrash} />
     );
-  }
+  }, [isInTrash, pagePath]);
 
   return (
     <PagePathNavLayout

apps/app/src/components-universal/Common/PagePathNav/PagePathNavLayout.tsx

@@ -22,7 +22,7 @@ type Props = PagePathNavLayoutProps & {
   latterLink?: ReactNode,
 }
 
-const CopyDropdown = dynamic(() => import('../../../components/Common/CopyDropdown').then(mod => mod.CopyDropdown), { ssr: false });
+const CopyDropdown = dynamic(() => import('~/components/Common/CopyDropdown').then(mod => mod.CopyDropdown), { ssr: false });
 
 export const PagePathNavLayout = (props: Props): JSX.Element => {
   const {

apps/app/src/components/PagePathNavSticky/PagePathNavSticky.tsx

@@ -16,7 +16,7 @@ import {
 
 import { PagePathHierarchicalLink } from '../../components-universal/Common/PagePathHierarchicalLink';
 import type { PagePathNavLayoutProps } from '../../components-universal/Common/PagePathNav';
-import { PagePathNavLayout, Separator } from '../../components-universal/Common/PagePathNav';
+import { PagePathNav, PagePathNavLayout, Separator } from '../../components-universal/Common/PagePathNav';
 
 import { CollapsedParentsDropdown } from './CollapsedParentsDropdown';
 
@@ -57,7 +57,6 @@ export const PagePathNavSticky = (props: PagePathNavLayoutProps): JSX.Element =>
     };
   }, [pageControlsX, pagePathNavRef, sidebarMode]);
 
-  // one line with collapsed parents
   const latterLink = useMemo(() => {
     const dPagePath = new DevidedPagePath(pagePath, false, true);
 
@@ -66,6 +65,13 @@ export const PagePathNavSticky = (props: PagePathNavLayoutProps): JSX.Element =>
     const linkedPagePathFormer = new LinkedPagePath(dPagePath.former);
     const linkedPagePathLatter = new LinkedPagePath(dPagePath.latter);
 
+    // not collapsed
+    if (dPagePath.isRoot || dPagePath.isFormerRoot) {
+      const linkedPagePath = new LinkedPagePath(pagePath);
+      return <PagePathHierarchicalLink linkedPagePath={linkedPagePath} isInTrash={isInTrash} />;
+    }
+
+    // collapsed
     return (
       <>
         <CollapsedParentsDropdown linkedPagePath={linkedPagePathFormer} />
@@ -88,12 +94,15 @@ export const PagePathNavSticky = (props: PagePathNavLayoutProps): JSX.Element =>
           //      which width is minimized by 'd-inline-block'
           //
             <div className="d-inline-block pe-auto">
-              <PagePathNavLayout
-                {...props}
-                latterLink={latterLink}
-                latterLinkClassName={isCollapseParents ? 'fs-3  text-truncate' : props.latterLinkClassName}
-                maxWidth={isCollapseParents ? navMaxWidth : undefined}
-              />
+              { !isCollapseParents && <PagePathNav {...props} /> }
+              { isCollapseParents && (
+                <PagePathNavLayout
+                  {...props}
+                  latterLink={latterLink}
+                  latterLinkClassName="fs-3 text-truncate"
+                  maxWidth={isCollapseParents ? navMaxWidth : undefined}
+                />
+              ) }
             </div>
           );
         }}