Merge pull request #7085 from weseek/imprv/get-layout-pattern-omit-className-expandContainer

imprv: Omit className expandContainer from BasicLayout

packages/app/src/client/services/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/components/Layout/BasicLayout.tsx

@@ -4,6 +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 { GrowiNavbar } from '../Navbar/GrowiNavbar';
 import Sidebar from '../Sidebar';
 
@@ -27,20 +28,13 @@ const Fab = dynamic(() => import('../Fab').then(mod => mod.Fab), { ssr: false })
 
 
 type Props = {
-  className?: string,
-  expandContainer?: boolean,
   children?: ReactNode
+  className?: string
 }
 
-export const BasicLayout = ({
-  children, className, expandContainer,
-}: Props): JSX.Element => {
-
-  const myClassName = `${className ?? ''} ${expandContainer ? 'growi-layout-fluid' : ''}`;
-
+export const BasicLayout = ({ children, className }: Props): JSX.Element => {
   return (
-    <RawLayout className={myClassName}>
-
+    <RawLayout className={className ?? ''}>
       <DndProvider backend={HTML5Backend}>
         <GrowiNavbar />
 
@@ -74,3 +68,13 @@ export const BasicLayout = ({
     </RawLayout>
   );
 };
+
+export const BasicLayoutWithCurrentPage = ({ children }: Props): JSX.Element => {
+  const className = useCurrentLayoutClassName();
+
+  return (
+    <BasicLayout className={className}>
+      {children}
+    </BasicLayout>
+  );
+};

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

@@ -5,22 +5,14 @@ import { BasicLayout } from '~/components/Layout/BasicLayout';
 import commonStyles from './SearchResultLayout.module.scss';
 
 type Props = {
-  className?: string,
   children?: ReactNode,
 }
 
-const SearchResultLayout = ({
-  children, className,
-}: Props): JSX.Element => {
-
-  const classNames: string[] = [];
-  if (className != null) {
-    classNames.push(className);
-  }
+const SearchResultLayout = ({ children }: Props): JSX.Element => {
 
   return (
     <div className={`on-search ${commonStyles['on-search']}`}>
-      <BasicLayout className={classNames.join(' ')}>
+      <BasicLayout>
         <div id="grw-fav-sticky-trigger" className="sticky-top"></div>
         <div id="main" className="main search-page mt-0">
           { children }

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

@@ -2,6 +2,7 @@ import React, { ReactNode } from 'react';
 
 import dynamic from 'next/dynamic';
 
+import { useCurrentLayoutClassName } from '../../client/services/use-current-layout-class-name';
 import { GrowiNavbar } from '../Navbar/GrowiNavbar';
 
 import { RawLayout } from './RawLayout';
@@ -16,19 +17,14 @@ const Fab = dynamic(() => import('../Fab').then(mod => mod.Fab), { ssr: false })
 
 
 type Props = {
-  className?: string,
-  expandContainer?: boolean,
   children?: ReactNode
 }
 
-export const ShareLinkLayout = ({
-  children, className, expandContainer,
-}: Props): JSX.Element => {
-
-  const myClassName = `${className ?? ''} ${expandContainer ? 'growi-layout-fluid' : ''}`;
+export const ShareLinkLayout = ({ children }: Props): JSX.Element => {
+  const className = useCurrentLayoutClassName();
 
   return (
-    <RawLayout className={myClassName}>
+    <RawLayout className={className}>
       <GrowiNavbar />
 
       <div className="page-wrapper d-flex d-print-block">

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 {
@@ -260,15 +259,13 @@ const Page: NextPage<Props> = (props: Props) => {
   // useIsNotCreatable(props.isForbidden || !isCreatablePage(pagePath)); // TODO: need to include props.isIdentical
   useCurrentPathname(props.currentPathname);
 
-  const { data: currentPage } = useSWRxCurrentPage(undefined, pageWithMeta?.data ?? null); // store initial data
+  useSWRxCurrentPage(undefined, pageWithMeta?.data ?? null); // store initial data
 
   useEditingMarkdown(pageWithMeta?.data.revision?.body);
 
   const { data: grantData } = useSWRxIsGrantNormalized(pageId);
   const { mutate: mutateSelectedGrant } = useSelectedGrant();
 
-  const { getClassNamesByEditorMode } = useEditorMode();
-
   useSetupGlobalSocket();
   useSetupGlobalSocketForPage(pageId);
 
@@ -289,19 +286,8 @@ const Page: NextPage<Props> = (props: Props) => {
     }
   }, [props.currentPathname, router]);
 
-  const classNames: string[] = [];
-
-  const isSidebar = pagePath === '/Sidebar';
-  classNames.push(...getClassNamesByEditorMode(isSidebar));
-
   const isTopPagePath = isTopPage(pageWithMeta?.data.path ?? '');
 
-  const isContainerFluidEachPage = currentPage == null || !('expandContentWidth' in currentPage)
-    ? null
-    : currentPage.expandContentWidth;
-  const isContainerFluidDefault = props.isContainerFluid;
-  const isContainerFluid = isContainerFluidEachPage ?? isContainerFluidDefault;
-
   const title = generateCustomTitle(props, 'GROWI');
 
   return (
@@ -311,7 +297,7 @@ const Page: NextPage<Props> = (props: Props) => {
       </Head>
       <DrawioViewerScript />
 
-      <BasicLayout className={classNames.join(' ')} expandContainer={isContainerFluid}>
+      <BasicLayoutWithCurrentPage>
 
         <div className="h-100 d-flex flex-column justify-content-between">
           <header className="py-0 position-relative">
@@ -362,13 +348,15 @@ const Page: NextPage<Props> = (props: Props) => {
             </footer>
           )}
 
+          {/* TODO: move these components outside of BasicLayoutWithCurrentPage */}
           <UnsavedAlertDialog />
           <DescendantsPageListModal />
           <DrawioModal />
           <HandsontableModal />
+
           {shouldRenderPutbackPageModal && <PutbackPageModal />}
         </div>
-      </BasicLayout>
+      </BasicLayoutWithCurrentPage>
     </>
   );
 };

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

@@ -88,10 +88,6 @@ const SearchResultPage: NextPage<Props> = (props: Props) => {
   };
 
   const title = generateCustomTitle(props, 'GROWI');
-  const classNames: string[] = [];
-  // if (props.isContainerFluid) {
-  //   classNames.push('growi-layout-fluid');
-  // }
 
   return (
     <>
@@ -101,7 +97,7 @@ const SearchResultPage: NextPage<Props> = (props: Props) => {
 
       <DrawioViewerScript />
 
-      <SearchResultLayout className={classNames.join(' ')}>
+      <SearchResultLayout>
         <div id="search-page">
           <SearchPage />
         </div>

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

@@ -23,7 +23,7 @@ import { RendererConfig } from '~/interfaces/services/renderer';
 import { IShareLinkHasId } from '~/interfaces/share-link';
 import {
   useCurrentUser, useCurrentPathname, useCurrentPageId, useRendererConfig, useIsSearchPage,
-  useShareLinkId, useIsSearchServiceConfigured, useIsSearchServiceReachable, useIsSearchScopeChildrenAsDefault, useDrawioUri,
+  useShareLinkId, useIsSearchServiceConfigured, useIsSearchServiceReachable, useIsSearchScopeChildrenAsDefault, useDrawioUri, useIsContainerFluid,
 } from '~/stores/context';
 import { useDescendantsPageListModal } from '~/stores/modal';
 import loggerFactory from '~/utils/logger';
@@ -59,6 +59,7 @@ const SharedPage: NextPage<Props> = (props: Props) => {
   useIsSearchServiceReachable(props.isSearchServiceReachable);
   useIsSearchScopeChildrenAsDefault(props.isSearchScopeChildrenAsDefault);
   useDrawioUri(props.drawioUri);
+  useIsContainerFluid(props.isContainerFluid);
 
   const { open: openDescendantPageListModal } = useDescendantsPageListModal();
   const { t } = useTranslation();
@@ -77,7 +78,7 @@ const SharedPage: NextPage<Props> = (props: Props) => {
 
       <DrawioViewerScript />
 
-      <ShareLinkLayout expandContainer={props.isContainerFluid}>
+      <ShareLinkLayout>
         <div className="h-100 d-flex flex-column justify-content-between">
           <header className="py-0 position-relative">
             {isShowSharedPage && <GrowiContextualSubNavigation isLinkSharingDisabled={props.disableLinkSharing} />}

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

@@ -80,10 +80,9 @@ const TagPage: NextPage<CommonProps> = (props: Props) => {
   useRendererConfig(props.rendererConfig);
 
   const title = generateCustomTitle(props, 'GROWI');
-  const classNames: string[] = [];
 
   return (
-    <BasicLayout className={classNames.join(' ')}>
+    <BasicLayout>
       <Head>
         <title>{title}</title>
       </Head>

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 />