corrections from FB

packages/app/src/components/Comments.tsx

@@ -1,22 +1,26 @@
 import React from 'react';
 
+import { IRevisionHasId } from '@growi/core';
+
 import { PageComment } from '~/components/PageComment';
 import { useCommentPreviewOptions } from '~/stores/renderer';
 
-import { useIsTrashPage } from '../stores/context';
+import { useIsTrashPage, useCurrentUser } from '../stores/context';
 
 import { CommentEditorLazyRenderer } from './PageComment/CommentEditorLazyRenderer';
 
 type CommentsProps = {
-  pageId?: string,
+  pageId: string,
+  revision: IRevisionHasId,
 }
 
 export const Comments = (props: CommentsProps): JSX.Element => {
 
-  const { pageId } = props;
+  const { pageId, revision } = props;
 
   const { data: rendererOptions } = useCommentPreviewOptions();
   const { data: isDeleted } = useIsTrashPage();
+  const { data: currentUser } = useCurrentUser();
 
   // TODO: Implement or refactor Skelton if server-side rendering
   if (rendererOptions == null || isDeleted == null) {
@@ -31,6 +35,8 @@ export const Comments = (props: CommentsProps): JSX.Element => {
           <div id="page-comments-list" className="page-comments-list">
             <PageComment
               pageId={pageId}
+              revision={revision}
+              currentUser={currentUser}
               isReadOnly={false}
               titleAlign="left"
               hideIfEmpty={false}
@@ -38,7 +44,10 @@ export const Comments = (props: CommentsProps): JSX.Element => {
           </div>
           { !isDeleted && (
             <div id="page-comment-write">
-              <CommentEditorLazyRenderer pageId={pageId} rendererOptions={rendererOptions} />
+              <CommentEditorLazyRenderer
+                pageId={pageId}
+                rendererOptions={rendererOptions}
+              />
             </div>
           )}
         </div>

packages/app/src/components/PageComment.tsx

@@ -2,6 +2,7 @@ import React, {
   FC, useEffect, useState, useMemo, memo, useCallback,
 } from 'react';
 
+import { IRevisionHasId } from '@growi/core';
 import dynamic from 'next/dynamic';
 import { Button } from 'reactstrap';
 
@@ -25,9 +26,10 @@ const DeleteCommentModal = dynamic<DeleteCommentModalProps>(
   () => import('./PageComment/DeleteCommentModal').then(mod => mod.DeleteCommentModal), { ssr: false },
 );
 
-
 export type PageCommentProps = {
   pageId?: string,
+  revision: string | IRevisionHasId,
+  currentUser: any,
   isReadOnly: boolean,
   titleAlign?: 'center' | 'left' | 'right',
   highlightKeywords?: string[],
@@ -37,7 +39,7 @@ export type PageCommentProps = {
 export const PageComment: FC<PageCommentProps> = memo((props:PageCommentProps): JSX.Element => {
 
   const {
-    pageId, highlightKeywords, isReadOnly, titleAlign, hideIfEmpty,
+    pageId, revision, currentUser, highlightKeywords, isReadOnly, titleAlign, hideIfEmpty,
   } = props;
 
   const { data: comments, mutate } = useSWRxPageComment(pageId);
@@ -137,9 +139,20 @@ export const PageComment: FC<PageCommentProps> = memo((props:PageCommentProps):
     );
   }
 
+  // Conditional for called PageComment from SearchResultContext
+  let revisionId = revision;
+  let revisionCreatedAt: Date;
+  if (typeof (revision) !== 'string') {
+    revisionId = revision._id;
+    revisionCreatedAt = revision.createdAt;
+  }
+
   const generateCommentElement = (comment: ICommentHasId) => (
     <Comment
       comment={comment}
+      revisionId={revisionId as string}
+      revisionCreatedAt={revisionCreatedAt}
+      currentUser={currentUser}
       isReadOnly={isReadOnly}
       deleteBtnClicked={onClickDeleteButton}
       onComment={mutate}
@@ -150,6 +163,9 @@ export const PageComment: FC<PageCommentProps> = memo((props:PageCommentProps):
   const generateReplyCommentsElement = (replyComments: ICommentHasIdList) => (
     <ReplyComments
       isReadOnly={isReadOnly}
+      revisionId={revisionId as string}
+      revisionCreatedAt={revisionCreatedAt}
+      currentUser={currentUser}
       replyList={replyComments}
       deleteBtnClicked={onClickDeleteButton}
       onComment={mutate}

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

@@ -7,10 +7,9 @@ import dynamic from 'next/dynamic';
 import { UncontrolledTooltip } from 'reactstrap';
 
 import { RendererOptions } from '~/services/renderer/renderer';
-import { useCurrentUser } from '~/stores/context';
-import { useSWRxCurrentPage } from '~/stores/page';
 
 import { ICommentHasId } from '../../interfaces/comment';
+import { IUser } from '../../interfaces/user';
 import FormattedDistanceDate from '../FormattedDistanceDate';
 import HistoryIcon from '../Icons/HistoryIcon';
 import RevisionRenderer from '../Page/RevisionRenderer';
@@ -23,26 +22,24 @@ import styles from './Comment.module.scss';
 
 const CommentEditor = dynamic<CommentEditorProps>(() => import('./CommentEditor').then(mod => mod.CommentEditor), { ssr: false });
 
-
 type CommentProps = {
   comment: ICommentHasId,
+  revisionId: string,
+  revisionCreatedAt: Date,
+  currentUser: IUser,
   isReadOnly: boolean,
   deleteBtnClicked: (comment: ICommentHasId) => void,
   onComment: () => void,
   rendererOptions: RendererOptions,
-  currentRevisionId?: string,
-  currentRevisionCreatedAt?: Date,
 }
 
 export const Comment = (props: CommentProps): JSX.Element => {
 
   const {
-    comment, isReadOnly, deleteBtnClicked, onComment, rendererOptions,
+    comment, revisionId, revisionCreatedAt, currentUser, isReadOnly, deleteBtnClicked, onComment, rendererOptions,
   } = props;
 
   const { t } = useTranslation();
-  const { data: currentUser } = useCurrentUser();
-  const { data: currentPage } = useSWRxCurrentPage();
 
   const [markdown, setMarkdown] = useState('');
   const [isReEdit, setIsReEdit] = useState(false);
@@ -53,22 +50,17 @@ export const Comment = (props: CommentProps): JSX.Element => {
   const createdAt = new Date(comment.createdAt);
   const updatedAt = new Date(comment.updatedAt);
   const isEdited = createdAt < updatedAt;
-  const currentRevisionId = currentPage?.revision._id;
-  const currentRevisionCreatedAt = currentPage?.revision.createdAt;
 
   useEffect(() => {
     setMarkdown(comment.comment);
-
     const isCurrentRevision = () => {
-      return comment.revision === currentRevisionId;
+      return comment.revision === revisionId;
     };
     isCurrentRevision();
-
-  }, [comment, currentRevisionId]);
+  }, [comment, revisionId]);
 
   const isCurrentUserEqualsToAuthor = () => {
     const { creator }: any = comment;
-
     if (creator == null || currentUser == null) {
       return false;
     }
@@ -79,11 +71,11 @@ export const Comment = (props: CommentProps): JSX.Element => {
     let className = 'page-comment flex-column';
 
     // Conditional for called from SearchResultContext
-    if (currentRevisionId != null && currentRevisionCreatedAt != null) {
-      if (comment.revision === currentRevisionId) {
+    if (revisionCreatedAt != null) {
+      if (comment.revision === revisionId) {
         className += ' page-comment-current';
       }
-      else if (comment.createdAt.getTime() > currentRevisionCreatedAt.getTime()) {
+      else if (comment.createdAt.getTime() > revisionCreatedAt.getTime()) {
         className += ' page-comment-newer';
       }
       else {
@@ -119,15 +111,12 @@ export const Comment = (props: CommentProps): JSX.Element => {
   const rootClassName = getRootClassName(comment);
   const commentBody = isMarkdown ? renderRevisionBody() : renderText(comment.comment);
   const revHref = `?revision=${comment.revision}`;
-
   const editedDateId = `editedDate-${comment._id}`;
-  const editedDateFormatted = isEdited
-    ? format(updatedAt, 'yyyy/MM/dd HH:mm')
-    : null;
+  const editedDateFormatted = isEdited ? format(updatedAt, 'yyyy/MM/dd HH:mm') : null;
 
   return (
     <div className={`${styles['comment-styles']}`}>
-      {(isReEdit && !isReadOnly) ? (
+      { (isReEdit && !isReadOnly) ? (
         <CommentEditor
           rendererOptions={rendererOptions}
           replyTo={undefined}
@@ -158,7 +147,7 @@ export const Comment = (props: CommentProps): JSX.Element => {
                   <span id={editedDateId}>&nbsp;(edited)</span>
                   <UncontrolledTooltip placement="bottom" fade={false} target={editedDateId}>{editedDateFormatted}</UncontrolledTooltip>
                 </>
-              )}
+              ) }
               <span className="ml-2">
                 <a id={`page-comment-revision-${commentId}`} className="page-comment-revision" href={revHref}>
                   <HistoryIcon />
@@ -168,7 +157,7 @@ export const Comment = (props: CommentProps): JSX.Element => {
                 </UncontrolledTooltip>
               </span>
             </div>
-            {(isCurrentUserEqualsToAuthor() && !isReadOnly) && (
+            { (isCurrentUserEqualsToAuthor() && !isReadOnly) && (
               <CommentControl
                 onClickDeleteBtn={deleteBtnClickedHandler}
                 onClickEditBtn={() => setIsReEdit(true)}
@@ -176,8 +165,7 @@ export const Comment = (props: CommentProps): JSX.Element => {
             ) }
           </div>
         </div>
-      )
-      }
+      ) }
     </div>
   );
 };

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

@@ -6,6 +6,7 @@ import { Collapse } from 'reactstrap';
 import { RendererOptions } from '~/services/renderer/renderer';
 
 import { ICommentHasId, ICommentHasIdList } from '../../interfaces/comment';
+import { IUser } from '../../interfaces/user';
 import { useIsAllReplyShown } from '../../stores/context';
 
 import { Comment } from './Comment';
@@ -15,6 +16,9 @@ import styles from './ReplyComments.module.scss';
 
 type ReplycommentsProps = {
   isReadOnly: boolean,
+  revisionId: string,
+  revisionCreatedAt: Date,
+  currentUser: IUser,
   replyList: ICommentHasIdList,
   deleteBtnClicked: (comment: ICommentHasId) => void,
   onComment: () => void,
@@ -24,7 +28,7 @@ type ReplycommentsProps = {
 export const ReplyComments = (props: ReplycommentsProps): JSX.Element => {
 
   const {
-    isReadOnly, replyList, deleteBtnClicked, onComment, rendererOptions,
+    isReadOnly, revisionId, revisionCreatedAt, currentUser, replyList, deleteBtnClicked, onComment, rendererOptions,
   } = props;
 
   const { data: isAllReplyShown } = useIsAllReplyShown();
@@ -36,6 +40,9 @@ export const ReplyComments = (props: ReplycommentsProps): JSX.Element => {
       <div key={reply._id} className={`${styles['page-comment-reply']} ml-4 ml-sm-5 mr-3`}>
         <Comment
           comment={reply}
+          revisionId={revisionId}
+          revisionCreatedAt={revisionCreatedAt}
+          currentUser={currentUser}
           isReadOnly={isReadOnly}
           deleteBtnClicked={deleteBtnClicked}
           onComment={onComment}

packages/app/src/components/SearchPage/SearchResultContent.tsx

@@ -12,6 +12,7 @@ import { smoothScrollIntoView } from '~/client/util/smooth-scroll';
 import { IPageToDeleteWithMeta, IPageToRenameWithMeta } from '~/interfaces/page';
 import { IPageWithSearchMeta } from '~/interfaces/search';
 import { OnDuplicatedFunction, OnRenamedFunction, OnDeletedFunction } from '~/interfaces/ui';
+import { useCurrentUser } from '~/stores/context';
 import {
   usePageDuplicateModal, usePageRenameModal, usePageDeleteModal,
 } from '~/stores/modal';
@@ -31,7 +32,6 @@ const RevisionLoader = dynamic(() => import('../Page/RevisionLoader'), { ssr: fa
 const PageComment = dynamic<PageCommentProps>(() => import('../PageComment').then(mod => mod.PageComment), { ssr: false });
 const PageContentFooter = dynamic<PageContentFooterProps>(() => import('../PageContentFooter').then(mod => mod.PageContentFooter), { ssr: false });
 
-
 type AdditionalMenuItemsProps = AdditionalMenuItemsRendererProps & {
   pageId: string,
   revisionId: string,
@@ -122,8 +122,8 @@ export const SearchResultContent: FC<Props> = (props: Props) => {
   const { open: openDuplicateModal } = usePageDuplicateModal();
   const { open: openRenameModal } = usePageRenameModal();
   const { open: openDeleteModal } = usePageDeleteModal();
-
   const { data: rendererOptions } = useSearchResultOptions();
+  const { data: currentUser } = useCurrentUser();
 
   const duplicateItemClickedHandler = useCallback(async(pageToDuplicate) => {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -194,7 +194,7 @@ export const SearchResultContent: FC<Props> = (props: Props) => {
         />
       </div>
     );
-  }, [page, SubNavButtons, showPageControlDropdown, forceHideMenuItems, duplicateItemClickedHandler, renameItemClickedHandler, deleteItemClickedHandler]);
+  }, [page, showPageControlDropdown, forceHideMenuItems, duplicateItemClickedHandler, renameItemClickedHandler, deleteItemClickedHandler]);
 
   // return if page or growiRenderer is null
   if (page == null || rendererOptions == null) return <></>;
@@ -219,6 +219,8 @@ export const SearchResultContent: FC<Props> = (props: Props) => {
         />
         <PageComment
           pageId={page._id}
+          revision={page.revision}
+          currentUser={currentUser}
           highlightKeywords={highlightKeywords}
           isReadOnly
           hideIfEmpty

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

@@ -327,7 +327,7 @@ const GrowiPage: NextPage<Props> = (props: Props) => {
           </div>
           { !props.isIdenticalPathPage && !props.isNotFound && (
             <footer className="footer d-edit-none">
-              { !isTopPagePath && (<Comments pageId={pageId} />) }
+              { !isTopPagePath && (<Comments pageId={pageId} revision={pageWithMeta?.data.revision} />) }
               { (pageWithMeta != null && isUsersHomePage(pageWithMeta.data.path)) && (
                 <UsersHomePageFooter creatorId={pageWithMeta.data.creator._id}/>
               ) }