From 9dc4ce27be5392999815485b0b239e17f9fb3b5a Mon Sep 17 00:00:00 2001 From: HOOOO98 Date: Sat, 27 Jan 2024 22:36:54 +0900 Subject: [PATCH] Feat: fix exception logic in notification #225 --- .../Alarm/TabCapsule/Content/Content.tsx | 3 +++ .../Alarm/TabCapsule/TabCapsule.tsx | 26 +++++++++++++------ src/components/Home/TabBar/TabBar.tsx | 6 ++--- .../SideBar/TravelList/TravelList.tsx | 4 --- src/firebase/messaging-init-in-sw.ts | 1 - src/hooks/Notification/useNotification.ts | 2 +- src/pages/Home/Home.tsx | 2 +- src/pages/Trip/Trip.tsx | 5 ---- src/types/alarm.ts | 1 + src/utils/parsingAlarm.ts | 4 ++- 10 files changed, 30 insertions(+), 24 deletions(-) diff --git a/src/components/Alarm/TabCapsule/Content/Content.tsx b/src/components/Alarm/TabCapsule/Content/Content.tsx index 50708f93..b7859eac 100644 --- a/src/components/Alarm/TabCapsule/Content/Content.tsx +++ b/src/components/Alarm/TabCapsule/Content/Content.tsx @@ -6,6 +6,9 @@ import formatTimeAgo from '@/utils/formatTimeAgo'; import {ContentProps} from '@/types/alarm'; function Content({contents}: ContentProps) { + if (!contents[0]) { + return
; + } return (
{contents.map((content, index) => ( diff --git a/src/components/Alarm/TabCapsule/TabCapsule.tsx b/src/components/Alarm/TabCapsule/TabCapsule.tsx index ddc74b8b..ddb3c4ff 100644 --- a/src/components/Alarm/TabCapsule/TabCapsule.tsx +++ b/src/components/Alarm/TabCapsule/TabCapsule.tsx @@ -1,4 +1,5 @@ import {Tab, TabIndicator, TabList, TabPanel, TabPanels, Tabs} from '@chakra-ui/react'; +import {useEffect, useState} from 'react'; import {useNavigate} from 'react-router-dom'; import styles from './TabCapsule.module.scss'; @@ -10,20 +11,29 @@ import {parsingAlarmTravel} from '@/utils/parsingAlarm'; import Content from './Content/Content'; +import {NotificationData} from '@/types/notification'; + function TabCapsule({isAlarmOpen}: {isAlarmOpen: boolean}) { + const [allContents, setAllContents] = useState([]); + const [spaceTravelContents, setSpaceTravelContents] = useState([]); const navigate = useNavigate(); - const {data: Alarm} = useGetAlarm(isAlarmOpen); - localStorage.removeItem('news'); + const {data: AlarmData} = useGetAlarm(isAlarmOpen); - Alarm && PostReadAlarm(Alarm?.data.data.notificationDetail[0].id); - if (Alarm?.status === 403 || Alarm?.status === 401) { + if (AlarmData?.status === 403 || AlarmData?.status === 401) { navigate('/auth/login', { replace: true, }); } - const AllContents = parsingAlarmTravel(Alarm?.data.data.notificationDetail); - const SpaceTravelContents = parsingAlarmTravel(Alarm?.data.data.notificationDetail); + useEffect(() => { + setAllContents(parsingAlarmTravel(AlarmData?.data.data.notificationDetail)); + setSpaceTravelContents(parsingAlarmTravel(AlarmData?.data.data.notificationDetail)); + }, [AlarmData]); + + useEffect(() => { + localStorage.removeItem('news'); + PostReadAlarm(AlarmData?.data.data.notificationDetail[0].id); + }, []); return ( @@ -38,10 +48,10 @@ function TabCapsule({isAlarmOpen}: {isAlarmOpen: boolean}) { - + - + diff --git a/src/components/Home/TabBar/TabBar.tsx b/src/components/Home/TabBar/TabBar.tsx index 6b4eb1c0..bf2c2d84 100644 --- a/src/components/Home/TabBar/TabBar.tsx +++ b/src/components/Home/TabBar/TabBar.tsx @@ -8,10 +8,10 @@ import {useGetAlarm} from '@/hooks/Notification/useNotification'; import {Alarmprop} from '@/types/alarm'; -function TabBar({onAlarmOpen}: Alarmprop) { +function TabBar({onAlarmOpen, isAlarmOpen}: Alarmprop) { const news = localStorage.getItem('news'); - const {data: Alarm} = useGetAlarm(true); - if (Alarm?.data.data.notificationDetail[0].isRead === false) { + const {data: AlarmData} = useGetAlarm(isAlarmOpen); + if (AlarmData?.data.data.notificationDetail[0].isRead === false) { localStorage.setItem('news', 'true'); } diff --git a/src/components/SideBar/TravelList/TravelList.tsx b/src/components/SideBar/TravelList/TravelList.tsx index 668b1ba7..899dcee7 100644 --- a/src/components/SideBar/TravelList/TravelList.tsx +++ b/src/components/SideBar/TravelList/TravelList.tsx @@ -15,13 +15,9 @@ function TravelList({isSideOpen}: TravelListProp) { const [, setIsFull] = useRecoilState(isFullMember); const {mutate} = usePostSpace(); const navigate = useNavigate(); - const {data: spaces} = useGetSpaces(isSideOpen); - console.log(spaces); - const handlePostSpace = (e: React.MouseEvent) => { e.preventDefault(); - if (spaces!.data && spaces!.data.spaces.length >= 15) { setIsFull(true); } else { diff --git a/src/firebase/messaging-init-in-sw.ts b/src/firebase/messaging-init-in-sw.ts index 48839afb..0881d718 100644 --- a/src/firebase/messaging-init-in-sw.ts +++ b/src/firebase/messaging-init-in-sw.ts @@ -26,7 +26,6 @@ async function requestPermission() { const token = await getToken(messaging, { vapidKey: import.meta.env.VITE_VAPID_KEY, }); - console.log(token); if (token) { await sendNotificationToken({token}); console.log('[FCM]알림 토큰을 전송했습니다'); diff --git a/src/hooks/Notification/useNotification.ts b/src/hooks/Notification/useNotification.ts index bd0da73e..70c3950a 100644 --- a/src/hooks/Notification/useNotification.ts +++ b/src/hooks/Notification/useNotification.ts @@ -4,7 +4,7 @@ import {GetAlarm} from '@/api/notification'; function useGetAlarm(enabled: boolean) { return useQuery({ - queryKey: ['Alarm'], + queryKey: ['AlarmData'], queryFn: GetAlarm, enabled, retry: 0, diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx index 0048ba87..c6dea75f 100644 --- a/src/pages/Home/Home.tsx +++ b/src/pages/Home/Home.tsx @@ -40,7 +40,7 @@ function Home() { return ( <>
- +
diff --git a/src/pages/Trip/Trip.tsx b/src/pages/Trip/Trip.tsx index 457a8778..b2740e33 100644 --- a/src/pages/Trip/Trip.tsx +++ b/src/pages/Trip/Trip.tsx @@ -17,7 +17,6 @@ import {useNavigate, useParams} from 'react-router-dom'; import styles from './Trip.module.scss'; -import {useGetAlarm} from '@/hooks/Notification/useNotification'; import {useGetJourneys, useGetSpace} from '@/hooks/Spaces/space'; import Alarm from '@/components/Alarm/Alarm'; @@ -51,10 +50,6 @@ function Trip() { const [center, setCenter] = useState(getMapCenter(journeysData.data)); const navigate = useNavigate(); const users = spaceData?.data?.members; - const {data: AlarmData} = useGetAlarm(true); - if (AlarmData?.data.data.notificationDetail[0].isRead === false) { - localStorage.setItem('news', 'true'); - } useEffect(() => { console.log('아임센터', center); diff --git a/src/types/alarm.ts b/src/types/alarm.ts index 52209cfe..10debeee 100644 --- a/src/types/alarm.ts +++ b/src/types/alarm.ts @@ -19,4 +19,5 @@ export type BackProps = { export interface Alarmprop { onAlarmOpen: () => void; + isAlarmOpen: boolean; } diff --git a/src/utils/parsingAlarm.ts b/src/utils/parsingAlarm.ts index 211d687f..3d440027 100644 --- a/src/utils/parsingAlarm.ts +++ b/src/utils/parsingAlarm.ts @@ -1,6 +1,8 @@ import {NotificationData, NotificationDetails} from '@/types/notification'; -export function parsingAlarmTravel(notificationDetails: NotificationDetails[]): NotificationData[] { +export function parsingAlarmTravel(notificationDetails: NotificationDetails[]) { + if (!notificationDetails || notificationDetails.length === 0) return []; + const travelNoti: NotificationData[] = []; try {