Quellcode durchsuchen

apply nextjs to PagecontentFooter

jam411 vor 3 Jahren
Ursprung
Commit
afdb49cba0
1 geänderte Dateien mit 19 neuen und 9 gelöschten Zeilen
  1. 19 9
      packages/app/src/components/PageContentFooter.tsx

+ 19 - 9
packages/app/src/components/PageContentFooter.tsx

@@ -1,19 +1,22 @@
 import React, { FC, memo } from 'react';
 import React, { FC, memo } from 'react';
 
 
-import { Ref } from '@growi/core';
+import { Nullable, Ref } from '@growi/core';
+import dynamic from 'next/dynamic';
+
+import { MySkelton } from '~/components/MySkelton';
 
 
 import { IUser } from '../interfaces/user';
 import { IUser } from '../interfaces/user';
 
 
-import AuthorInfo from './Navbar/AuthorInfo';
+const AuthorInfo = dynamic(() => import('./Navbar/AuthorInfo'), { ssr: false });
 
 
 type Props = {
 type Props = {
-  createdAt: Date,
-  updatedAt: Date,
+  createdAt: Nullable<Date> | undefined, // TODO: check createdAt type
+  updatedAt: Nullable<Date> | undefined, // TODO: check updatedAt type
   creator: any,
   creator: any,
   revisionAuthor: Ref<IUser>,
   revisionAuthor: Ref<IUser>,
 }
 }
 
 
-const PageContentFooter:FC<Props> = memo((props:Props):JSX.Element => {
+export const PageContentFooter:FC<Props> = memo((props:Props):JSX.Element => {
   const {
   const {
     createdAt, updatedAt, creator, revisionAuthor,
     createdAt, updatedAt, creator, revisionAuthor,
   } = props;
   } = props;
@@ -22,8 +25,17 @@ const PageContentFooter:FC<Props> = memo((props:Props):JSX.Element => {
     <div className="page-content-footer py-4 d-edit-none d-print-none">
     <div className="page-content-footer py-4 d-edit-none d-print-none">
       <div className="grw-container-convertible">
       <div className="grw-container-convertible">
         <div className="page-meta">
         <div className="page-meta">
-          <AuthorInfo user={creator as IUser} date={createdAt} mode="create" locate="footer" />
-          <AuthorInfo user={revisionAuthor as IUser} date={updatedAt} mode="update" locate="footer" />
+          {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" />
+            </>
+          )}
         </div>
         </div>
       </div>
       </div>
     </div>
     </div>
@@ -31,5 +43,3 @@ const PageContentFooter:FC<Props> = memo((props:Props):JSX.Element => {
 });
 });
 
 
 PageContentFooter.displayName = 'PageContentFooter';
 PageContentFooter.displayName = 'PageContentFooter';
-
-export default PageContentFooter;