update props

packages/app/src/components/PageComment.tsx

@@ -5,15 +5,15 @@ import React, {
 import { Nullable } from '@growi/core';
 import { Button } from 'reactstrap';
 
-
 import { toastError } from '~/client/util/apiNotification';
 import { apiPost } from '~/client/util/apiv1-client';
+import { useCurrentPagePath } from '~/stores/context';
+import { useSWRxCurrentPage } from '~/stores/page';
 import { useCommentPreviewOptions } from '~/stores/renderer';
 
 import { ICommentHasId, ICommentHasIdList } from '../interfaces/comment';
 import { useSWRxPageComment } from '../stores/comment';
 
-
 import { Comment } from './PageComment/Comment';
 import CommentEditor from './PageComment/CommentEditor';
 import DeleteCommentModal from './PageComment/DeleteCommentModal';
@@ -35,6 +35,8 @@ export const PageComment:FC<Props> = memo((props:Props):JSX.Element => {
 
   const { data: comments, mutate } = useSWRxPageComment(pageId);
   const { data: rendererOptions } = useCommentPreviewOptions();
+  const { data: currentPage } = useSWRxCurrentPage();
+  const { data: currentPagePath } = useCurrentPagePath();
 
   const [commentToBeDeleted, setCommentToBeDeleted] = useState<ICommentHasId | null>(null);
   const [isDeleteConfirmModalShown, setIsDeleteConfirmModalShown] = useState<boolean>(false);
@@ -109,6 +111,7 @@ export const PageComment:FC<Props> = memo((props:Props):JSX.Element => {
   }, [commentToBeDeleted, onDeleteCommentAfterOperation]);
 
   const generateAllRepliesElement = (replyComments: ICommentHasIdList) => (
+    // TODO: need page props path
     <ReplayComments
       replyList={replyComments}
       deleteBtnClicked={onClickDeleteButton}
@@ -136,13 +139,19 @@ export const PageComment:FC<Props> = memo((props:Props):JSX.Element => {
   }
 
   const generateCommentInnerElement = (comment: ICommentHasId) => (
-    <Comment
-      rendererOptions={rendererOptions}
-      deleteBtnClicked={onClickDeleteButton}
-      comment={comment}
-      onComment={mutate}
-      isReadOnly={isReadOnly}
-    />
+    currentPage != null && (
+      <Comment
+        rendererOptions={rendererOptions}
+        deleteBtnClicked={onClickDeleteButton}
+        comment={comment}
+        onComment={mutate}
+        isReadOnly={isReadOnly}
+        page={currentPagePath}
+        currentRevisionId={currentPage.revision._id}
+        currentRevisionCreatedAt={currentPage.revision.createdAt}
+      />
+    )
+
   );
 
   let commentTitleClasses = 'border-bottom py-3 mb-3';

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

@@ -7,10 +7,7 @@ import { useTranslation } from 'next-i18next';
 import { UncontrolledTooltip } from 'reactstrap';
 
 import { RendererOptions } from '~/services/renderer/renderer';
-import {
-  useCurrentUser, useRevisionId, useRevisionCreatedAt,
-} from '~/stores/context';
-import { useSWRxCurrentPage } from '~/stores/page';
+import { useCurrentUser } from '~/stores/context';
 
 import { ICommentHasId } from '../../interfaces/comment';
 import FormattedDistanceDate from '../FormattedDistanceDate';
@@ -27,17 +24,17 @@ type CommentProps = {
   deleteBtnClicked: (comment: ICommentHasId) => void,
   onComment: () => void,
   rendererOptions: RendererOptions,
+  page: any,
+  currentRevisionId: any, // TODO: check type
+  currentRevisionCreatedAt: any, // TODO: check type
 }
 
 export const Comment = (props: CommentProps): JSX.Element => {
   const {
-    comment, isReadOnly, deleteBtnClicked, onComment, rendererOptions,
+    comment, isReadOnly, deleteBtnClicked, onComment, rendererOptions, page, currentRevisionId, currentRevisionCreatedAt,
   } = props;
   const { t } = useTranslation();
-  const { data: currentPage }: any = useSWRxCurrentPage(); // TODO: check currentPage type
   const { data: currentUser } = useCurrentUser();
-  const { data: revisionId } = useRevisionId();
-  const { data: revisionCreatedAt } = useRevisionCreatedAt();
 
   const [markdown, setMarkdown] = useState('');
   const [isReEdit, setIsReEdit] = useState(false);
@@ -50,15 +47,14 @@ export const Comment = (props: CommentProps): JSX.Element => {
   const isEdited = createdAt < updatedAt;
 
   useEffect(() => {
-
     setMarkdown(comment.comment);
 
     const isCurrentRevision = () => {
-      return comment.revision === revisionId;
+      return comment.revision === currentRevisionId;
     };
     isCurrentRevision();
 
-  }, [comment, revisionId]);
+  }, [comment, currentRevisionId]);
 
   const isCurrentUserEqualsToAuthor = () => {
     const { creator }: any = comment;
@@ -72,10 +68,10 @@ export const Comment = (props: CommentProps): JSX.Element => {
   const getRootClassName = (comment) => {
     let className = 'page-comment flex-column';
 
-    if (comment.revision === revisionId) {
+    if (comment.revision === currentRevisionId) {
       className += ' page-comment-current';
     }
-    else if (Date.parse(comment.createdAt) / 1000 > revisionCreatedAt) {
+    else if (Date.parse(comment.createdAt) / 1000 > currentRevisionCreatedAt) {
       className += ' page-comment-newer';
     }
     else {
@@ -99,7 +95,12 @@ export const Comment = (props: CommentProps): JSX.Element => {
 
   const renderRevisionBody = () => {
     return (
-      <RevisionRenderer rendererOptions={rendererOptions} markdown={markdown} additionalClassName="comment" pagePath={currentPage} />
+      <RevisionRenderer
+        rendererOptions={rendererOptions}
+        markdown={markdown}
+        additionalClassName="comment"
+        pagePath={page}
+      />
     );
   };