refactor Comments

packages/app/src/components/Comments.tsx

@@ -1,11 +1,17 @@
 import React from 'react';
 
+import dynamic from 'next/dynamic';
+
 import { PageComment } from '~/components/PageComment';
-import { useCommentPreviewOptions } from '~/stores/renderer';
+import { useSWRxPageComment } from '~/stores/comment';
 
 import { useIsTrashPage } from '../stores/context';
 
-import { CommentEditorLazyRenderer } from './PageComment/CommentEditorLazyRenderer';
+import { CommentEditorProps } from './PageComment/CommentEditor';
+
+
+const CommentEditor = dynamic<CommentEditorProps>(() => import('./PageComment/CommentEditor').then(mod => mod.CommentEditor), { ssr: false });
+
 
 type CommentsProps = {
   pageId?: string,
@@ -15,11 +21,10 @@ export const Comments = (props: CommentsProps): JSX.Element => {
 
   const { pageId } = props;
 
-  const { data: rendererOptions } = useCommentPreviewOptions();
+  const { mutate } = useSWRxPageComment(pageId);
   const { data: isDeleted } = useIsTrashPage();
 
-  // TODO: Implement or refactor Skelton if server-side rendering
-  if (rendererOptions == null || isDeleted == null) {
+  if (pageId == null) {
     return <></>;
   }
 
@@ -33,7 +38,11 @@ export const Comments = (props: CommentsProps): JSX.Element => {
           </div>
           { !isDeleted && (
             <div id="page-comment-write">
-              <CommentEditorLazyRenderer pageId={pageId} rendererOptions={rendererOptions} />
+              <CommentEditor
+                pageId={pageId}
+                isForNewComment
+                onCommentButtonClicked={mutate}
+              />
             </div>
           )}
         </div>

packages/app/src/components/PageComment.tsx

@@ -29,7 +29,7 @@ const DeleteCommentModal = dynamic<DeleteCommentModalProps>(
 
 
 type PageCommentProps = {
-  pageId?: string,
+  pageId: string,
   isReadOnly: boolean,
   titleAlign?: 'center' | 'left' | 'right',
   highlightKeywords?: string[],
@@ -207,7 +207,7 @@ export const PageComment: FC<PageCommentProps> = memo((props:PageCommentProps):
                     )}
                     {(!isReadOnly && showEditorIds.has(comment._id)) && (
                       <CommentEditor
-                        rendererOptions={rendererOptions}
+                        pageId={pageId}
                         replyTo={comment._id}
                         onCancelButtonClicked={() => {
                           removeShowEditorId(comment._id);

packages/app/src/components/PageComment/CommentEditor.module.scss

@@ -30,14 +30,9 @@
     }
   }
 
-  // TODO: Refacotr Soft-coding
-  .page-comment-commenteditorlazyrenderer-body-skelton {
-    position: relative;
-    padding: 2.258rem 2rem;
-    margin-left: 4.5em;
-    line-height: 1.5;
-    @include bs.media-breakpoint-down(xs) {
-      margin-left: 3.5em;
-    }
+  .page-comment-editor-skelton {
+    height: 300px;
+    margin-top: 30px;
+    margin-bottom: 20px;
   }
 }

packages/app/src/components/PageComment/CommentEditor.tsx

@@ -3,6 +3,7 @@ import React, {
 } from 'react';
 
 import { UserPicture } from '@growi/ui';
+import dynamic from 'next/dynamic';
 import {
   Button, TabContent, TabPane,
 } from 'reactstrap';
@@ -10,24 +11,30 @@ import * as toastr from 'toastr';
 
 import { apiPostForm } from '~/client/util/apiv1-client';
 import { IEditorMethods } from '~/interfaces/editor-methods';
-import { RendererOptions } from '~/services/renderer/renderer';
 import { useSWRxPageComment } from '~/stores/comment';
 import {
-  useCurrentPagePath, useCurrentPageId, useCurrentUser, useRevisionId, useIsSlackConfigured,
+  useCurrentPagePath, useCurrentUser, useRevisionId, useIsSlackConfigured,
   useIsUploadableFile, useIsUploadableImage,
 } from '~/stores/context';
 import { useSWRxSlackChannels, useIsSlackEnabled } from '~/stores/editor';
 
 import { CustomNavTab } from '../CustomNavigation/CustomNav';
 import NotAvailableForGuest from '../NotAvailableForGuest';
-import Editor from '../PageEditor/Editor';
-import { SlackNotification } from '../SlackNotification';
+import { Skelton } from '../Skelton';
 
-import { CommentPreview } from './CommentPreview';
 
 import styles from './CommentEditor.module.scss';
 
 
+const SlackNotification = dynamic(() => import('../SlackNotification').then(mod => mod.SlackNotification), { ssr: false });
+const CommentPreview = dynamic(() => import('./CommentPreview').then(mod => mod.CommentPreview), { ssr: false });
+const Editor = dynamic(() => import('../PageEditor/Editor'),
+  {
+    ssr: false,
+    loading: () => <Skelton additionalClass="grw-skelton page-comment-editor-skelton" />,
+  });
+
+
 const navTabMapping = {
   comment_editor: {
     Icon: () => <i className="icon-settings" />,
@@ -42,7 +49,7 @@ const navTabMapping = {
 };
 
 export type CommentEditorProps = {
-  rendererOptions: RendererOptions,
+  pageId: string,
   isForNewComment?: boolean,
   replyTo?: string,
   currentCommentId?: string,
@@ -55,14 +62,13 @@ export type CommentEditorProps = {
 export const CommentEditor = (props: CommentEditorProps): JSX.Element => {
 
   const {
-    rendererOptions, isForNewComment, replyTo,
+    pageId, isForNewComment, replyTo,
     currentCommentId, commentBody, onCancelButtonClicked, onCommentButtonClicked,
   } = props;
 
   const { data: currentUser } = useCurrentUser();
   const { data: currentPagePath } = useCurrentPagePath();
-  const { data: currentPageId } = useCurrentPageId();
-  const { update: updateComment, post: postComment } = useSWRxPageComment(currentPageId);
+  const { update: updateComment, post: postComment } = useSWRxPageComment(pageId);
   const { data: revisionId } = useRevisionId();
   const { data: isSlackEnabled, mutate: mutateIsSlackEnabled } = useIsSlackEnabled();
   const { data: slackChannelsData } = useSWRxSlackChannels(currentPagePath);
@@ -169,7 +175,6 @@ export const CommentEditor = (props: CommentEditorProps): JSX.Element => {
     if (editorRef.current == null) { return }
 
     const pagePath = currentPagePath;
-    const pageId = currentPageId;
     const endpoint = '/attachments.add';
     const formData = new FormData();
     formData.append('file', file);
@@ -195,7 +200,7 @@ export const CommentEditor = (props: CommentEditorProps): JSX.Element => {
     finally {
       editorRef.current.terminateUploadingState();
     }
-  }, [apiErrorHandler, currentPageId, currentPagePath]);
+  }, [apiErrorHandler, currentPagePath, pageId]);
 
   const getCommentHtml = useCallback(() => {
     if (currentPagePath == null) {
@@ -204,12 +209,11 @@ export const CommentEditor = (props: CommentEditorProps): JSX.Element => {
 
     return (
       <CommentPreview
-        rendererOptions={rendererOptions}
         markdown={comment}
         path={currentPagePath}
       />
     );
-  }, [currentPagePath, comment, rendererOptions]);
+  }, [currentPagePath, comment]);
 
   const renderBeforeReady = useCallback((): JSX.Element => {
     return (

packages/app/src/components/PageComment/CommentEditorLazyRenderer.tsx

@@ -1,47 +0,0 @@
-import React from 'react';
-
-import dynamic from 'next/dynamic';
-
-import { RendererOptions } from '~/services/renderer/renderer';
-
-import { useSWRxPageComment } from '../../stores/comment';
-import { Skelton } from '../Skelton';
-
-import { CommentEditorProps } from './CommentEditor';
-
-import CommentEditorStyles from './CommentEditor.module.scss';
-
-const CommentEditor = dynamic<CommentEditorProps>(() => import('./CommentEditor').then(mod => mod.CommentEditor),
-  {
-    ssr: false,
-    loading: () => <div className={`${CommentEditorStyles['comment-editor-styles']} form page-comment-form`}>
-      <div className='comment-form'>
-        <div className='comment-form-user'>
-          <Skelton additionalClass='rounded-circle picture' roundedPill />
-        </div>
-        <Skelton additionalClass="page-comment-commenteditorlazyrenderer-body-skelton grw-skelton" />
-      </div>
-    </div>,
-  });
-
-type Props = {
-  pageId?: string,
-  rendererOptions: RendererOptions,
-}
-
-export const CommentEditorLazyRenderer = (props: Props): JSX.Element => {
-
-  const { pageId, rendererOptions } = props;
-
-  const { mutate } = useSWRxPageComment(pageId);
-
-  return (
-    <CommentEditor
-      rendererOptions={rendererOptions}
-      isForNewComment
-      replyTo={undefined}
-      onCommentButtonClicked={mutate}
-    />
-  );
-
-};

packages/app/src/components/PageComment/CommentPreview.module.scss

@@ -0,0 +1,3 @@
+.grw-comment-preview {
+  min-height: 350px;
+}

packages/app/src/components/PageComment/CommentPreview.tsx

@@ -1,20 +1,28 @@
-import { RendererOptions } from '~/services/renderer/renderer';
+import { useCommentPreviewOptions } from '~/stores/renderer';
 
 import RevisionRenderer from '../Page/RevisionRenderer';
 
 
+import styles from './CommentPreview.module.scss';
+
+
 type CommentPreviewPorps = {
-  rendererOptions: RendererOptions,
   markdown: string,
   path: string,
 }
 
 export const CommentPreview = (props: CommentPreviewPorps): JSX.Element => {
 
-  const { rendererOptions, markdown, path } = props;
+  const { markdown, path } = props;
+
+  const { data: rendererOptions } = useCommentPreviewOptions();
+
+  if (rendererOptions == null) {
+    return <></>;
+  }
 
   return (
-    <div className="page-comment-preview-body">
+    <div className={`grw-comment-preview ${styles['grw-comment-preview']}`}>
       <RevisionRenderer
         rendererOptions={rendererOptions}
         markdown={markdown}