rendering PageComment on SearchResultContent

packages/app/src/components/Page/RevisionRenderer.tsx

@@ -85,7 +85,6 @@ const logger = loggerFactory('components:Page:RevisionRenderer');
 type Props = {
   rendererOptions: RendererOptions,
   markdown: string,
-  pagePath: string,
   highlightKeywords?: string | string[],
   additionalClassName?: string,
 }
@@ -93,7 +92,7 @@ type Props = {
 const RevisionRenderer = React.memo((props: Props): JSX.Element => {
 
   const {
-    rendererOptions, markdown, pagePath, highlightKeywords, additionalClassName,
+    rendererOptions, markdown, highlightKeywords, additionalClassName,
   } = props;
 
   return (

packages/app/src/components/PageComment.tsx

@@ -7,7 +7,6 @@ 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';
 
@@ -44,8 +43,6 @@ export const PageComment: FC<PageCommentProps> = memo((props:PageCommentProps):
 
   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);
@@ -132,8 +129,8 @@ export const PageComment: FC<PageCommentProps> = memo((props:PageCommentProps):
   let commentTitleClasses = 'border-bottom py-3 mb-3';
   commentTitleClasses = titleAlign != null ? `${commentTitleClasses} text-${titleAlign}` : `${commentTitleClasses} text-center`;
 
-  if (commentsFromOldest == null || commentsExceptReply == null || rendererOptions == null || currentPagePath == null || currentPage == null) {
-    if (hideIfEmpty && comments?.length === 0) {
+  if (commentsFromOldest == null || commentsExceptReply == null || rendererOptions == null) {
+    if (hideIfEmpty) {
       return <></>;
     }
     return (
@@ -141,10 +138,6 @@ export const PageComment: FC<PageCommentProps> = memo((props:PageCommentProps):
     );
   }
 
-  if (currentPage.revision == null) {
-    return <></>;
-  }
-
   const generateCommentElement = (comment: ICommentHasId) => (
     <Comment
       comment={comment}
@@ -152,9 +145,6 @@ export const PageComment: FC<PageCommentProps> = memo((props:PageCommentProps):
       deleteBtnClicked={onClickDeleteButton}
       onComment={mutate}
       rendererOptions={rendererOptions}
-      currentPagePath={currentPagePath}
-      currentRevisionId={currentPage.revision._id}
-      currentRevisionCreatedAt={currentPage.revision.createdAt}
     />
   );
 
@@ -165,9 +155,6 @@ export const PageComment: FC<PageCommentProps> = memo((props:PageCommentProps):
       deleteBtnClicked={onClickDeleteButton}
       onComment={mutate}
       rendererOptions={rendererOptions}
-      currentPagePath={currentPagePath}
-      currentRevisionId={currentPage.revision._id}
-      currentRevisionCreatedAt={currentPage.revision.createdAt}
     />
   );
 

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

@@ -8,6 +8,7 @@ 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 FormattedDistanceDate from '../FormattedDistanceDate';
@@ -29,20 +30,19 @@ type CommentProps = {
   deleteBtnClicked: (comment: ICommentHasId) => void,
   onComment: () => void,
   rendererOptions: RendererOptions,
-  currentPagePath: string,
-  currentRevisionId: string,
-  currentRevisionCreatedAt: Date,
+  currentRevisionId?: string,
+  currentRevisionCreatedAt?: Date,
 }
 
 export const Comment = (props: CommentProps): JSX.Element => {
 
   const {
     comment, isReadOnly, deleteBtnClicked, onComment, rendererOptions,
-    currentPagePath, currentRevisionId, currentRevisionCreatedAt,
   } = props;
 
   const { t } = useTranslation();
   const { data: currentUser } = useCurrentUser();
+  const { data: currentPage } = useSWRxCurrentPage();
 
   const [markdown, setMarkdown] = useState('');
   const [isReEdit, setIsReEdit] = useState(false);
@@ -53,6 +53,8 @@ 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);
@@ -76,14 +78,17 @@ export const Comment = (props: CommentProps): JSX.Element => {
   const getRootClassName = (comment: ICommentHasId) => {
     let className = 'page-comment flex-column';
 
-    if (comment.revision === currentRevisionId) {
-      className += ' page-comment-current';
-    }
-    else if (comment.createdAt.getTime() > currentRevisionCreatedAt.getTime()) {
-      className += ' page-comment-newer';
-    }
-    else {
-      className += ' page-comment-older';
+    // Conditional branch when called from SearchResultContext
+    if (currentRevisionId != null && currentRevisionCreatedAt != null) {
+      if (comment.revision === currentRevisionId) {
+        className += ' page-comment-current';
+      }
+      else if (comment.createdAt.getTime() > currentRevisionCreatedAt.getTime()) {
+        className += ' page-comment-newer';
+      }
+      else {
+        className += ' page-comment-older';
+      }
     }
 
     if (isCurrentUserEqualsToAuthor()) {
@@ -107,7 +112,6 @@ export const Comment = (props: CommentProps): JSX.Element => {
         rendererOptions={rendererOptions}
         markdown={markdown}
         additionalClassName="comment"
-        pagePath={currentPagePath}
       />
     );
   };

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

@@ -19,16 +19,12 @@ type ReplycommentsProps = {
   deleteBtnClicked: (comment: ICommentHasId) => void,
   onComment: () => void,
   rendererOptions: RendererOptions,
-  currentPagePath: string,
-  currentRevisionId: string,
-  currentRevisionCreatedAt: Date,
 }
 
 export const ReplyComments = (props: ReplycommentsProps): JSX.Element => {
 
   const {
     isReadOnly, replyList, deleteBtnClicked, onComment, rendererOptions,
-    currentPagePath, currentRevisionId, currentRevisionCreatedAt,
   } = props;
 
   const { data: isAllReplyShown } = useIsAllReplyShown();
@@ -44,9 +40,6 @@ export const ReplyComments = (props: ReplycommentsProps): JSX.Element => {
           deleteBtnClicked={deleteBtnClicked}
           onComment={onComment}
           rendererOptions={rendererOptions}
-          currentPagePath={currentPagePath}
-          currentRevisionId={currentRevisionId}
-          currentRevisionCreatedAt={currentRevisionCreatedAt}
         />
       </div>
     );

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

@@ -19,7 +19,6 @@ import { useDescendantsPageListForCurrentPathTermManager, usePageTreeTermManager
 import { useSearchResultOptions } from '~/stores/renderer';
 import { useFullTextSearchTermManager } from '~/stores/search';
 
-
 import { AdditionalMenuItemsRendererProps, ForceHideMenuItems } from '../Common/Dropdown/PageItemControl';
 import { GrowiSubNavigationProps } from '../Navbar/GrowiSubNavigation';
 import { SubNavButtonsProps } from '../Navbar/SubNavButtons';
@@ -223,10 +222,10 @@ export const SearchResultContent: FC<Props> = (props: Props) => {
           hideIfEmpty
         />
         <PageContentFooter
-          createdAt={new Date(pageWithMeta.data.createdAt)}
-          updatedAt={new Date(pageWithMeta.data.updatedAt)}
-          creator={pageWithMeta.data.creator}
-          revisionAuthor={pageWithMeta.data.lastUpdateUser}
+          createdAt={new Date(page.createdAt)}
+          updatedAt={new Date(page.updatedAt)}
+          creator={page.creator}
+          revisionAuthor={page.lastUpdateUser}
         />
       </div>
     </div>