WIP: refactor Page

packages/app/src/components/Page.tsx

@@ -1,7 +1,4 @@
-import React, {
-  FC, useCallback,
-  useEffect, useRef,
-} from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 
 import EventEmitter from 'events';
 
@@ -16,11 +13,11 @@ import { useSaveOrUpdate } from '~/client/services/page-operation';
 import { toastSuccess, toastError } from '~/client/util/apiNotification';
 import { OptionsToSave } from '~/interfaces/page-operation';
 import {
-  useIsGuestUser, useShareLinkId, useCurrentPathname,
+  useIsGuestUser, useShareLinkId, useCurrentPathname, useIsNotFound,
 } from '~/stores/context';
 import { useEditingMarkdown } from '~/stores/editor';
 import { useDrawioModal, useHandsontableModal } from '~/stores/modal';
-import { useSWRxCurrentPage, useSWRxTagsInfo } from '~/stores/page';
+import { useCurrentPagePath, useSWRxCurrentPage, useSWRxTagsInfo } from '~/stores/page';
 import { useViewOptions } from '~/stores/renderer';
 import {
   useCurrentPageTocNode,
@@ -32,27 +29,31 @@ import loggerFactory from '~/utils/logger';
 import RevisionRenderer from './Page/RevisionRenderer';
 import mdu from './PageEditor/MarkdownDrawioUtil';
 import mtu from './PageEditor/MarkdownTableUtil';
+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 DrawioModal = dynamic(() => import('./PageEditor/DrawioModal'), { ssr: false });
+const NotFoundPage = dynamic(() => import('./NotFoundPage'), { ssr: false });
 const GridEditModal = dynamic(() => import('./PageEditor/GridEditModal'), { ssr: false });
 const LinkEditModal = dynamic(() => import('./PageEditor/LinkEditModal'), { ssr: false });
 
 
 const logger = loggerFactory('growi:Page');
 
-type Props = {
+type PageSubstanceProps = {
   currentPage?: IPagePopulatedToShowRevision,
 }
 
-export const Page: FC<Props> = (props: Props) => {
+const PageSubstance = (props: PageSubstanceProps): JSX.Element => {
   const { t } = useTranslation();
   const { currentPage } = props;
 
@@ -225,7 +226,7 @@ export const Page: FC<Props> = (props: Props) => {
       .filter(([, value]) => value != null);
 
     logger.warn('Some of materials are missing.', Object.fromEntries(entries));
-    return null;
+    return <></>;
   }
 
   const { _id: revisionId, body: markdown } = currentPage.revision;
@@ -247,3 +248,21 @@ export const Page: FC<Props> = (props: Props) => {
   );
 
 };
+
+
+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,48 +1,40 @@
 import React, { useCallback, useEffect, useMemo } from 'react';
 
-import { pagePathUtils } from '@growi/core';
 import dynamic from 'next/dynamic';
 
+
 import { SocketEventName } from '~/interfaces/websocket';
 import {
-  useIsEditable, useShareLinkId, useIsNotFound,
+  useCurrentPageId,
+  useIsEditable,
 } from '~/stores/context';
 import { useIsHackmdDraftUpdatingInRealtime } from '~/stores/hackmd';
-import { useCurrentPagePath, useSWRxCurrentPage } from '~/stores/page';
-import {
-  useSetRemoteLatestPageData,
-} from '~/stores/remote-latest-page';
+import { useSetRemoteLatestPageData } from '~/stores/remote-latest-page';
 import { EditorMode, useEditorMode } from '~/stores/ui';
 import { useGlobalSocket } from '~/stores/websocket';
 
 import CustomTabContent from '../CustomNavigation/CustomTabContent';
 import { Page } from '../Page';
-import { UserInfoProps } from '../User/UserInfo';
-
-const { isUsersHomePage } = pagePathUtils;
 
 
 const PageEditor = dynamic(() => import('../PageEditor'), { ssr: false });
 const PageEditorByHackmd = dynamic(() => import('../PageEditorByHackmd').then(mod => mod.PageEditorByHackmd), { ssr: false });
 const EditorNavbarBottom = dynamic(() => import('../PageEditor/EditorNavbarBottom'), { ssr: false });
 const HashChanged = dynamic(() => import('../EventListeneres/HashChanged'), { ssr: false });
-const NotFoundPage = dynamic(() => import('../NotFoundPage'), { ssr: false });
-const UserInfo = dynamic<UserInfoProps>(() => import('../User/UserInfo').then(mod => mod.UserInfo), { ssr: false });
 
 
-const PageView = React.memo((): JSX.Element => {
-  const { data: currentPagePath } = useCurrentPagePath();
-  const { data: shareLinkId } = useShareLinkId();
-  const { data: isNotFound } = useIsNotFound();
-  const { data: currentPage } = useSWRxCurrentPage();
-  const { setRemoteLatestPageData } = useSetRemoteLatestPageData();
+const DisplaySwitcher = React.memo((): JSX.Element => {
 
+  const { data: currentPageId } = useCurrentPageId();
+  const { data: editorMode = EditorMode.View } = useEditorMode();
+  const { data: isEditable } = useIsEditable();
+  const { setRemoteLatestPageData } = useSetRemoteLatestPageData();
   const { mutate: mutateIsHackmdDraftUpdatingInRealtime } = useIsHackmdDraftUpdatingInRealtime();
 
-  const isUsersHomePagePath = isUsersHomePage(currentPagePath ?? '');
-
   const { data: socket } = useGlobalSocket();
 
+  const isViewMode = editorMode === EditorMode.View;
+
   const setLatestRemotePageData = useCallback((data) => {
     const { s2cMessagePageUpdated } = data;
 
@@ -59,10 +51,10 @@ const PageView = React.memo((): JSX.Element => {
 
   const setIsHackmdDraftUpdatingInRealtime = useCallback((data) => {
     const { s2cMessagePageUpdated } = data;
-    if (s2cMessagePageUpdated.pageId === currentPage?._id) {
+    if (s2cMessagePageUpdated.pageId === currentPageId) {
       mutateIsHackmdDraftUpdatingInRealtime(true);
     }
-  }, [currentPage?._id, mutateIsHackmdDraftUpdatingInRealtime]);
+  }, [currentPageId, mutateIsHackmdDraftUpdatingInRealtime]);
 
   // listen socket for someone updating this page
   useEffect(() => {
@@ -89,31 +81,12 @@ const PageView = React.memo((): JSX.Element => {
     };
   }, [setIsHackmdDraftUpdatingInRealtime, socket]);
 
-  return (
-    <>
-      { isUsersHomePagePath && <UserInfo author={currentPage?.creator} /> }
-      { !isNotFound && <Page currentPage={currentPage ?? undefined} /> }
-      { isNotFound && <NotFoundPage /> }
-    </>
-  );
-});
-PageView.displayName = 'PageView';
-
-
-const DisplaySwitcher = React.memo((): JSX.Element => {
-
-  const { data: isEditable } = useIsEditable();
-
-  const { data: editorMode = EditorMode.View } = useEditorMode();
-
-  const isViewMode = editorMode === EditorMode.View;
-
   const navTabMapping = useMemo(() => {
     return {
       [EditorMode.View]: {
         Content: () => (
           <div data-testid="page-view" id="page-view">
-            <PageView />
+            <Page />
           </div>
         ),
       },