refactor: useRef 숫자 배열로 저장

prgrms-web-devcourse · Nov 29, 2023 · c1cf33d · c1cf33d
1 parent 4009f11
commit c1cf33d
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 24 deletions.
diff --git a/src/apis/hooks/useSaveFinalResult.ts b/src/apis/hooks/useSaveFinalResult.ts
@@ -16,7 +16,7 @@ const useSaveFinalResult = <T extends ReviewId>(finalResult: T) => {
 
   return useMutation({
     mutationFn: saveFinalResult,
-    onMutate: async () => {
+    onMutate: () => {
       const reviewId = finalResult.reviewId
       const userId = finalResult.userId
 

diff --git a/src/apis/hooks/useSendReview.ts b/src/apis/hooks/useSendReview.ts
@@ -1,4 +1,4 @@
-import { useMutation } from '@tanstack/react-query'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
 import apiClient from '@/apis/apiClient'
 
 interface Response {
@@ -8,13 +8,25 @@ interface Response {
 }
 
 //NOTE - 대상자별 조합된 리뷰 결과를 저장
-const useSendReview = () => {
-  const sendReview = async ({ reviewId }: { reviewId: string }) => {
+const useSendReview = ({ reviewId }: { reviewId: string }) => {
+  const queryClient = useQueryClient()
+
+  const prevSendResultData = queryClient.getQueryData<{
+    success: boolean
+    data: number[]
+  }>([`/final-results/${reviewId}/status`])
+
+  const sendReview = async () => {
     return await apiClient.post<Response>(`/final-results/${reviewId}`)
   }
 
   return useMutation({
     mutationFn: sendReview,
+    onSuccess: () => {
+      queryClient.setQueryData([`/final-results/${reviewId}/status`], {
+        ...prevSendResultData,
+      })
+    },
   })
 }
 export default useSendReview
diff --git a/src/pages/CreatedReviewManagePage/components/ReceiverTabReviewDatail/index.tsx b/src/pages/CreatedReviewManagePage/components/ReceiverTabReviewDatail/index.tsx
@@ -26,7 +26,7 @@ const ReceiverReviewDetail = ({
   //NOTE - 하나라도 응답 실패했을 떄 처리
 
   const { addToast } = useToast()
-  const hasAnswered = useRef(false)
+  const hasAnswered = useRef<number[]>([])
   const { data: getReviewQuestion } = useGetReviewForCreator({
     id: Number(reviewId),
   })
@@ -90,10 +90,10 @@ const ReceiverReviewDetail = ({
   useEffect(() => {
     if (
       !ResponserList?.includes(Number(receiverId)) &&
-      hasAnswered.current.valueOf() === false
+      !hasAnswered.current.includes(Number(receiverId))
     ) {
+      hasAnswered.current = [...hasAnswered.current, Number(receiverId)]
       saveFinalResult()
-      hasAnswered.current = true
     }
   }, [receiverId])
 

diff --git a/src/pages/CreatedReviewManagePage/index.tsx b/src/pages/CreatedReviewManagePage/index.tsx
@@ -30,7 +30,7 @@ const CreatedReviewManagePage = () => {
   )
 
   //NOTE - 리뷰의 질문을 가져온다!
-  const { data: getReviewQuestion } = useGetReviewForCreator({
+  const { data: getReviewQuestion, refetch } = useGetReviewForCreator({
     id: Number(reviewId),
   })
 
@@ -40,7 +40,7 @@ const CreatedReviewManagePage = () => {
 
   const { mutate: closeReview } = useCloseSurvey({ id: reviewId })
 
-  const { mutate: sendReview } = useSendReview()
+  const { mutate: sendReview } = useSendReview({ reviewId })
   const handleClickSurveyClose = () => {
     closeReview(undefined, {
       onSuccess: () => {
@@ -70,23 +70,21 @@ const CreatedReviewManagePage = () => {
       return
     }
 
-    sendReview(
-      { reviewId },
-      {
-        onSuccess: ({ data }) => {
-          if (data.errorCode && data.message) {
-            addToast({ message: data.message, type: 'error' })
+    sendReview(undefined, {
+      onSuccess: ({ data }) => {
+        if (data.errorCode && data.message) {
+          addToast({ message: data.message, type: 'error' })
 
-            return
-          }
+          return
+        }
 
-          addToast({
-            message: '리뷰가 성공적으로 전송되었어요!',
-            type: 'success',
-          })
-        },
+        addToast({
+          message: '리뷰가 성공적으로 전송되었어요!',
+          type: 'success',
+        })
+        refetch()
       },
-    )
+    })
   }
 
   const REVIEW_MANAGE_TAB_CONTENT = {
@@ -111,7 +109,13 @@ const CreatedReviewManagePage = () => {
       >
         <AllResponseReviewByReceiver
           reviewId={reviewId}
-          ResponserList={checkAllReceiverReceived?.data}
+          ResponserList={
+            getReviewQuestion.status === 'END'
+              ? getReviewQuestion.receivers.map(
+                  (receiver) => receiver.receiverId,
+                )
+              : checkAllReceiverReceived?.data
+          }
         />
       </Suspense>
     ),