relocate RecentChanges

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

@@ -8,16 +8,16 @@ import { UserPicture, FootstampIcon } from '@growi/ui/dist/components';
 import { useTranslation } from 'next-i18next';
 import Link from 'next/link';
 
+import FormattedDistanceDate from '~/components/FormattedDistanceDate';
+import InfiniteScroll from '~/components/InfiniteScroll';
 import PagePathHierarchicalLink from '~/components/PagePathHierarchicalLink';
 import LinkedPagePath from '~/models/linked-page-path';
 import { useSWRINFxRecentlyUpdated } from '~/stores/page-listing';
 import loggerFactory from '~/utils/logger';
 
-import FormattedDistanceDate from '../FormattedDistanceDate';
-import InfiniteScroll from '../InfiniteScroll';
+import { SidebarHeaderReloadButton } from '../SidebarHeaderReloadButton';
 
-import { SidebarHeaderReloadButton } from './SidebarHeaderReloadButton';
-import RecentChangesContentSkeleton from './Skeleton/RecentChangesContentSkeleton';
+import RecentChangesContentSkeleton from './RecentChangesContentSkeleton';
 
 import styles from './RecentChanges.module.scss';
 
@@ -102,7 +102,7 @@ const PageItem = memo(({ page, isSmall }: PageItemProps): JSX.Element => {
 });
 PageItem.displayName = 'PageItem';
 
-const RecentChanges = (): JSX.Element => {
+export const RecentChanges = (): JSX.Element => {
 
   const PER_PAGE = 20;
   const { t } = useTranslation();
@@ -172,4 +172,3 @@ const RecentChanges = (): JSX.Element => {
   );
 
 };
-export default RecentChanges;

apps/app/src/components/Sidebar/Skeleton/RecentChangesContentSkeleton.tsx → apps/app/src/components/Sidebar/RecentChanges/RecentChangesContentSkeleton.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { Skeleton } from '~/components/Skeleton';
 
-import styles from '../RecentChanges.module.scss';
+import styles from './RecentChanges.module.scss';
 
 const SkeletonItem = () => {
 

apps/app/src/components/Sidebar/RecentChanges/index.ts

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

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

@@ -6,7 +6,7 @@ import { useCurrentSidebarContents } from '~/stores/ui';
 import { Bookmarks } from './Bookmarks';
 import { CustomSidebar } from './Custom';
 import PageTree from './PageTree';
-import RecentChanges from './RecentChanges';
+import { RecentChanges } from './RecentChanges';
 import Tag from './Tag';
 
 export const SidebarContents = memo(() => {

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

@@ -1,6 +0,0 @@
-@use '~/styles/mixins' as *;
-
-.grw-sidebar-content-header-skeleton {
-  @include grw-skeleton-h3;
-  max-width: 100%;
-}

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

@@ -1,49 +0,0 @@
-import React, { memo } from 'react';
-
-import { useTranslation } from 'next-i18next';
-
-import { SidebarContentsType } from '~/interfaces/ui';
-import { useCurrentSidebarContents } from '~/stores/ui';
-
-import CustomSidebarContentSkeleton from './CustomSidebarContentSkeleton';
-import PageTreeContentSkeleton from './PageTreeContentSkeleton';
-import RecentChangesContentSkeleton from './RecentChangesContentSkeleton';
-import TagContentSkeleton from './TagContentSkeleton';
-
-export const SidebarSkeleton = memo(() => {
-  const { t } = useTranslation();
-  const { data: currentSidebarContents } = useCurrentSidebarContents();
-
-  let Contents: () => JSX.Element;
-  let title: string;
-  switch (currentSidebarContents) {
-
-    case SidebarContentsType.RECENT:
-      Contents = RecentChangesContentSkeleton;
-      title = t('Recent Changes');
-      break;
-    case SidebarContentsType.CUSTOM:
-      Contents = CustomSidebarContentSkeleton;
-      title = t('CustomSidebar');
-      break;
-    case SidebarContentsType.TAG:
-      Contents = TagContentSkeleton;
-      title = t('Tags');
-      break;
-    case SidebarContentsType.TREE:
-    default:
-      Contents = PageTreeContentSkeleton;
-      title = t('Page Tree');
-      break;
-  }
-
-  return (
-    <div className={currentSidebarContents === SidebarContentsType.TAG ? 'px-4' : 'px-3'}>
-      <div className="grw-sidebar-content-header py-3">
-        <h3 className="mb-0">{title}</h3>
-      </div>
-      <Contents />
-    </div>
-  );
-});
-SidebarSkeleton.displayName = 'SidebarSkeleton';