feat: update counts to exclude deleted comments

packages/components/src/ButtonShowReplies/ButtonShowReplies.tsx

@@ -1,4 +1,5 @@
 import { Button } from '../Button/Button'
+import { nonDeletedCommentsCount } from '../DiscussionTitle/DiscussionTitle'
 
 import type { IComment } from '../CommentItem/types'
 
@@ -12,12 +13,10 @@ export interface Props {
 export const ButtonShowReplies = (props: Props) => {
   const { creatorName, isShowReplies, replies, setIsShowReplies } = props
 
-  const length = replies && replies.length ? replies.length : 0
+  const count = nonDeletedCommentsCount(replies)
   const icon = isShowReplies ? 'arrow-full-up' : 'arrow-full-down'
 
-  const text = length
-    ? `${length} ${length === 1 ? 'reply' : 'replies'}`
-    : `Reply`
+  const text = count ? `${count} ${count === 1 ? 'reply' : 'replies'}` : `Reply`
 
   return (
     <Button

packages/components/src/CommentItem/CommentItem.tsx

@@ -93,7 +93,7 @@ export const CommentItem = (props: IProps) => {
       <Flex sx={{ gap: 2 }}>
         {_deleted && (
           <Box sx={{ marginBottom: 2 }}>
-            <Text sx={{ color: 'grey' }}>{DELETED_COMMENT}</Text>
+            <Text sx={{ color: 'grey' }}>[{DELETED_COMMENT}]</Text>
           </Box>
         )}
 

packages/components/src/DiscussionContainer/DiscussionContainer.tsx

@@ -60,7 +60,7 @@ export const DiscussionContainer = (props: IProps) => {
 
   return (
     <Flex sx={{ flexDirection: 'column', gap: 2 }}>
-      <DiscussionTitle length={comments.length} />
+      <DiscussionTitle comments={comments} />
 
       <CommentList
         supportReplies={supportReplies}

packages/components/src/DiscussionTitle/DiscussionTitle.stories.tsx

@@ -1,20 +1,24 @@
 import { DiscussionTitle } from './DiscussionTitle'
 
 import type { Meta, StoryFn } from '@storybook/react'
+import type { IComment } from '../CommentItem/types'
 
 export default {
   title: 'Components/DiscussionTitle',
   component: DiscussionTitle,
 } as Meta<typeof DiscussionTitle>
 
 export const NoComments: StoryFn<typeof DiscussionTitle> = () => (
-  <DiscussionTitle length={0} />
+  <DiscussionTitle comments={[]} />
 )
 
-export const OneComment: StoryFn<typeof DiscussionTitle> = () => (
-  <DiscussionTitle length={1} />
-)
+export const OneComment: StoryFn<typeof DiscussionTitle> = () => {
+  const comment = {} as IComment
 
-export const MultipleComments: StoryFn<typeof DiscussionTitle> = () => (
-  <DiscussionTitle length={45} />
-)
+  return <DiscussionTitle comments={[comment]} />
+}
+
+export const MultipleComments: StoryFn<typeof DiscussionTitle> = () => {
+  const comment = {} as IComment
+  return <DiscussionTitle comments={[comment, comment, comment]} />
+}

packages/components/src/DiscussionTitle/DiscussionTitle.test.tsx

@@ -34,6 +34,6 @@ describe('DiscussionTitle', () => {
       <MultipleComments {...(MultipleComments.args as IProps)} />,
     )
 
-    expect(getByText(`45 ${COMMENTS}`)).toBeInTheDocument()
+    expect(getByText(`3 ${COMMENTS}`)).toBeInTheDocument()
   })
 })

packages/components/src/DiscussionTitle/DiscussionTitle.tsx

@@ -1,23 +1,31 @@
 import { Heading } from 'theme-ui'
 
+import type { IComment } from '../CommentItem/types'
+
 export const NO_COMMENTS = 'Start the discussion'
 export const ONE_COMMENT = '1 Comment'
 export const COMMENTS = 'Comments'
 
 export interface IProps {
-  length: number
+  comments: IComment[]
+}
+
+export const nonDeletedCommentsCount = (comments: IComment[]) => {
+  return comments.filter(({ _deleted }) => _deleted !== true).length
 }
 
-export const DiscussionTitle = ({ length }: IProps) => {
+export const DiscussionTitle = ({ comments }: IProps) => {
+  const commentCount = nonDeletedCommentsCount(comments)
+
   const setTitle = () => {
-    if (length === 0) {
+    if (commentCount === 0) {
       return NO_COMMENTS
     }
-    if (length === 1) {
+    if (commentCount === 1) {
       return ONE_COMMENT
     }
 
-    return `${length} ${COMMENTS}`
+    return `${commentCount} ${COMMENTS}`
   }
 
   const title = setTitle()

src/common/DiscussionWrapper.tsx

@@ -4,6 +4,7 @@ import { useCommonStores } from 'src/common/hooks/useCommonStores'
 import { transformToUserComments } from 'src/common/transformToUserComments'
 import { MAX_COMMENT_LENGTH } from 'src/constants'
 import { logger } from 'src/logger'
+import { nonDeletedCommentsCount } from 'src/utils/nonDeletedCommentsCount'
 import { Text } from 'theme-ui'
 
 import { AuthWrapper } from './AuthWrapper'
@@ -47,7 +48,8 @@ export const DiscussionWrapper = (props: IProps) => {
       discussion.comments,
       discussionStore.activeUser,
     )
-    setTotalCommentsCount(comments.length)
+    const count = nonDeletedCommentsCount(comments)
+    setTotalCommentsCount(count)
 
     return setDiscussion({ ...discussion, comments })
   }

src/models/question.models.tsx

@@ -18,6 +18,7 @@ export namespace IQuestion {
     _createdBy: string
     _deleted: boolean
     subscribers?: UserIdList
+    commentCount?: number
   } & DBDoc &
     FormInput &
     ISharedFeatures

src/pages/Question/QuestionPage.tsx

@@ -57,6 +57,7 @@ export const QuestionPage = () => {
       })
 
       setQuestion(foundQuestion)
+      setTotalCommentsCount(foundQuestion.commentCount || totalCommentsCount)
       setIsLoading(false)
     }
 

src/stores/Discussions/discussionEvents.ts

@@ -1,6 +1,7 @@
 /* eslint-disable no-case-declarations */
 import { toJS } from 'mobx'
 import { logger } from 'src/logger'
+import { filterNonDeletedComments } from 'src/utils/filterNonDeletedComments'
 
 import type { IDiscussion, IResearch } from 'src/models'
 import type { DatabaseV2 } from '../databaseV2/DatabaseV2'
@@ -35,9 +36,13 @@ export const updateDiscussionMetadata = async (
     )
   }
 
-  const commentCount = comments.length
+  const nonDeletedComments = filterNonDeletedComments(comments)
+  const commentCount = nonDeletedComments.length
+
   const latestCommentDate =
-    commentCount > 0 ? calculateLastestCommentDate(comments) : undefined
+    commentCount > 0
+      ? calculateLastestCommentDate(nonDeletedComments)
+      : undefined
 
   switch (collectionName) {
     case 'research':

src/utils/filterNonDeletedComments.test.ts

@@ -0,0 +1,19 @@
+import { filterNonDeletedComments } from './filterNonDeletedComments'
+
+import type { IComment } from 'src/models'
+
+describe('nonDeletedCommentsCount', () => {
+  it('returns the full total when no comments are marked as deleted', () => {
+    const comments = [{ _id: '1' }, { _id: '2' }, { _id: '3' }] as IComment[]
+    expect(filterNonDeletedComments(comments)).toEqual(comments)
+  })
+
+  it('returns the reduced total when comments are marked as deleted', () => {
+    const comments = [
+      { _id: '1', _deleted: true },
+      { _id: '2', _deleted: true },
+      { _id: '3' },
+    ] as IComment[]
+    expect(filterNonDeletedComments(comments)).toEqual([comments[2]])
+  })
+})

src/utils/filterNonDeletedComments.ts

@@ -0,0 +1,5 @@
+import type { IComment } from 'src/models'
+
+export const filterNonDeletedComments = (comments: IComment[]): IComment[] => {
+  return comments.filter(({ _deleted }) => _deleted !== true)
+}

src/utils/nonDeletedCommentsCount.test.ts

@@ -0,0 +1,24 @@
+import '@testing-library/jest-dom/vitest'
+
+import { describe, expect, it } from 'vitest'
+
+import { nonDeletedCommentsCount } from './nonDeletedCommentsCount'
+
+import type { IComment } from 'src/models'
+
+describe('nonDeletedCommentsCount', () => {
+  it('returns the full total when no comments are marked as deleted', () => {
+    const comments = [{}, {}, {}, {}] as IComment[]
+    expect(nonDeletedCommentsCount(comments)).toEqual(4)
+  })
+
+  it('returns the reduced total when comments are marked as deleted', () => {
+    const comments = [
+      { _deleted: true },
+      { _deleted: true },
+      {},
+      {},
+    ] as IComment[]
+    expect(nonDeletedCommentsCount(comments)).toEqual(2)
+  })
+})

src/utils/nonDeletedCommentsCount.ts

@@ -0,0 +1,7 @@
+import { filterNonDeletedComments } from './filterNonDeletedComments'
+
+import type { IComment } from 'src/models'
+
+export const nonDeletedCommentsCount = (comments: IComment[]): number => {
+  return filterNonDeletedComments(comments).length
+}