From 2661e850893118537827bee111b6daf41fedf8ad Mon Sep 17 00:00:00 2001
From: Ben Furber <ben.furber@googlemail.com>
Date: Thu, 30 May 2024 14:08:25 +0100
Subject: [PATCH] feat: update counts to exclude deleted comments

---
 .../ButtonShowReplies/ButtonShowReplies.tsx   |  7 +++---
 .../src/CommentItem/CommentItem.tsx           |  2 +-
 .../DiscussionContainer.tsx                   |  2 +-
 .../DiscussionTitle.stories.tsx               | 18 ++++++++------
 .../DiscussionTitle/DiscussionTitle.test.tsx  |  2 +-
 .../src/DiscussionTitle/DiscussionTitle.tsx   | 18 ++++++++++----
 src/common/DiscussionWrapper.tsx              |  4 +++-
 src/models/question.models.tsx                |  1 +
 src/pages/Question/QuestionPage.tsx           |  1 +
 src/stores/Discussions/discussionEvents.ts    |  9 +++++--
 src/utils/filterNonDeletedComments.test.ts    | 19 +++++++++++++++
 src/utils/filterNonDeletedComments.ts         |  5 ++++
 src/utils/nonDeletedCommentsCount.test.ts     | 24 +++++++++++++++++++
 src/utils/nonDeletedCommentsCount.ts          |  7 ++++++
 14 files changed, 97 insertions(+), 22 deletions(-)
 create mode 100644 src/utils/filterNonDeletedComments.test.ts
 create mode 100644 src/utils/filterNonDeletedComments.ts
 create mode 100644 src/utils/nonDeletedCommentsCount.test.ts
 create mode 100644 src/utils/nonDeletedCommentsCount.ts

diff --git a/packages/components/src/ButtonShowReplies/ButtonShowReplies.tsx b/packages/components/src/ButtonShowReplies/ButtonShowReplies.tsx
index b6708cc1c2..ca8b0f14ea 100644
--- a/packages/components/src/ButtonShowReplies/ButtonShowReplies.tsx
+++ b/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
diff --git a/packages/components/src/CommentItem/CommentItem.tsx b/packages/components/src/CommentItem/CommentItem.tsx
index c08023d58e..4b9b02706a 100644
--- a/packages/components/src/CommentItem/CommentItem.tsx
+++ b/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>
         )}
 
diff --git a/packages/components/src/DiscussionContainer/DiscussionContainer.tsx b/packages/components/src/DiscussionContainer/DiscussionContainer.tsx
index 1c503818e7..57605b95d8 100644
--- a/packages/components/src/DiscussionContainer/DiscussionContainer.tsx
+++ b/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}
diff --git a/packages/components/src/DiscussionTitle/DiscussionTitle.stories.tsx b/packages/components/src/DiscussionTitle/DiscussionTitle.stories.tsx
index 100ba6b02d..d05e9f3ce1 100644
--- a/packages/components/src/DiscussionTitle/DiscussionTitle.stories.tsx
+++ b/packages/components/src/DiscussionTitle/DiscussionTitle.stories.tsx
@@ -1,6 +1,7 @@
 import { DiscussionTitle } from './DiscussionTitle'
 
 import type { Meta, StoryFn } from '@storybook/react'
+import type { IComment } from '../CommentItem/types'
 
 export default {
   title: 'Components/DiscussionTitle',
@@ -8,13 +9,16 @@ export default {
 } 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]} />
+}
diff --git a/packages/components/src/DiscussionTitle/DiscussionTitle.test.tsx b/packages/components/src/DiscussionTitle/DiscussionTitle.test.tsx
index 1305d2e33b..366efbbed1 100644
--- a/packages/components/src/DiscussionTitle/DiscussionTitle.test.tsx
+++ b/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()
   })
 })
diff --git a/packages/components/src/DiscussionTitle/DiscussionTitle.tsx b/packages/components/src/DiscussionTitle/DiscussionTitle.tsx
index b13440ccf8..5d36b65059 100644
--- a/packages/components/src/DiscussionTitle/DiscussionTitle.tsx
+++ b/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()
diff --git a/src/common/DiscussionWrapper.tsx b/src/common/DiscussionWrapper.tsx
index 659b968857..55af3f7753 100644
--- a/src/common/DiscussionWrapper.tsx
+++ b/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 })
   }
diff --git a/src/models/question.models.tsx b/src/models/question.models.tsx
index 4b9950f71b..c735f45f69 100644
--- a/src/models/question.models.tsx
+++ b/src/models/question.models.tsx
@@ -18,6 +18,7 @@ export namespace IQuestion {
     _createdBy: string
     _deleted: boolean
     subscribers?: UserIdList
+    commentCount?: number
   } & DBDoc &
     FormInput &
     ISharedFeatures
diff --git a/src/pages/Question/QuestionPage.tsx b/src/pages/Question/QuestionPage.tsx
index ce1d0dde76..2cd371a9f1 100644
--- a/src/pages/Question/QuestionPage.tsx
+++ b/src/pages/Question/QuestionPage.tsx
@@ -57,6 +57,7 @@ export const QuestionPage = () => {
       })
 
       setQuestion(foundQuestion)
+      setTotalCommentsCount(foundQuestion.commentCount || totalCommentsCount)
       setIsLoading(false)
     }
 
diff --git a/src/stores/Discussions/discussionEvents.ts b/src/stores/Discussions/discussionEvents.ts
index 3b009aee0e..ff517b3f9a 100644
--- a/src/stores/Discussions/discussionEvents.ts
+++ b/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':
diff --git a/src/utils/filterNonDeletedComments.test.ts b/src/utils/filterNonDeletedComments.test.ts
new file mode 100644
index 0000000000..caddfca8ee
--- /dev/null
+++ b/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]])
+  })
+})
diff --git a/src/utils/filterNonDeletedComments.ts b/src/utils/filterNonDeletedComments.ts
new file mode 100644
index 0000000000..1d1dad3e44
--- /dev/null
+++ b/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)
+}
diff --git a/src/utils/nonDeletedCommentsCount.test.ts b/src/utils/nonDeletedCommentsCount.test.ts
new file mode 100644
index 0000000000..0a33e93a73
--- /dev/null
+++ b/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)
+  })
+})
diff --git a/src/utils/nonDeletedCommentsCount.ts b/src/utils/nonDeletedCommentsCount.ts
new file mode 100644
index 0000000000..23f34a4c8b
--- /dev/null
+++ b/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
+}