add hideIfEmpty option

packages/app/src/components/PageComment.tsx

@@ -22,13 +22,14 @@ type Props = {
   isReadOnly : boolean,
   titleAlign?: 'center' | 'left' | 'right',
   highlightKeywords?:string[],
+  hideIfEmpty?: boolean,
 }
 
 
 const PageComment:FC<Props> = memo((props:Props):JSX.Element => {
 
   const {
-    appContainer, pageId, highlightKeywords, isReadOnly, titleAlign,
+    appContainer, pageId, highlightKeywords, isReadOnly, titleAlign, hideIfEmpty,
   } = props;
 
   const { data: comments, mutate } = useSWRxPageComment(pageId);
@@ -55,8 +56,6 @@ const PageComment:FC<Props> = memo((props:Props):JSX.Element => {
     return highlightedComment;
   }, [highlightKeywords]);
 
-  useEffect(() => { mutate() }, [pageId, mutate]);
-
   useEffect(() => {
 
     if (comments != null) {
@@ -137,6 +136,10 @@ const PageComment:FC<Props> = memo((props:Props):JSX.Element => {
 
   if (commentsFromOldest == null || commentsExceptReply == null) return <></>;
 
+  if (hideIfEmpty && comments?.length === 0) {
+    return <></>;
+  }
+
   let commentTitleClasses = 'border-bottom py-3 mb-3';
   commentTitleClasses = titleAlign != null ? `${commentTitleClasses} text-${titleAlign}` : `${commentTitleClasses} text-center`;
 

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

@@ -239,7 +239,7 @@ Comment.propTypes = {
 };
 
 const CommentWrapperFC = (props) => {
-  const { t } = useTranslatiion();
+  const { t } = useTranslation();
   return <Comment t={t} {...props} />
 }
 

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

@@ -218,7 +218,7 @@ export const SearchResultContent: FC<Props> = (props: Props) => {
           revisionId={page.revision}
           highlightKeywords={highlightKeywords}
         />
-        <PageComment appContainer={appContainer} pageId={page._id} isReadOnly highlightKeywords={highlightKeywords} />
+        <PageComment appContainer={appContainer} pageId={page._id} highlightKeywords={highlightKeywords} isReadOnly hideIfEmpty />
         <PageContentFooter
           createdAt={new Date(pageWithMeta.data.createdAt)}
           updatedAt={new Date(pageWithMeta.data.updatedAt)}