refactor CustomSidebar

apps/app/src/components/Sidebar/Custom/CustomSidebar.tsx

@@ -0,0 +1,54 @@
+import dynamic from 'next/dynamic';
+import Link from 'next/link';
+import { useTranslation } from 'react-i18next';
+
+import { useSWRxPageByPath } from '~/stores/page';
+import { useCustomSidebarOptions } from '~/stores/renderer';
+
+import { SidebarHeaderReloadButton } from '../SidebarHeaderReloadButton';
+import DefaultContentSkeleton from '../Skeleton/DefaultContentSkeleton';
+
+import { SidebarNotFound } from './CustomSidebarNotFound';
+
+
+const CustomSidebarSubstance = dynamic(
+  () => import('./CustomSidebarSubstance').then(mod => mod.CustomSidebarSubstance),
+  { ssr: false, loading: DefaultContentSkeleton },
+);
+
+export const CustomSidebar = (): JSX.Element => {
+  const { t } = useTranslation();
+
+  const { data: rendererOptions, isLoading: isLoadingRendererOptions } = useCustomSidebarOptions();
+  const { data: page, mutate, isLoading: isLoadingPage } = useSWRxPageByPath('/Sidebar');
+
+  const isLoading = isLoadingPage || isLoadingRendererOptions;
+
+  const markdown = page?.revision.body;
+
+  return (
+    <div className="px-3">
+      <div className="grw-sidebar-content-header py-3 d-flex">
+        <h3 className="mb-0">
+          {t('CustomSidebar')}
+          { !isLoading && <Link href="/Sidebar#edit" className="h6 ml-2"><i className="icon-pencil"></i></Link> }
+        </h3>
+        { !isLoading && <SidebarHeaderReloadButton onClick={() => mutate()} /> }
+      </div>
+
+      { isLoading
+        ? <DefaultContentSkeleton />
+        : (
+          <>
+            { rendererOptions != null && markdown != null && (
+              <CustomSidebarSubstance markdown={markdown} rendererOptions={rendererOptions} />
+            ) }
+            { markdown === undefined && (
+              <SidebarNotFound />
+            ) }
+          </>
+        )
+      }
+    </div>
+  );
+};

apps/app/src/components/Sidebar/Custom/CustomSidebarNotFound.tsx

@@ -0,0 +1,11 @@
+import Link from 'next/link';
+
+export const SidebarNotFound = (): JSX.Element => {
+  return (
+    <div className="grw-sidebar-content-header h5 text-center py-3">
+      <Link href="/Sidebar#edit">
+        <i className="icon-magic-wand"></i>Create<strong>/Sidebar</strong>page
+      </Link>
+    </div>
+  );
+};

apps/app/src/components/Sidebar/Custom/CustomSidebarSubstance.module.scss

@@ -0,0 +1,7 @@
+@use '~/styles/organisms/wiki-custom-sidebar.scss';
+
+.grw-custom-sidebar-content :global {
+  .wiki {
+    @extend %grw-custom-sidebar-content;
+  }
+}

apps/app/src/components/Sidebar/Custom/CustomSidebarSubstance.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import RevisionRenderer from '~/components/Page/RevisionRenderer';
+import type { RendererOptions } from '~/interfaces/renderer-options';
+import loggerFactory from '~/utils/logger';
+
+import styles from './CustomSidebarSubstance.module.scss';
+
+
+const logger = loggerFactory('growi:components:CustomSidebarSubstance');
+
+
+type Props = {
+  markdown: string,
+  rendererOptions: RendererOptions
+}
+
+export const CustomSidebarSubstance = (props: Props): JSX.Element => {
+  const { markdown, rendererOptions } = props;
+
+  return (
+    <div className={`py-3 grw-custom-sidebar-content ${styles['grw-custom-sidebar-content']}`}>
+      <RevisionRenderer
+        rendererOptions={rendererOptions}
+        markdown={markdown}
+      />
+    </div>
+  );
+};

apps/app/src/components/Sidebar/Custom/index.tsx

@@ -0,0 +1 @@
+export * from './CustomSidebar';

apps/app/src/components/Sidebar/CustomSidebar.module.scss

@@ -1,19 +0,0 @@
-@use '~/styles/organisms/wiki-custom-sidebar.scss';
-@use '~/styles/mixins' as *;
-
-.grw-custom-sidebar-content :global {
-  .wiki {
-    @extend %grw-custom-sidebar-content;
-  }
-
-  .grw-custom-sidebar-skeleton-text {
-    @include grw-skeleton-text($font-size:15px, $line-height:21.42px);
-    max-width: 160px;
-    margin: 15px 0;
-  }
-
-  .grw-custom-sidebar-skeleton-text-full {
-    @extend .grw-custom-sidebar-skeleton-text;
-    max-width: 100%;
-  }
-}

apps/app/src/components/Sidebar/CustomSidebar.tsx

