refactor

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

@@ -4,14 +4,11 @@ import dynamic from 'next/dynamic';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 
-import { useIsContainerFluid } from '~/stores/context';
-import { useSWRxCurrentPage } from '~/stores/page';
-
 import { GrowiNavbar } from '../Navbar/GrowiNavbar';
 import Sidebar from '../Sidebar';
 
 import { RawLayout } from './RawLayout';
-import { useEditorMode } from '~/stores/ui';
+import { useCurrentLayoutClassName } from './custom-hooks/use-current-layout-class-name';
 
 const AlertSiteUrlUndefined = dynamic(() => import('../AlertSiteUrlUndefined').then(mod => mod.AlertSiteUrlUndefined), { ssr: false });
 const HotkeysManager = dynamic(() => import('../Hotkeys/HotkeysManager'), { ssr: false });
@@ -32,30 +29,12 @@ const Fab = dynamic(() => import('../Fab').then(mod => mod.Fab), { ssr: false })
 
 type Props = {
   children?: ReactNode
+  className?: string
 }
 
-export const BasicLayout = ({ children }: Props): JSX.Element => {
-  const { data: currentPage } = useSWRxCurrentPage(); // Only /page, /share
-  const { data: dataIsContainerFluid } = useIsContainerFluid(); // Only /page, /share
-  const { getClassNamesByEditorMode } = useEditorMode(); // Only /page
-
-  // Only /page, /share
-  const isContainerFluidEachPage = currentPage == null || !('expandContentWidth' in currentPage)
-    ? null
-    : currentPage.expandContentWidth;
-  const isContainerFluidDefault = dataIsContainerFluid;
-  const isContainerFluid = isContainerFluidEachPage ?? isContainerFluidDefault;
-
-  // Only /page
-  const classNames: string[] = [];
-  const isSidebar = currentPage?.path === '/Sidebar';
-  classNames.push(...getClassNamesByEditorMode(isSidebar));
-
-  const myClassName = `${classNames.join(' ') ?? ''} ${isContainerFluid ? 'growi-layout-fluid' : ''}`;
-
+export const BasicLayout = ({ children, className }: Props): JSX.Element => {
   return (
-    <RawLayout className={myClassName}>
-
+    <RawLayout className={className ?? ''}>
       <DndProvider backend={HTML5Backend}>
         <GrowiNavbar />
 
@@ -89,3 +68,13 @@ export const BasicLayout = ({ children }: Props): JSX.Element => {
     </RawLayout>
   );
 };
+
+export const BasicLayoutWithCurrentPage = ({ children }: Props): JSX.Element => {
+  const className = useCurrentLayoutClassName();
+
+  return (
+    <BasicLayout className={className}>
+      {children}
+    </BasicLayout>
+  );
+};

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

@@ -2,12 +2,10 @@ import React, { ReactNode } from 'react';
 
 import dynamic from 'next/dynamic';
 
-import { useIsContainerFluid } from '~/stores/context';
-import { useSWRxCurrentPage } from '~/stores/page';
-
 import { GrowiNavbar } from '../Navbar/GrowiNavbar';
 
 import { RawLayout } from './RawLayout';
+import { useCurrentLayoutClassName } from './custom-hooks/use-current-layout-class-name';
 
 const PageCreateModal = dynamic(() => import('../PageCreateModal'), { ssr: false });
 const GrowiNavbarBottom = dynamic(() => import('../Navbar/GrowiNavbarBottom').then(mod => mod.GrowiNavbarBottom), { ssr: false });
@@ -23,19 +21,10 @@ type Props = {
 }
 
 export const ShareLinkLayout = ({ children }: Props): JSX.Element => {
-  const { data: currentPage } = useSWRxCurrentPage();
-  const { data: dataIsContainerFluid } = useIsContainerFluid();
-
-  const isContainerFluidEachPage = currentPage == null || !('expandContentWidth' in currentPage)
-    ? null
-    : currentPage.expandContentWidth;
-  const isContainerFluidDefault = dataIsContainerFluid;
-  const isContainerFluid = isContainerFluidEachPage ?? isContainerFluidDefault;
-
-  const myClassName = `${isContainerFluid ? 'growi-layout-fluid' : ''}`;
+  const className = useCurrentLayoutClassName();
 
   return (
-    <RawLayout className={myClassName}>
+    <RawLayout className={className}>
       <GrowiNavbar />
 
       <div className="page-wrapper d-flex d-print-block">

packages/app/src/components/Layout/custom-hooks/use-current-layout-class-name.ts

@@ -0,0 +1,26 @@
+import { useIsContainerFluid } from '~/stores/context';
+import { useSWRxCurrentPage } from '~/stores/page';
+import { useEditorMode } from '~/stores/ui';
+
+export const useCurrentLayoutClassName = (): string => {
+  const { data: currentPage } = useSWRxCurrentPage();
+
+  const { data: dataIsContainerFluid } = useIsContainerFluid();
+  const { getClassNamesByEditorMode } = useEditorMode();
+
+  const isContainerFluidEachPage = currentPage == null || !('expandContentWidth' in currentPage)
+    ? null
+    : currentPage.expandContentWidth;
+  const isContainerFluidDefault = dataIsContainerFluid;
+  const isContainerFluid = isContainerFluidEachPage ?? isContainerFluidDefault;
+
+  const classNames: string[] = [];
+  if (currentPage != null) {
+    const isSidebar = currentPage.path === '/Sidebar';
+    classNames.push(...getClassNamesByEditorMode(isSidebar));
+  }
+
+  const myClassName = `${classNames.join(' ') ?? ''} ${isContainerFluid ? 'growi-layout-fluid' : ''}`;
+
+  return myClassName;
+};

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

@@ -40,7 +40,7 @@ import { useEditingMarkdown } from '~/stores/editor';
 import { useSWRxCurrentPage, useSWRxIsGrantNormalized } from '~/stores/page';
 import { useRedirectFrom } from '~/stores/page-redirect';
 import {
-  useEditorMode, useSelectedGrant,
+  useSelectedGrant,
   usePreferDrawerModeByUser, usePreferDrawerModeOnEditByUser, useSidebarCollapsed, useCurrentSidebarContents, useCurrentProductNavWidth,
 } from '~/stores/ui';
 import { useSetupGlobalSocket, useSetupGlobalSocketForPage } from '~/stores/websocket';
@@ -51,7 +51,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 { BasicLayout } from '../components/Layout/BasicLayout';
+import { BasicLayoutWithCurrentPage } from '../components/Layout/BasicLayout';
 import GrowiContextualSubNavigation from '../components/Navbar/GrowiContextualSubNavigation';
 import DisplaySwitcher from '../components/Page/DisplaySwitcher';
 // import { serializeUserSecurely } from '../server/models/serializers/user-serializer';
@@ -72,7 +72,6 @@ import {
 import {
   CommonProps, getNextI18NextConfig, getServerSideCommonProps, generateCustomTitle,
 } from './utils/commons';
-// import { useCurrentPageSWR } from '../stores/page';
 
 
 declare global {
@@ -298,7 +297,7 @@ const Page: NextPage<Props> = (props: Props) => {
       </Head>
       <DrawioViewerScript />
 
-      <BasicLayout>
+      <BasicLayoutWithCurrentPage>
 
         <div className="h-100 d-flex flex-column justify-content-between">
           <header className="py-0 position-relative">
@@ -349,7 +348,7 @@ const Page: NextPage<Props> = (props: Props) => {
             </footer>
           )}
 
-          {/* TODO: move these components outside of BasicLayout */}
+          {/* TODO: move these components outside of BasicLayoutWithCurrentPage */}
           <UnsavedAlertDialog />
           <DescendantsPageListModal />
           <DrawioModal />
@@ -357,7 +356,7 @@ const Page: NextPage<Props> = (props: Props) => {
 
           {shouldRenderPutbackPageModal && <PutbackPageModal />}
         </div>
-      </BasicLayout>
+      </BasicLayoutWithCurrentPage>
     </>
   );
 };

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

@@ -16,7 +16,7 @@ import {
   useCurrentProductNavWidth, useCurrentSidebarContents, useDrawerMode, usePreferDrawerModeByUser, usePreferDrawerModeOnEditByUser, useSidebarCollapsed,
 } from '~/stores/ui';
 
-import { BasicLayout } from '../components/Layout/BasicLayout';
+import { BasicLayoutWithCurrentPage } 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>
-      <BasicLayout>
+      <BasicLayoutWithCurrentPage>
         <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>
-      </BasicLayout>
+      </BasicLayoutWithCurrentPage>
 
       <EmptyTrashModal />
       <PutbackPageModal />