update PageContentFooter

packages/app/src/components/MySkelton.tsx

@@ -1,18 +1,18 @@
-import React from 'react';
+// import React from 'react';
 
-import ContentLoader from 'react-content-loader';
+// import ContentLoader from 'react-content-loader';
 
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-export const MySkelton = (props: JSX.IntrinsicAttributes) => (
-  <ContentLoader
-    speed={2}
-    width={400}
-    height={160}
-    viewBox="0 0 400 160"
-    backgroundColor="#f3f3f3"
-    foregroundColor="#ecebeb"
-    {...props}
-  >
-    <rect x="0" y="72" rx="3" ry="3" width="380" height="6" />
-  </ContentLoader>
-);
+// // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+// export const MySkelton = (props: JSX.IntrinsicAttributes) => (
+//   <ContentLoader
+//     speed={2}
+//     width={400}
+//     height={160}
+//     viewBox="0 0 400 160"
+//     backgroundColor="#f3f3f3"
+//     foregroundColor="#ecebeb"
+//     {...props}
+//   >
+//     <rect x="0" y="72" rx="3" ry="3" width="380" height="6" />
+//   </ContentLoader>
+// );

packages/app/src/components/PageContentFooter.tsx

@@ -1,42 +1,30 @@
-import React, { FC, memo } from 'react';
+import React, { memo } from 'react';
 
-import { Nullable, Ref } from '@growi/core';
 import dynamic from 'next/dynamic';
 
-import { MySkelton } from '~/components/MySkelton';
+import {
+  useCurrentCreatedAt, useCurrentUpdatedAt, useCreator, useRevisionAuthor,
+} from '../stores/context';
 
-import { IUser } from '../interfaces/user';
+import { Skelton } from './Skelton';
 
+export const PageContentFooter = memo((): JSX.Element => {
 
-const AuthorInfo = dynamic(() => import('./Navbar/AuthorInfo'), { ssr: false });
+  const AuthorInfo = dynamic(() => import('./Navbar/AuthorInfo'), { ssr: false, loading: () => <p><Skelton width={300} height={20} /></p> });
 
-type Props = {
-  createdAt: Nullable<Date> | undefined, // TODO: check createdAt type
-  updatedAt: Nullable<Date> | undefined, // TODO: check updatedAt type
-  creator: any,
-  revisionAuthor: Ref<IUser>,
-}
-
-export const PageContentFooter:FC<Props> = memo((props:Props):JSX.Element => {
-  const {
-    createdAt, updatedAt, creator, revisionAuthor,
-  } = props;
+  const { data: createdAt } = useCurrentCreatedAt();
+  const { data: updatedAt } = useCurrentUpdatedAt();
+  const { data: creator } = useCreator();
+  const { data: revisionAuthor } = useRevisionAuthor();
 
   return (
     <div className="page-content-footer py-4 d-edit-none d-print-none">
       <div className="grw-container-convertible">
         <div className="page-meta">
-          {createdAt === null || updatedAt === null ? (
-            <>
-              <MySkelton />
-              <MySkelton />
-            </>
-          ) : (
-            <>
-              <AuthorInfo user={creator as IUser} date={createdAt} mode="create" locate="footer" />
-              <AuthorInfo user={revisionAuthor as IUser} date={updatedAt} mode="update" locate="footer" />
-            </>
-          )}
+          <>
+            <AuthorInfo user={creator} date={createdAt} mode="create" locate="footer" />
+            <AuthorInfo user={revisionAuthor} date={updatedAt} mode="update" locate="footer" />
+          </>
         </div>
       </div>
     </div>

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

@@ -250,10 +250,10 @@ const GrowiPage: NextPage<Props> = (props: Props) => {
   useCurrentPathname(props.currentPathname);
   useEditingMarkdown(pageWithMeta?.data.revision.body);
 
-  const { data: createdAt } = useCurrentCreatedAt(pageWithMeta?.data.createdAt);
-  const { data: updatedAt } = useCurrentUpdatedAt(pageWithMeta?.data.updatedAt);
-  const { data: creator } = useCreator(pageWithMeta?.data.creator);
-  const { data: revisionAuthor } = useRevisionAuthor(pageWithMeta?.data.revision.author);
+  useCurrentCreatedAt(pageWithMeta?.data.createdAt);
+  useCurrentUpdatedAt(pageWithMeta?.data.updatedAt);
+  useCreator(pageWithMeta?.data.creator);
+  useRevisionAuthor(pageWithMeta?.data.revision.author);
 
   // sync pathname by Shallow Routing https://nextjs.org/docs/routing/shallow-routing
   useEffect(() => {
@@ -332,12 +332,7 @@ const GrowiPage: NextPage<Props> = (props: Props) => {
         <footer>
           {/* <PageComments /> */}
           PageComments
-          <PageContentFooter
-            createdAt={new Date(createdAt)}
-            updatedAt={new Date(updatedAt)}
-            creator={creator}
-            revisionAuthor={revisionAuthor}
-          />
+          <PageContentFooter />
         </footer>
 
         <UnsavedAlertDialog />

packages/app/src/stores/context.tsx

@@ -52,6 +52,10 @@ export const useRevisionId = (initialData?: Nullable<any>): SWRResponse<Nullable
   return useStaticSWR<Nullable<any>, Error>('revisionId', initialData);
 };
 
+export const useRevisionAuthor = (initialData?: Nullable<IUser>): SWRResponse<Nullable<IUser>, Error> => {
+  return useStaticSWR<Nullable<IUser>, Error>('revisionAuthor', initialData);
+};
+
 export const useCurrentPagePath = (initialData?: Nullable<string>): SWRResponse<Nullable<string>, Error> => {
   return useStaticSWR<Nullable<string>, Error>('currentPagePath', initialData);
 };
@@ -64,10 +68,18 @@ export const useCurrentPageId = (initialData?: Nullable<string>): SWRResponse<Nu
   return useStaticSWR<Nullable<string>, Error>('currentPageId', initialData);
 };
 
+export const useCreator = (initialData?: Nullable<IUser>): SWRResponse<Nullable<IUser>, Error> => {
+  return useStaticSWR<Nullable<IUser>, Error>('creator', initialData);
+};
+
 export const useRevisionCreatedAt = (initialData?: Nullable<any>): SWRResponse<Nullable<any>, Error> => {
   return useStaticSWR<Nullable<any>, Error>('revisionCreatedAt', initialData);
 };
 
+export const useCurrentCreatedAt = (initialData?: Nullable<Date>): SWRResponse<Nullable<Date>, Error> => {
+  return useStaticSWR<Nullable<Date>, Error>('createdAt', initialData);
+};
+
 export const useCurrentUpdatedAt = (initialData?: Nullable<Date>): SWRResponse<Nullable<Date>, Error> => {
   return useStaticSWR<Nullable<Date>, Error>('updatedAt', initialData);
 };