fix: 알림 인사하기 수락 OR 거절 버튼 상태에 따른 노출 처리 및 쿼리 invalidation (#158)

* fix: 인사하기 수락이나 거절완료 한 경우 버튼 미노출 * fix: 인사하기 수락이나 거절 버튼 누른후 invalidate
depromeet · Aug 26, 2024 · 31b373e · 31b373e
1 parent b16d350
commit 31b373e
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 42 deletions.
diff --git a/packages/web-domains/src/home/common/apis/schema/Notification.schema.ts b/packages/web-domains/src/home/common/apis/schema/Notification.schema.ts
@@ -18,6 +18,7 @@ export type AlarmEventType = {
   status: 'ACTIVE' | 'INACTIVE';
   additionalData: {
     handWavingId: number;
+    status?: 'NOT_REQUESTED' | 'REQUESTED' | 'ACCEPTED' | 'REJECTED';
   } | null;
   createdAt: number;
 };

diff --git a/packages/web-domains/src/home/features/notification/containers/AlarmListContainer.tsx b/packages/web-domains/src/home/features/notification/containers/AlarmListContainer.tsx
@@ -17,49 +17,51 @@ export const AlarmListContainer = () => {
     switch (notification.type) {
       case 'HAND_WAVING_REQUESTED': {
         const handWavingId = notification.additionalData?.handWavingId;
-
+        const isRequested = notification.additionalData?.status === 'REQUESTED';
         return (
           <NotificationItem.AlarmItem
             alarm={notification}
-            footer={
-              <div css={{ display: 'flex', marginTop: '12px' }}>
-                <Button
-                  onClick={() => {
-                    if (handWavingId && meetingId) {
-                      handWavingResponse({ meetingId, handWavingId });
-                    }
-                  }}
-                  variant="primary"
-                  leftDecor={
-                    <Icon
-                      name="hand-shaving"
-                      size={15}
-                      css={{
-                        '& svg, & path': {
-                          width: 20,
-                          height: 20,
-                          fill: `none`,
-                        },
-                      }}
-                    />
-                  }
-                  css={{ marginRight: '8px' }}
-                >
-                  나도 인사 건네기
-                </Button>
-                <Button
-                  onClick={() => {
-                    if (handWavingId && meetingId) {
-                      ignoreHandwaving({ meetingId, handWavingId });
+            {...(isRequested && {
+              footer: (
+                <div css={{ display: 'flex', marginTop: '12px' }}>
+                  <Button
+                    onClick={() => {
+                      if (handWavingId && meetingId) {
+                        handWavingResponse({ meetingId, handWavingId });
+                      }
+                    }}
+                    variant="primary"
+                    leftDecor={
+                      <Icon
+                        name="hand-shaving"
+                        size={15}
+                        css={{
+                          '& svg, & path': {
+                            width: 20,
+                            height: 20,
+                            fill: `none`,
+                          },
+                        }}
+                      />
                     }
-                  }}
-                  variant="sub"
-                  leftDecor={<Icon name="close-icon" size={15} />}
-                >
-                  다음에 인사하기
-                </Button>
-              </div>
-            }
+                    css={{ marginRight: '8px' }}
+                  >
+                    나도 인사 건네기
+                  </Button>
+                  <Button
+                    onClick={() => {
+                      if (handWavingId && meetingId) {
+                        ignoreHandwaving({ meetingId, handWavingId });
+                      }
+                    }}
+                    variant="sub"
+                    leftDecor={<Icon name="close-icon" size={15} />}
+                  >
+                    다음에 인사하기
+                  </Button>
+                </div>
+              ),
+            })}
           />
         );
       }

diff --git a/packages/web-domains/src/home/features/notification/services/useAlarmListService.ts b/packages/web-domains/src/home/features/notification/services/useAlarmListService.ts
@@ -1,10 +1,13 @@
+import { useQueryClient } from '@tanstack/react-query';
+
 import { useHandWavingIgonoreMutation } from '@/home/common/apis/mutations/useHandWavingIgnoreMutation';
 import { useHandWavingResponseMutation } from '@/home/common/apis/mutations/useHandWavingResponseMutation';
-import { useGetEvents } from '@/home/common/apis/queries/useGetEvents';
+import { EVENTS_QUERY_KEY, useGetEvents } from '@/home/common/apis/queries/useGetEvents';
 import { useGetMyInfo } from '@/home/common/apis/queries/useGetMyInfo';
 import { useSetCurrentMeeting } from '@/home/common/hooks/useSetCurrentMeeting';
 
 export const useAlarmListService = () => {
+  const queryClient = useQueryClient();
   const { meetingId } = useSetCurrentMeeting();
 
   const { data: myInfo } = useGetMyInfo({
@@ -19,9 +22,21 @@ export const useAlarmListService = () => {
     },
   });
 
-  const { mutate: ignoreHandWaving } = useHandWavingIgonoreMutation();
+  const { mutate: ignoreHandWaving } = useHandWavingIgonoreMutation({
+    options: {
+      onSuccess: () => {
+        queryClient.invalidateQueries({ queryKey: [EVENTS_QUERY_KEY] });
+      },
+    },
+  });
 
-  const { mutate: handWavingResponse } = useHandWavingResponseMutation();
+  const { mutate: handWavingResponse } = useHandWavingResponseMutation({
+    options: {
+      onSuccess: () => {
+        queryClient.invalidateQueries({ queryKey: [EVENTS_QUERY_KEY] });
+      },
+    },
+  });
 
   return {
     meetingId,