Merge pull request #6477 from weseek/support/apply-nextjs-PageComment-html-files

support: PageComment html files apply nextjs

packages/app/src/components/Comments.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+import { PageComment } from '~/components/PageComment';
+import { useCommentPreviewOptions } from '~/stores/renderer';
+
+import { useIsTrashPage } from '../stores/context';
+
+import { CommentEditorLazyRenderer } from './PageComment/CommentEditorLazyRenderer';
+
+type CommentsProps = {
+  pageId?: string,
+}
+
+export const Comments = (props: CommentsProps): JSX.Element => {
+
+  const { pageId } = props;
+
+  const { data: rendererOptions } = useCommentPreviewOptions();
+  const { data: isDeleted } = useIsTrashPage();
+
+  // TODO: Implement or refactor Skelton if server-side rendering
+  if (rendererOptions == null || isDeleted == null) {
+    return <></>;
+  }
+
+  return (
+    // TODO: Check and refactor CSS import
+    <div className="page-comments-row mt-5 py-4 d-edit-none d-print-none">
+      <div className="container-lg">
+        <div className="page-comments">
+          <div id="page-comments-list" className="page-comments-list">
+            <PageComment pageId={pageId} isReadOnly={false} titleAlign="left" />
+          </div>
+          { !isDeleted && (
+            <div id="page-comment-write">
+              <CommentEditorLazyRenderer pageId={pageId} rendererOptions={rendererOptions} />
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+
+};

packages/app/src/components/PageComment.tsx

@@ -16,7 +16,6 @@ import { useSWRxPageComment } from '../stores/comment';
 
 import { Comment } from './PageComment/Comment';
 import { CommentEditorProps } from './PageComment/CommentEditor';
-import { CommentEditorLazyRenderer } from './PageComment/CommentEditorLazyRenderer';
 import { DeleteCommentModalProps } from './PageComment/DeleteCommentModal';
 import { ReplyComments } from './PageComment/ReplyComments';
 import { PageCommentSkelton } from './PageCommentSkelton';
@@ -142,6 +141,10 @@ export const PageComment: FC<PageCommentProps> = memo((props:PageCommentProps):
     );
   }
 
+  if (currentPage.revision == null) {
+    return <></>;
+  }
+
   const generateCommentElement = (comment: ICommentHasId) => (
     <Comment
       comment={comment}
@@ -170,7 +173,6 @@ export const PageComment: FC<PageCommentProps> = memo((props:PageCommentProps):
 
   return (
     <>
-      {/* TODO: Check the comment.html CSS */}
       <div className={`${styles['page-comment-styles']} page-comments-row comment-list`}>
         <div className="container-lg">
           <div className="page-comments">
@@ -221,13 +223,6 @@ export const PageComment: FC<PageCommentProps> = memo((props:PageCommentProps):
 
               })}
             </div>
-            {/* TODO: Check if identical-page */}
-            {(!isReadOnly) && (
-              <CommentEditorLazyRenderer
-                pageId={pageId}
-                rendererOptions={rendererOptions}
-              />
-            )}
           </div>
         </div>
       </div>

packages/app/src/components/PageContentFooter.tsx

@@ -15,7 +15,7 @@ export const PageContentFooter = memo((): JSX.Element => {
 
   const { data: page } = useSWRxCurrentPage();
 
-  if (page == null) {
+  if (page == null || page.revision == null) {
     return <></>;
   }
 

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

@@ -17,8 +17,8 @@ import Head from 'next/head';
 import { useRouter } from 'next/router';
 import superjson from 'superjson';
 
+import { Comments } from '~/components/Comments';
 import { PageAlerts } from '~/components/PageAlert/PageAlerts';
-import { PageComment } from '~/components/PageComment';
 // import { useTranslation } from '~/i18n';
 import { PageContentFooter } from '~/components/PageContentFooter';
 import { CrowiRequest } from '~/interfaces/crowi-request';
@@ -329,9 +329,44 @@ const GrowiPage: NextPage<Props> = (props: Props) => {
             </div> */}
           </div>
         </div>
-        <footer>
-          {/* <PageComments /> */}
-          <PageComment pageId={pageId} isReadOnly={false} titleAlign="left" />
+        {/* TODO: Check CSS import */}
+        <footer className="footer d-edit-none">
+          {/* TODO: Enable page_list.html */}
+          {/* TODO: Enable isIdenticalPathPage or useIdenticalPath */}
+          {/* { !props.isIdenticalPathPage && ( */}
+          <Comments pageId={pageId} />
+          {/* )} */}
+          {/* TODO: Create UsersHomePageFooter conponent */}
+          { isUsersHomePage(pageWithMeta?.data.path) && (
+            <div className="container-lg user-page-footer py-5">
+              <div className="grw-user-page-list-m d-edit-none">
+                <h2 id="bookmarks-list" className="grw-user-page-header border-bottom pb-2 mb-3">
+                  <i style={{ fontSize: '1.3em' }} className="fa fa-fw fa-bookmark-o"></i>
+                  Bookmarks
+                </h2>
+                <div id="user-bookmark-list" className="page-list">
+                  {/* TODO: No need page-list-container class ? */}
+                  <div className="page-list-container">
+                    {/* <BookmarkList userId={pageContainer.state.creator._id} /> */}
+                  </div>
+                </div>
+              </div>
+              <div className="grw-user-page-list-m mt-5 d-edit-none">
+                <h2 id="recently-created-list" className="grw-user-page-header border-bottom pb-2 mb-3">
+                  <i id="recent-created-icon" className="mr-1">
+                    {/* <RecentlyCreatedIcon /> */}
+                  </i>
+                  Recently Created
+                </h2>
+                <div id="user-created-list" className="page-list">
+                  {/* TODO: No need page-list-container class ? */}
+                  <div className="page-list-container">
+                    {/* <RecentCreated userId={pageContainer.state.creator._id} /> */}
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
           <PageContentFooter />
         </footer>
 

packages/app/src/server/views/layout-growi/widget/comments.html

@@ -1,14 +0,0 @@
-<div class="page-comments-row mt-5 py-4 d-edit-none d-print-none">
-  <div class="container-lg">
-
-    <div class="page-comments">
-      <div class="page-comments-list" id="page-comments-list"></div>
-
-      {% if page and not page.isDeleted() %}
-      <div id="page-comment-write"></div>
-      {% endif %}
-
-    </div>
-
-  </div>
-</div>