refactor & fix /page/[[...path]].page.tsx

packages/app/src/client/services/use-current-layout-class-name.ts → packages/app/src/client/services/layout.ts

@@ -2,11 +2,23 @@ import { useIsContainerFluid } from '~/stores/context';
 import { useSWRxCurrentPage } from '~/stores/page';
 import { useEditorMode } from '~/stores/ui';
 
-export const useCurrentLayoutClassName = (): string => {
+export const useEditorModeClassName = (): string => {
+  const { getClassNamesByEditorMode } = useEditorMode();
+
+  // TODO: Enable `editing-sidebar` class somehow
+  // const classNames: string[] = [];
+  // if (currentPage != null) {
+  //   const isSidebar = currentPage.path === '/Sidebar';
+  //   classNames.push(...getClassNamesByEditorMode(/* isSidebar */));
+  // }
+
+  return `${getClassNamesByEditorMode().join(' ') ?? ''}`;
+};
+
+export const useCurrentGrowiLayoutFluidClassName = (): string => {
   const { data: currentPage } = useSWRxCurrentPage();
 
   const { data: dataIsContainerFluid } = useIsContainerFluid();
-  const { getClassNamesByEditorMode } = useEditorMode();
 
   const isContainerFluidEachPage = currentPage == null || !('expandContentWidth' in currentPage)
     ? null
@@ -14,14 +26,5 @@ export const useCurrentLayoutClassName = (): string => {
   const isContainerFluidDefault = dataIsContainerFluid;
   const isContainerFluid = isContainerFluidEachPage ?? isContainerFluidDefault;
 
-  const classNames: string[] = [];
-  if (currentPage != null) {
-    // TODO: Enable `editing-sidebar` class somehow
-    // const isSidebar = currentPage.path === '/Sidebar';
-    classNames.push(...getClassNamesByEditorMode(/* isSidebar */));
-  }
-
-  const myClassName = `${classNames.join(' ') ?? ''} ${isContainerFluid ? 'growi-layout-fluid' : ''}`;
-
-  return myClassName;
+  return isContainerFluid ? 'growi-layout-fluid' : '';
 };

packages/app/src/components/Layout/BasicLayout.tsx

@@ -4,7 +4,7 @@ import dynamic from 'next/dynamic';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 
-import { useCurrentLayoutClassName } from '../../client/services/use-current-layout-class-name';
+import { useEditorModeClassName } from '../../client/services/layout';
 import { GrowiNavbar } from '../Navbar/GrowiNavbar';
 import Sidebar from '../Sidebar';
 
@@ -69,8 +69,8 @@ export const BasicLayout = ({ children, className }: Props): JSX.Element => {
   );
 };
 
-export const BasicLayoutWithCurrentPage = ({ children }: Props): JSX.Element => {
-  const className = useCurrentLayoutClassName();
+export const BasicLayoutWithEditorMode = ({ children }: Props): JSX.Element => {
+  const className = useEditorModeClassName();
 
   return (
     <BasicLayout className={className}>

packages/app/src/components/Layout/ShareLinkLayout.tsx

@@ -2,7 +2,7 @@ import React, { ReactNode } from 'react';
 
 import dynamic from 'next/dynamic';
 
-import { useCurrentLayoutClassName } from '../../client/services/use-current-layout-class-name';
+import { useEditorModeClassName } from '../../client/services/layout';
 import { GrowiNavbar } from '../Navbar/GrowiNavbar';
 
 import { RawLayout } from './RawLayout';
@@ -21,7 +21,7 @@ type Props = {
 }
 
 export const ShareLinkLayout = ({ children }: Props): JSX.Element => {
-  const className = useCurrentLayoutClassName();
+  const className = useEditorModeClassName();
 
   return (
     <RawLayout className={className}>

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

@@ -19,6 +19,7 @@ import Head from 'next/head';
 import { useRouter } from 'next/router';
 import superjson from 'superjson';
 
+import { useCurrentGrowiLayoutFluidClassName } from '~/client/services/layout';
 import { Comments } from '~/components/Comments';
 import { PageAlerts } from '~/components/PageAlert/PageAlerts';
 // import { useTranslation } from '~/i18n';
@@ -53,7 +54,7 @@ import loggerFactory from '~/utils/logger';
 // import GrowiSubNavigation from '../client/js/components/Navbar/GrowiSubNavigation';
 // import GrowiSubNavigationSwitcher from '../client/js/components/Navbar/GrowiSubNavigationSwitcher';
 import { DescendantsPageListModal } from '../components/DescendantsPageListModal';
-import { BasicLayoutWithCurrentPage } from '../components/Layout/BasicLayout';
+import { BasicLayoutWithEditorMode } from '../components/Layout/BasicLayout';
 import GrowiContextualSubNavigation from '../components/Navbar/GrowiContextualSubNavigation';
 import DisplaySwitcher from '../components/Page/DisplaySwitcher';
 // import { serializeUserSecurely } from '../server/models/serializers/user-serializer';
@@ -276,6 +277,8 @@ const Page: NextPageWithLayout<Props> = (props: Props) => {
   useSetupGlobalSocket();
   useSetupGlobalSocketForPage(pageId);
 
+  const growiLayoutFluidClass = useCurrentGrowiLayoutFluidClassName();
+
   const shouldRenderPutbackPageModal = pageWithMeta != null
     ? _isTrashPage(pageWithMeta.data.path)
     : false;
@@ -317,7 +320,7 @@ const Page: NextPageWithLayout<Props> = (props: Props) => {
 
         <div className="flex-grow-1">
           <div id="main" className={`main ${isUsersHomePage(props.currentPathname) && 'user-page'}`}>
-            <div id="content-main" className="content-main grw-container-convertible">
+            <div id="content-main" className={`content-main grw-container-convertible ${growiLayoutFluidClass}`}>
               { props.isIdenticalPathPage && <IdenticalPathPage /> }
 
               { !props.isIdenticalPathPage && (
@@ -362,9 +365,9 @@ Page.getLayout = function getLayout(page) {
     <>
       <DrawioViewerScript />
 
-      <BasicLayoutWithCurrentPage>
+      <BasicLayoutWithEditorMode>
         {page}
-      </BasicLayoutWithCurrentPage>
+      </BasicLayoutWithEditorMode>
       <UnsavedAlertDialog />
       <DescendantsPageListModal />
       <DrawioModal />

packages/app/src/pages/trash.page.tsx

@@ -16,7 +16,7 @@ import {
   useCurrentProductNavWidth, useCurrentSidebarContents, useDrawerMode, usePreferDrawerModeByUser, usePreferDrawerModeOnEditByUser, useSidebarCollapsed,
 } from '~/stores/ui';
 
-import { BasicLayoutWithCurrentPage } from '../components/Layout/BasicLayout';
+import { BasicLayoutWithEditorMode } from '../components/Layout/BasicLayout';
 import {
   useCurrentUser, useCurrentPageId, useCurrentPathname,
   useIsSearchServiceConfigured, useIsSearchServiceReachable,
@@ -78,7 +78,7 @@ const TrashPage: NextPage<CommonProps> = (props: Props) => {
       <Head>
         <title>{title}</title>
       </Head>
-      <BasicLayoutWithCurrentPage>
+      <BasicLayoutWithEditorMode>
         <header className="py-0 position-relative">
           <GrowiSubNavigation
             pagePath="/trash"
@@ -94,7 +94,7 @@ const TrashPage: NextPage<CommonProps> = (props: Props) => {
         </div>
 
         <div id="grw-fav-sticky-trigger" className="sticky-top"></div>
-      </BasicLayoutWithCurrentPage>
+      </BasicLayoutWithEditorMode>
 
       <EmptyTrashModal />
       <PutbackPageModal />

packages/app/src/styles/_layout.scss

@@ -6,11 +6,11 @@ body {
   overscroll-behavior-y: none;
 }
 
-.layout-root:not(.growi-layout-fluid) .grw-container-convertible {
+.content-main:not(.growi-layout-fluid).grw-container-convertible {
   @extend .container-lg;
 }
 
-.layout-root.growi-layout-fluid .grw-container-convertible {
+.content-main.growi-layout-fluid.grw-container-convertible {
   @extend .container-fluid;
 }