refactor Page component

packages/app/src/components/Page.tsx

@@ -2,21 +2,18 @@ import React, {
   useCallback, useEffect, useRef,
 } from 'react';
 
-import EventEmitter from 'events';
-
-import { pagePathUtils, IPagePopulatedToShowRevision } from '@growi/core';
+import { pagePathUtils } from '@growi/core';
 import { useTranslation } from 'next-i18next';
-import dynamic from 'next/dynamic';
 import { HtmlElementNode } from 'rehype-toc';
 
 import { useDrawioModalLauncherForView } from '~/client/services/side-effects/drawio-modal-launcher-for-view';
 import { useHandsontableModalLauncherForView } from '~/client/services/side-effects/handsontable-modal-launcher-for-view';
 import { toastSuccess, toastError } from '~/client/util/toastr';
 import {
-  useIsGuestUser, useCurrentPathname, useIsNotFound,
+  useIsGuestUser, useCurrentPathname,
 } from '~/stores/context';
 import { useEditingMarkdown } from '~/stores/editor';
-import { useCurrentPagePath, useSWRxCurrentPage } from '~/stores/page';
+import { useSWRxCurrentPage } from '~/stores/page';
 import { useViewOptions } from '~/stores/renderer';
 import {
   useCurrentPageTocNode,
@@ -26,30 +23,14 @@ import { registerGrowiFacade } from '~/utils/growi-facade';
 import loggerFactory from '~/utils/logger';
 
 import RevisionRenderer from './Page/RevisionRenderer';
-import { UserInfo } from './User/UserInfo';
 
 import styles from './Page.module.scss';
 
-
-const { isUsersHomePage } = pagePathUtils;
-
-
-declare global {
-  // eslint-disable-next-line vars-on-top, no-var
-  var globalEmitter: EventEmitter;
-}
-
-const NotFoundPage = dynamic(() => import('./NotFoundPage'), { ssr: false });
-
 const logger = loggerFactory('growi:Page');
 
-type PageSubstanceProps = {
-  currentPage?: IPagePopulatedToShowRevision,
-}
 
-const PageSubstance = (props: PageSubstanceProps): JSX.Element => {
+export const Page = (): JSX.Element => {
   const { t } = useTranslation();
-  const { currentPage } = props;
 
   // Pass tocRef to generateViewOptions (=> rehypePlugin => customizeTOC) to call mutateCurrentPageTocNode when tocRef.current changes.
   // The toc node passed by customizeTOC is assigned to tocRef.current.
@@ -62,7 +43,7 @@ const PageSubstance = (props: PageSubstanceProps): JSX.Element => {
   const { data: currentPathname } = useCurrentPathname();
   const isSharedPage = pagePathUtils.isSharedPage(currentPathname ?? '');
 
-  const { mutate: mutateCurrentPage } = useSWRxCurrentPage();
+  const { data: currentPage, mutate: mutateCurrentPage } = useSWRxCurrentPage();
   const { mutate: mutateEditingMarkdown } = useEditingMarkdown();
   const { data: isGuestUser } = useIsGuestUser();
   const { data: isMobile } = useIsMobile();
@@ -141,25 +122,3 @@ const PageSubstance = (props: PageSubstanceProps): JSX.Element => {
   );
 
 };
-
-
-export const Page = React.memo((): JSX.Element => {
-  const { data: currentPagePath } = useCurrentPagePath();
-  const { data: isNotFound } = useIsNotFound();
-  const { data: currentPage } = useSWRxCurrentPage();
-
-  const isUsersHomePagePath = isUsersHomePage(currentPagePath ?? '');
-
-  return (
-    <>
-      { isUsersHomePagePath && <UserInfo author={currentPage?.creator} /> }
-
-      { !isNotFound && (
-        <PageSubstance currentPage={currentPage ?? undefined} />
-      ) }
-
-      { isNotFound && <NotFoundPage /> }
-    </>
-  );
-});
-Page.displayName = 'Page';

packages/app/src/components/Page/DisplaySwitcher.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 
 import { type IPagePopulatedToShowRevision, pagePathUtils } from '@growi/core';
 import dynamic from 'next/dynamic';
@@ -12,10 +12,10 @@ import { EditorMode, useEditorMode } from '~/stores/ui';
 
 import { LazyRenderer } from '../Common/LazyRenderer';
 import { MainPane } from '../Layout/MainPane';
-import { Page } from '../Page';
 import { PageAlerts } from '../PageAlert/PageAlerts';
 import { PageContentFooter } from '../PageContentFooter';
 import type { PageSideContentsProps } from '../PageSideContents';
+import { UserInfo } from '../User/UserInfo';
 import type { UsersHomePageFooterProps } from '../UsersHomePageFooter';
 
 const { isUsersHomePage } = pagePathUtils;
@@ -23,6 +23,9 @@ const { isUsersHomePage } = pagePathUtils;
 
 const NotCreatablePage = dynamic(() => import('../NotCreatablePage').then(mod => mod.NotCreatablePage), { ssr: false });
 const ForbiddenPage = dynamic(() => import('../ForbiddenPage'), { ssr: false });
+const NotFoundPage = dynamic(() => import('../NotFoundPage'), { ssr: false });
+
+const Page = dynamic(() => import('../Page').then(mod => mod.Page), { ssr: false });
 const PageSideContents = dynamic<PageSideContentsProps>(() => import('../PageSideContents').then(mod => mod.PageSideContents), { ssr: false });
 const Comments = dynamic(() => import('../Comments').then(mod => mod.Comments), { ssr: false });
 const UsersHomePageFooter = dynamic<UsersHomePageFooterProps>(() => import('../UsersHomePageFooter')
@@ -40,6 +43,7 @@ const IdenticalPathPage = (): JSX.Element => {
 
 
 type Props = {
+  pagePath: string,
   page?: IPagePopulatedToShowRevision,
   isIdenticalPathPage?: boolean,
   isNotFound?: boolean,
@@ -49,12 +53,26 @@ type Props = {
 
 const View = (props: Props): JSX.Element => {
   const {
-    page,
+    pagePath, page,
     isIdenticalPathPage, isNotFound, isForbidden, isNotCreatable,
   } = props;
 
   const pageId = page?._id;
-  const pagePath = page?.path;
+
+  const specialContents = useMemo(() => {
+    if (isIdenticalPathPage) {
+      return <IdenticalPathPage />;
+    }
+    if (isForbidden) {
+      return <ForbiddenPage />;
+    }
+    if (isNotCreatable) {
+      return <NotCreatablePage />;
+    }
+    if (isNotFound) {
+      return <NotFoundPage />;
+    }
+  }, [isForbidden, isIdenticalPathPage, isNotCreatable, isNotFound]);
 
   const sideContents = !isNotFound && !isNotCreatable
     ? (
@@ -76,20 +94,23 @@ const View = (props: Props): JSX.Element => {
     )
     : <></>;
 
+  const isUsersHomePagePath = isUsersHomePage(pagePath);
+
   return (
     <MainPane
       sideContents={sideContents}
       footerContents={footerContents}
     >
       <PageAlerts />
-      { props.isIdenticalPathPage && <IdenticalPathPage />}
-      { !props.isIdenticalPathPage && (
+
+      { specialContents }
+      { specialContents == null && (
         <>
-          { isForbidden && <ForbiddenPage /> }
-          { isNotCreatable && <NotCreatablePage />}
-          { !isForbidden && !props.isNotCreatable && <Page /> }
+          { isUsersHomePagePath && <UserInfo author={page?.creator} /> }
+          <Page />
         </>
       ) }
+
     </MainPane>
   );
 };

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

@@ -248,7 +248,7 @@ const Page: NextPageWithLayout<Props> = (props: Props) => {
   const { pageWithMeta, userUISettings } = props;
 
   const pageId = pageWithMeta?.data._id;
-  const pagePath = pageWithMeta?.data.path ?? (!_isPermalink(props.currentPathname) ? props.currentPathname : undefined);
+  const pagePath = pageWithMeta?.data.path ?? props.currentPathname;
 
   useCurrentPageId(pageId ?? null);
   useRevisionIdHackmdSynced(pageWithMeta?.data.revisionHackmdSynced);
@@ -288,7 +288,7 @@ const Page: NextPageWithLayout<Props> = (props: Props) => {
     }
   }, [props.currentPathname, router]);
 
-  const title = generateCustomTitleForPage(props, pagePath ?? '');
+  const title = generateCustomTitleForPage(props, pagePath);
 
   return (
     <>
@@ -310,6 +310,7 @@ const Page: NextPageWithLayout<Props> = (props: Props) => {
         <div id="grw-fav-sticky-trigger" className="sticky-top"></div>
 
         <DisplaySwitcher
+          pagePath={pagePath}
           page={pageWithMeta?.data}
           isIdenticalPathPage={props.isIdenticalPathPage}
           isNotFound={props.isNotFound}