update comment count after manipulating comments

ZdruzenieSTROM · Nov 10, 2023 · c784f67 · c784f67
1 parent d4b53be
commit c784f67
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 6 deletions.
diff --git 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,26 +44,34 @@ 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()
     },
   })
 
   const {mutate: hideComment} = useMutation({
     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
@@ -205,6 +205,7 @@ export const Problems: FC = () => {
             problemId={displaySideContent.problemId}
             problemNumber={displaySideContent.problemNumber}
             closeDiscussion={() => setDisplaySideContent({type: '', problemId: -1, problemNumber: -1})}
+            invalidateSeriesQuery={invalidateSeriesQuery}
           />
         )}
         {/* {displaySideContent.type === 'uploadProblemForm' && (