From 5dcb80b780c624d0057d6cd18c8786db7d1b12da Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Richard=20Trembeck=C3=BD?= <rtrembecky@gmail.com>
Date: Fri, 10 Nov 2023 17:43:43 +0100
Subject: [PATCH] Update comment count after manipulating comments (#153)

---
 src/components/Problems/Discussion.tsx | 22 ++++++++++++++++------
 src/components/Problems/Problems.tsx   |  1 +
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/components/Problems/Discussion.tsx b/src/components/Problems/Discussion.tsx
index 3a1c4c24..f5eacb47 100644
--- a/src/components/Problems/Discussion.tsx
+++ b/src/components/Problems/Discussion.tsx
@@ -16,15 +16,17 @@ interface DiscussionProps {
   problemId: number
   problemNumber: number
   closeDiscussion: () => void
+  invalidateSeriesQuery: () => Promise<void>
 }
 
-export const Discussion: FC<DiscussionProps> = ({problemId, problemNumber, closeDiscussion}) => {
+export const Discussion: FC<DiscussionProps> = ({problemId, problemNumber, closeDiscussion, invalidateSeriesQuery}) => {
   const [commentText, setCommentText] = useState('')
   const [hiddenResponseText, setHiddenResponseText] = useState('')
   const [hiddenResponseDialogId, sethiddenResponseDialogId] = useState(-1)
 
+  const queryKey = ['competition', 'problem', problemId, 'comments']
   const {data: commentsData, isLoading: commentsIsLoading} = useQuery({
-    queryKey: ['competition', 'problem', problemId, 'comments'],
+    queryKey,
     queryFn: () => axios.get<Comment[]>(`/api/competition/problem/${problemId}/comments`),
   })
   const comments = commentsData?.data.map((comment) => ({
@@ -42,18 +44,26 @@ export const Discussion: FC<DiscussionProps> = ({problemId, problemNumber, close
 
   const queryClient = useQueryClient()
 
+  const invalidateCommentsAndCount = async () => {
+    await Promise.all([
+      queryClient.invalidateQueries({queryKey}),
+      // comment count comes from problem from series
+      invalidateSeriesQuery(),
+    ])
+  }
+
   const {mutate: addComment} = useMutation({
     mutationFn: () => axios.post(`/api/competition/problem/${problemId}/add-comment`, {text: commentText}),
     onSuccess: () => {
       setCommentText('')
-      queryClient.invalidateQueries({queryKey: ['competition', 'problem', problemId, 'comments']})
+      invalidateCommentsAndCount()
     },
   })
 
   const {mutate: publishComment} = useMutation({
     mutationFn: (id: number) => axios.post(`/api/competition/comment/${id}/publish`),
     onSuccess: () => {
-      queryClient.invalidateQueries({queryKey: ['competition', 'problem', problemId, 'comments']})
+      invalidateCommentsAndCount()
     },
   })
 
@@ -61,7 +71,7 @@ export const Discussion: FC<DiscussionProps> = ({problemId, problemNumber, close
     mutationFn: ({id, hiddenResponseText}: {id: number; hiddenResponseText: string}) =>
       axios.post(`/api/competition/comment/${id}/hide`, {hidden_response: hiddenResponseText}),
     onSuccess: () => {
-      queryClient.invalidateQueries({queryKey: ['competition', 'problem', problemId, 'comments']})
+      invalidateCommentsAndCount()
       sethiddenResponseDialogId(-1)
       setHiddenResponseText('')
     },
@@ -70,7 +80,7 @@ export const Discussion: FC<DiscussionProps> = ({problemId, problemNumber, close
   const {mutate: deleteComment} = useMutation({
     mutationFn: (id: number) => axios.delete(`/api/competition/comment/${id}`),
     onSuccess: () => {
-      queryClient.invalidateQueries({queryKey: ['competition', 'problem', problemId, 'comments']})
+      invalidateCommentsAndCount()
     },
   })
 
diff --git a/src/components/Problems/Problems.tsx b/src/components/Problems/Problems.tsx
index d6308fea..11784984 100644
--- a/src/components/Problems/Problems.tsx
+++ b/src/components/Problems/Problems.tsx
@@ -214,6 +214,7 @@ export const Problems: FC = () => {
             problemId={displaySideContent.problemId}
             problemNumber={displaySideContent.problemNumber}
             closeDiscussion={() => setDisplaySideContent({type: '', problemId: -1, problemNumber: -1})}
+            invalidateSeriesQuery={invalidateSeriesQuery}
           />
         )}
         {/* {displaySideContent.type === 'uploadProblemForm' && (