avoid hydration error

packages/app/src/components/DescendantsPageList.tsx

@@ -114,7 +114,6 @@ export const DescendantsPageListSubstance = (props: SubstanceProps): JSX.Element
         onPagesDeleted={pageDeletedHandler}
         onPagePutBacked={pagePutBackedHandler}
       />
-
       { showPager && (
         <div className="my-4">
           <PaginationWrapper

packages/app/src/components/Navbar/GrowiContextualSubNavigation.tsx

@@ -83,7 +83,6 @@ const AdditionalMenuItems = (props: AdditionalMenuItemsProps): JSX.Element => {
         </i>
         { t('Presentation Mode') }
       </DropdownItem>
-
       {/* Export markdown */}
       <DropdownItem
         onClick={() => exportAsMarkdown(pageId, revisionId, 'md')}
@@ -92,9 +91,7 @@ const AdditionalMenuItems = (props: AdditionalMenuItemsProps): JSX.Element => {
         <i className="icon-fw icon-cloud-download grw-page-control-dropdown-icon"></i>
         {t('export_bulk.export_page_markdown')}
       </DropdownItem>
-
       <DropdownItem divider />
-
       {/*
         TODO: show Tooltip when menu is disabled
         refs: PageAccessoriesModalControl
@@ -110,7 +107,6 @@ const AdditionalMenuItems = (props: AdditionalMenuItemsProps): JSX.Element => {
         </span>
         {t('History')}
       </DropdownItem>
-
       <DropdownItem
         onClick={() => openAccessoriesModal(PageAccessoriesModalContents.Attachment)}
         data-testid="open-page-accessories-modal-btn-with-attachment-data-tab"
@@ -121,7 +117,6 @@ const AdditionalMenuItems = (props: AdditionalMenuItemsProps): JSX.Element => {
         </span>
         {t('attachment_data')}
       </DropdownItem>
-
       <DropdownItem
         onClick={() => openAccessoriesModal(PageAccessoriesModalContents.ShareLink)}
         disabled={isGuestUser || isSharedUser || isLinkSharingDisabled}
@@ -133,7 +128,6 @@ const AdditionalMenuItems = (props: AdditionalMenuItemsProps): JSX.Element => {
         </span>
         {t('share_links.share_link_management')}
       </DropdownItem>
-
       <DropdownItem divider />
 
       {/* Create template */}
@@ -318,7 +312,6 @@ const GrowiContextualSubNavigation = (props: GrowiContextualSubNavigationProps):
     return (
       <>
         <div className="d-flex flex-column align-items-end justify-content-center py-md-2" style={{ gap: `${isCompactMode ? '5px' : '7px'}` }}>
-
           { isViewMode && (
             <div className="h-50 w-100">
               <SubNavButtons

packages/app/src/components/Navbar/GrowiSubNavigation.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 
 import dynamic from 'next/dynamic';
 
@@ -13,42 +13,38 @@ import { Skelton } from '../Skelton';
 
 import DrawerToggler from './DrawerToggler';
 
-
 import TagLabelsStyles from '../Page/TagLabels.module.scss';
 import AuthorInfoStyles from './AuthorInfo.module.scss';
 import styles from './GrowiSubNavigation.module.scss';
 
+const TagLabels = dynamic(() => import('../Page/TagLabels'), {
+  ssr: false,
+  loading: () => <Skelton additionalClass={`${TagLabelsStyles['grw-tag-labels-skelton']} py-1`} />,
+});
+const AuthorInfo = dynamic(() => import('./AuthorInfo'), {
+  ssr: false,
+  loading: () => <Skelton additionalClass={`${AuthorInfoStyles['grw-author-info-skelton']} py-1`} />,
+});
+
 
 export type GrowiSubNavigationProps = {
   page: Partial<IPageHasId>,
-
   showDrawerToggler?: boolean,
   showTagLabel?: boolean,
   showPageAuthors?: boolean,
-
   isGuestUser?: boolean,
   isDrawerMode?: boolean,
   isCompactMode?: boolean,
-
   tags?: string[],
   tagsUpdatedHandler?: (newTags: string[]) => Promise<void> | void,
-
-  controls?: React.FunctionComponent,
+  controls: React.FunctionComponent,
   additionalClasses?: string[],
 }
 
 export const GrowiSubNavigation = (props: GrowiSubNavigationProps): JSX.Element => {
 
-  const TagLabels = dynamic(() => import('../Page/TagLabels'), {
-    ssr: false,
-    loading: () => <Skelton additionalClass={`${TagLabelsStyles['grw-tag-labels-skelton']} py-1`} />,
-  });
-  const AuthorInfo = dynamic(() => import('./AuthorInfo'), {
-    ssr: false,
-    loading: () => <Skelton additionalClass={`${AuthorInfoStyles['grw-author-info-skelton']} py-1`} />,
-  });
-
   const { data: editorMode } = useEditorMode();
+  const [isControls, setControls] = useState(false);
 
   const {
     page,
@@ -59,35 +55,39 @@ export const GrowiSubNavigation = (props: GrowiSubNavigationProps): JSX.Element
     additionalClasses = [],
   } = props;
 
+  const isViewMode = editorMode === EditorMode.View;
+  const isEditorMode = !isViewMode;
+  const compactModeClasses = isCompactMode ? 'grw-subnav-compact d-print-none' : '';
+
   const {
     _id: pageId, path, creator, lastUpdateUser,
     createdAt, updatedAt,
   } = page;
 
-  const isViewMode = editorMode === EditorMode.View;
-  const isEditorMode = !isViewMode;
+  useEffect(() => {
+    if (Controls != null) {
+      setControls(true);
+    }
+  }, [Controls]);
 
   if (path == null) {
     return <></>;
   }
 
-  return (
-    <div className={
-      `grw-subnav ${styles['grw-subnav']} d-flex align-items-center justify-content-between`
-      + ` ${additionalClasses.join(' ')}`
-      + ` ${isCompactMode ? 'grw-subnav-compact d-print-none' : ''}`}
-    >
+  console.log(isCompactMode);
 
+  return (
+    <div className={`grw-subnav ${styles['grw-subnav']} d-flex align-items-center justify-content-between ${additionalClasses.join(' ')}
+    ${compactModeClasses}`} >
       {/* Left side */}
       <div className="d-flex grw-subnav-left-side">
-        { showDrawerToggler && isDrawerMode && (
+        { (showDrawerToggler && isDrawerMode) && (
           <div className={`d-none d-md-flex align-items-center ${isEditorMode ? 'mr-2 pr-2' : 'border-right mr-4 pr-4'}`}>
             <DrawerToggler />
           </div>
         ) }
-
         <div className="grw-path-nav-container">
-          { showTagLabel && !isCompactMode && (
+          { (showTagLabel && !isCompactMode) && (
             <div className="grw-taglabels-container">
               <TagLabels tags={tags} isGuestUser={isGuestUser ?? false} tagsUpdateInvoked={tagsUpdatedHandler} />
             </div>
@@ -95,12 +95,9 @@ export const GrowiSubNavigation = (props: GrowiSubNavigationProps): JSX.Element
           <PagePathNav pageId={pageId} pagePath={path} isSingleLineMode={isEditorMode} isCompactMode={isCompactMode} />
         </div>
       </div>
-
       {/* Right side */}
       <div className="d-flex">
-
-        { Controls && <Controls></Controls> }
-
+        { isControls && <Controls /> }
         {/* Page Authors */}
         { (showPageAuthors && !isCompactMode) && (
           <ul className={`${AuthorInfoStyles['grw-author-info']} text-nowrap border-left d-none d-lg-block d-edit-none py-2 pl-4 mb-0 ml-3`}>

packages/app/src/components/PagePathHierarchicalLink.tsx

@@ -21,6 +21,7 @@ const PagePathHierarchicalLink = memo((props: PagePathHierarchicalLinkProps): JS
   const {
     linkedPagePath, linkedPagePathByHtml, basePath, isInTrash,
   } = props;
+
   // render root element
   if (linkedPagePath.isRoot) {
     if (basePath != null) {

packages/app/src/components/PagePathNav.tsx

@@ -7,7 +7,8 @@ import { useIsNotFound } from '~/stores/context';
 
 import LinkedPagePath from '../models/linked-page-path';
 
-import PagePathHierarchicalLink from './PagePathHierarchicalLink';
+const PagePathHierarchicalLink = dynamic(() => import('./PagePathHierarchicalLink'), { ssr: false });
+const CopyDropdown = dynamic(() => import('./Page/CopyDropdown'), { ssr: false });
 
 
 type Props = {
@@ -21,15 +22,13 @@ const PagePathNav: FC<Props> = (props: Props) => {
   const {
     pageId, pagePath, isSingleLineMode, isCompactMode,
   } = props;
-  const dPagePath = new DevidedPagePath(pagePath, false, true);
 
   const { data: isNotFound } = useIsNotFound();
 
-  const CopyDropdown = dynamic(() => import('./Page/CopyDropdown'), { ssr: false });
+  const dPagePath = new DevidedPagePath(pagePath, false, true);
 
   let formerLink;
   let latterLink;
-
   // one line
   if (dPagePath.isRoot || dPagePath.isFormerRoot || isSingleLineMode) {
     const linkedPagePath = new LinkedPagePath(pagePath);
@@ -48,7 +47,7 @@ const PagePathNav: FC<Props> = (props: Props) => {
 
   return (
     <div className="grw-page-path-nav">
-      {formerLink}
+      { formerLink }
       <span className="d-flex align-items-center">
         <h1 className="m-0">{latterLink}</h1>
         { pageId != null && !isNotFound && (

packages/app/src/components/SearchPage/SearchResultContent.tsx

@@ -193,7 +193,7 @@ export const SearchResultContent: FC<Props> = (props: Props) => {
         />
       </div>
     );
-  }, [page, showPageControlDropdown, forceHideMenuItems, duplicateItemClickedHandler, renameItemClickedHandler, deleteItemClickedHandler]);
+  }, [page, SubNavButtons, showPageControlDropdown, forceHideMenuItems, duplicateItemClickedHandler, renameItemClickedHandler, deleteItemClickedHandler]);
 
   // return if page or growiRenderer is null
   if (page == null || rendererOptions == null) return <></>;

packages/app/src/pages/[[...path]].page.tsx

@@ -328,7 +328,7 @@ const GrowiPage: NextPage<Props> = (props: Props) => {
               </div>
             </div>
           </div>
-          { !props.isNotFound && (
+          { !props.isIdenticalPathPage && !props.isNotFound && (
             <footer className="footer d-edit-none">
               { !isTopPagePath && (<Comments pageId={pageId} />) }
               { (pageWithMeta != null && isUsersHomePage(pageWithMeta.data.path)) && (