-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
알림 key값에 따라 NotificationItem 컴포넌트 구체화 (#237)
* feat: 알림 관련 tanstack query hook 구현 Co-authored-by: 이진욱 <[email protected]> * feat: 알림 모델 타입 정의 Co-authored-by: 이진욱 <[email protected]> * design: NotificationItem 컴포넌트 스타일 수정 Co-authored-by: Minjae Kim <[email protected]> * feat: CrewNotificationItem 컴포넌트 구현 Co-authored-by: Minjae Kim <[email protected]> * feat: GameNotificationItem 컴포넌트 구현 Co-authored-by: Minjae Kim <[email protected]> * refactor: Alarm 타입 수정 * feat: 구체화시킨 NotificationItem 컴포넌트 페이지에 적용 * feat: 알림 request, response 타입 정의 Co-authored-by: 이진욱 <[email protected]> * feat: 알림 api 함수 구현 Co-authored-by: 이진욱 <[email protected]> * feat: useEventSource onerror 옵셔널로 변경 * feat: Header에서 SSE 연결 - badge 추가 * fix: 바뀐 api 명세 적용 - 타입 선언 변경 - api 함수 변경 - tanstack query hook 변경 Co-authored-by: Minjae Kim <[email protected]> * fix: App 에서 EventSource 연결 - useEventSource 훅 변경 Co-authored-by: Minjae Kim <[email protected]> * feat: Badge 컴포넌트 구현 - 헤더에서 EventSource 연결하던 것 제거 Co-authored-by: Minjae Kim <[email protected]> * fix: 알림 api 명세 변경점 ui에 반영 Co-authored-by: Minjae Kim <[email protected]> * fix: api 명세 확정 안된 부분 주석처리 * fix: alarm 조회 query hook 수정 Co-authored-by: 이진욱 <[email protected]> * fix: alarm 조회 response type 수정 Co-authored-by: 이진욱 <[email protected]> * feat: 알림 페이지 api 연동 Co-authored-by: 이진욱 <[email protected]> * feat: sse 메세지 왔을 때 toast해주는 기능 * feat: 알림 관련 mutate 시 쿼리 무효화, 낙관적 업데이트 --------- Co-authored-by: 김민재 <[email protected]>
- Loading branch information
Showing
26 changed files
with
467 additions
and
16 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
import { axiosInstance } from '@api/axiosInstance'; | ||
|
||
export const deleteAlarms = async () => { | ||
await axiosInstance.delete('/alarms'); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
import { axiosInstance } from '@api/axiosInstance'; | ||
|
||
import { GetAlarmsRequest, GetAlarmsResponse } from '@type/api/alarm'; | ||
|
||
export const getAlarms = async ({ cursorId, size }: GetAlarmsRequest) => { | ||
const { data } = await axiosInstance.get<GetAlarmsResponse>('/alarms', { | ||
params: { | ||
cursorId, | ||
size, | ||
}, | ||
}); | ||
|
||
return data; | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
import { axiosInstance } from '@api/axiosInstance'; | ||
|
||
import { GetAlarmsUnreadResponse } from '@type/api/alarm'; | ||
|
||
export const getAlarmsUnread = async () => { | ||
const { data } = | ||
await axiosInstance.get<GetAlarmsUnreadResponse>('/alarms/unread'); | ||
|
||
return data; | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
import { axiosInstance } from '@api/axiosInstance'; | ||
|
||
export const patchCrewAlarms = async (alarmId: number) => { | ||
await axiosInstance.patch(`/crew-alarm/${alarmId}`, { | ||
isRead: true, | ||
}); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
import { axiosInstance } from '@api/axiosInstance'; | ||
|
||
export const patchGameAlarms = async (alarmId: number) => { | ||
await axiosInstance.patch(`/game-alarm/${alarmId}`, { | ||
isRead: true, | ||
}); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
import { useAlarmsUnreadQuery } from '@hooks/queries/useAlarmsUnreadQuery'; | ||
|
||
import { BadgeIcon } from './Header.style'; | ||
|
||
export const Badge = () => { | ||
const { data } = useAlarmsUnreadQuery(); | ||
if (!data.unread) { | ||
return null; | ||
} | ||
return <BadgeIcon />; | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
import { useMutation, useQueryClient } from '@tanstack/react-query'; | ||
|
||
import { deleteAlarms } from '@api/alarms/deleteAlarms'; | ||
|
||
export const useAlarmsDeleteMutation = () => { | ||
const queryClient = useQueryClient(); | ||
|
||
return useMutation({ | ||
mutationKey: ['alarms-delete'], | ||
mutationFn: deleteAlarms, | ||
onSuccess: () => { | ||
queryClient.resetQueries({ queryKey: ['alarms'] }); | ||
queryClient.resetQueries({ queryKey: ['alarms-unread'] }); | ||
}, | ||
}); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,57 @@ | ||
import { | ||
InfiniteData, | ||
QueryKey, | ||
useMutation, | ||
useQueryClient, | ||
} from '@tanstack/react-query'; | ||
|
||
import { patchCrewAlarms } from '@api/alarms/patchCrewAlarms'; | ||
|
||
import { GetAlarmsResponse } from '@type/api/alarm'; | ||
|
||
export const useCrewAlarmsPatchMutation = () => { | ||
const queryClient = useQueryClient(); | ||
|
||
return useMutation({ | ||
mutationFn: (alarmId: number) => patchCrewAlarms(alarmId), | ||
onSuccess: (_, alarmId) => { | ||
queryClient.invalidateQueries({ queryKey: ['alarms-unread'] }); | ||
|
||
const previousAlarms = queryClient.getQueryData< | ||
InfiniteData<GetAlarmsResponse, number> | ||
>(['alarms']); | ||
|
||
if (previousAlarms) { | ||
const { pages, pageParams } = previousAlarms; | ||
const newPages: GetAlarmsResponse[] = pages.map((page) => { | ||
const alarm = page.alarmResponse.find((alarm) => { | ||
if (!('crewId' in alarm)) { | ||
return false; | ||
} | ||
return alarm.crewId === alarmId; | ||
}); | ||
if (!alarm) { | ||
return page; | ||
} | ||
return { | ||
...page, | ||
alarmResponse: page.alarmResponse.map((alarm) => { | ||
if (!('crewId' in alarm)) { | ||
return alarm; | ||
} | ||
if (alarm.crewId === alarmId) { | ||
return { ...alarm, status: 'read' }; | ||
} | ||
return alarm; | ||
}), | ||
}; | ||
}); | ||
queryClient.setQueryData< | ||
typeof previousAlarms, | ||
QueryKey, | ||
typeof previousAlarms | ||
>(['alarms'], { pageParams, pages: newPages }); | ||
} | ||
}, | ||
}); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,57 @@ | ||
import { | ||
InfiniteData, | ||
QueryKey, | ||
useMutation, | ||
useQueryClient, | ||
} from '@tanstack/react-query'; | ||
|
||
import { patchGameAlarms } from '@api/alarms/patchGameAlarms'; | ||
|
||
import { GetAlarmsResponse } from '@type/api/alarm'; | ||
|
||
export const useGameAlarmsPatchMutation = () => { | ||
const queryClient = useQueryClient(); | ||
|
||
return useMutation({ | ||
mutationFn: (alarmId: number) => patchGameAlarms(alarmId), | ||
onSuccess: (_, alarmId) => { | ||
queryClient.invalidateQueries({ queryKey: ['alarms-unread'] }); | ||
|
||
const previousAlarms = queryClient.getQueryData< | ||
InfiniteData<GetAlarmsResponse, number> | ||
>(['alarms']); | ||
|
||
if (previousAlarms) { | ||
const { pages, pageParams } = previousAlarms; | ||
const newPages: GetAlarmsResponse[] = pages.map((page) => { | ||
const alarm = page.alarmResponse.find((alarm) => { | ||
if (!('gameId' in alarm)) { | ||
return false; | ||
} | ||
return alarm.gameId === alarmId; | ||
}); | ||
if (!alarm) { | ||
return page; | ||
} | ||
return { | ||
...page, | ||
alarmResponse: page.alarmResponse.map((alarm) => { | ||
if (!('gameId' in alarm)) { | ||
return alarm; | ||
} | ||
if (alarm.gameId === alarmId) { | ||
return { ...alarm, status: 'read' }; | ||
} | ||
return alarm; | ||
}), | ||
}; | ||
}); | ||
queryClient.setQueryData< | ||
typeof previousAlarms, | ||
QueryKey, | ||
typeof previousAlarms | ||
>(['alarms'], { pageParams, pages: newPages }); | ||
} | ||
}, | ||
}); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
import { useSuspenseInfiniteQuery } from '@tanstack/react-query'; | ||
|
||
import { getAlarms } from '@api/alarms/getAlarms'; | ||
|
||
import { FETCH_SIZE } from '@consts/network'; | ||
|
||
export const useAlarmsQuery = () => { | ||
return useSuspenseInfiniteQuery({ | ||
queryKey: ['alarms'], | ||
queryFn: ({ pageParam }) => | ||
getAlarms({ | ||
cursorId: pageParam !== 0 ? pageParam : undefined, | ||
size: FETCH_SIZE, | ||
}), | ||
|
||
getNextPageParam: (lastPage) => { | ||
if (!lastPage.hasNext) { | ||
return undefined; | ||
} | ||
return lastPage.cursorId; | ||
}, | ||
initialPageParam: 0, | ||
}); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
import { useSuspenseQuery } from '@tanstack/react-query'; | ||
|
||
import { getAlarmsUnread } from '@api/alarms/getAlarmsUnread'; | ||
|
||
export const useAlarmsUnreadQuery = () => { | ||
return useSuspenseQuery({ | ||
queryKey: ['alarms-unread'], | ||
queryFn: getAlarmsUnread, | ||
}); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.