@@ -1,81 +0,0 @@
-import React, { FC } from 'react';
-
-import type { IRevision } from '@growi/core';
-import { useTranslation } from 'next-i18next';
-import Link from 'next/link';
-
-import { useSWRxPageByPath } from '~/stores/page';
-import { useCustomSidebarOptions } from '~/stores/renderer';
-import loggerFactory from '~/utils/logger';
-
-import RevisionRenderer from '../Page/RevisionRenderer';
-
-import { SidebarHeaderReloadButton } from './SidebarHeaderReloadButton';
-import CustomSidebarContentSkeleton from './Skeleton/CustomSidebarContentSkeleton';
-
-import styles from './CustomSidebar.module.scss';
-
-
-const logger = loggerFactory('growi:cli:CustomSidebar');
-
-
-const SidebarNotFound = () => {
-  return (
-    <div className="grw-sidebar-content-header h5 text-center py-3">
-      <Link href="/Sidebar#edit">
-        <i className="icon-magic-wand"></i>Create<strong>/Sidebar</strong>page
-      </Link>
-    </div>
-  );
-};
-
-const CustomSidebar: FC = () => {
-  const { t } = useTranslation();
-  const { data: rendererOptions } = useCustomSidebarOptions();
-
-  const { data: page, error, mutate } = useSWRxPageByPath('/Sidebar');
-
-  if (rendererOptions == null) {
-    return <></>;
-  }
-
-  const isLoading = page === undefined && error == null;
-  const markdown = (page?.revision as IRevision | undefined)?.body;
-
-  return (
-    <div className="px-3">
-      <div className="grw-sidebar-content-header py-3 d-flex">
-        <h3 className="mb-0">
-          {t('CustomSidebar')}
-          <Link href="/Sidebar#edit" className="h6 ml-2"><i className="icon-pencil"></i></Link>
-        </h3>
-        <SidebarHeaderReloadButton onClick={() => mutate()} />
-      </div>
-
-      {
-        isLoading && (
-          <CustomSidebarContentSkeleton />
-        )
-      }
-
-      {
-        (!isLoading && markdown != null) && (
-          <div className={`py-3 grw-custom-sidebar-content ${styles['grw-custom-sidebar-content']}`}>
-            <RevisionRenderer
-              rendererOptions={rendererOptions}
-              markdown={markdown}
-            />
-          </div>
-        )
-      }
-
-      {
-        (!isLoading && markdown === undefined) && (
-          <SidebarNotFound />
-        )
-      }
-    </div>
-  );
-};
-
-export default CustomSidebar;

apps/app/src/components/Sidebar/Sidebar.tsx

@@ -18,15 +18,13 @@ import DrawerToggler from '../Navbar/DrawerToggler';
 import { StickyStretchableScrollerProps } from '../StickyStretchableScroller';
 
 import { NavigationResizeHexagon } from './NavigationResizeHexagon';
+import { SidebarContents } from './SidebarContents';
 import { SidebarNav } from './SidebarNav';
-import { SidebarSkeleton } from './Skeleton/SidebarSkeleton';
 
 import styles from './Sidebar.module.scss';
 
 const StickyStretchableScroller = dynamic<StickyStretchableScrollerProps>(() => import('../StickyStretchableScroller')
   .then(mod => mod.StickyStretchableScroller), { ssr: false });
-const SidebarContents = dynamic(() => import('./SidebarContents')
-  .then(mod => mod.SidebarContents), { ssr: false, loading: () => <SidebarSkeleton /> });
 
 const sidebarMinWidth = 240;
 const sidebarMinimizeWidth = 20;

apps/app/src/components/Sidebar/Skeleton/CustomSidebarContentSkeleton.tsx

@@ -1,18 +0,0 @@
-import React from 'react';
-
-import { Skeleton } from '~/components/Skeleton';
-
-import styles from '../CustomSidebar.module.scss';
-
-const CustomSidebarContentSkeleton = (): JSX.Element => {
-
-  return (
-    <div className={`py-3 grw-custom-sidebar-content ${styles['grw-custom-sidebar-content']}`}>
-      <Skeleton additionalClass={`grw-custom-sidebar-skeleton-text-full ${styles['grw-custom-sidebar-skeleton-text-full']}`} />
-      <Skeleton additionalClass={`grw-custom-sidebar-skeleton-text-full ${styles['grw-custom-sidebar-skeleton-text-full']}`} />
-      <Skeleton additionalClass={`grw-custom-sidebar-skeleton-text ${styles['grw-custom-sidebar-skeleton-text']}`} />
-    </div>
-  );
-};
-
-export default CustomSidebarContentSkeleton;

apps/app/src/components/Sidebar/Skeleton/DefaultContentSkeleton.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import { Skeleton } from '~/components/Skeleton';
+
+import styles from './DefaultContentSkelton.module.scss';
+
+const DefaultContentSkeleton = (): JSX.Element => {
+
+  return (
+    <div className={`py-3 grw-default-content-skelton ${styles['grw-default-content-skelton']}`}>
+      <Skeleton additionalClass={`grw-skeleton-text-full ${styles['grw-skeleton-text-full']}`} />
+      <Skeleton additionalClass={`grw-skeleton-text-full ${styles['grw-skeleton-text-full']}`} />
+      <Skeleton additionalClass={`grw-skeleton-text ${styles['grw-skeleton-text']}`} />
+    </div>
+  );
+};
+
+export default DefaultContentSkeleton;

apps/app/src/components/Sidebar/Skeleton/DefaultContentSkelton.module.scss

@@ -0,0 +1,14 @@
+@use '~/styles/mixins';
+
+.grw-default-content-skelton :global {
+  .grw-skeleton-text {
+    @include mixins.grw-skeleton-text($font-size:15px, $line-height:21.42px);
+    max-width: 160px;
+    margin: 15px 0;
+  }
+
+  .grw-skeleton-text-full {
+    @extend .grw-skeleton-text;
+    max-width: 100%;
+  }
+}

apps/app/src/stores/page.tsx

@@ -109,6 +109,11 @@ export const useSWRxPageByPath = (path?: string): SWRResponse<IPagePopulatedToSh
   return useSWR(
     path != null ? ['/page', path] : null,
     ([endpoint, path]) => apiv3Get<{ page: IPagePopulatedToShowRevision }>(endpoint, { path }).then(result => result.data.page),
+    {
+      keepPreviousData: true,
+      revalidateOnFocus: false,
+      revalidateOnReconnect: false,
+    },
   );
 };