✨Feat: 알림 구독

prgrms-web-devcourse-final-project · Dec 9, 2024 · f0d4a2d · f0d4a2d
1 parent cf8ed00
commit f0d4a2d
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 64 deletions.
diff --git a/src/components/SendMessageForm/index.tsx b/src/components/SendMessageForm/index.tsx
@@ -24,6 +24,7 @@ export default function SendMessageForm({ chatRoomId, ...rest }: SendMessageForm
     if (!message.trim()) return
     sendMessage(message)
     $form.reset()
+    $form['message'].focus()
   }
 
   return (

diff --git a/src/hooks/useSubscribe.ts b/src/hooks/useSubscribe.ts
@@ -2,6 +2,7 @@ import { InfiniteData, useQueryClient } from '@tanstack/react-query'
 import { useEffect } from 'react'
 import { useWebSocket } from '~/WebSocketContext'
 import { FetchChatMessageListResponse } from '~apis/chat/fetchChatMessageList'
+import { CreateChatRoomResponse } from '~apis/chatRoom/createChatRoom'
 import { useHomePageData } from '~apis/main/useHomePageData'
 import { FetchNotificationListResponse } from '~apis/notification/fetchNotificationList'
 import { queryKey } from '~constants/queryKey'
@@ -15,94 +16,108 @@ export default function useSubscribe() {
   const { isConnected, subscribe } = useWebSocket()
   const queryClient = useQueryClient()
   const { showNotification } = usePushNotificationStore()
+
   useEffect(() => {
     if (isConnected) {
-      console.log('구독!')
       subscribe(`/user/queue/errors`, message => {
         const response = JSON.parse(message.body)
         console.log('에러 구독', response)
       })
 
       subscribe(`/sub/message/${email}`, message => {
-        const response = JSON.parse(message.body) as {
-          data: {
+        const response = JSON.parse(message.body)
+        if (response.code === 1000) {
+          //* 첫 연결 시 모든 채팅방 반환
+          type Data = {
             chatRoomId: number
             unreadCount: number
-          }[]
-        }
-        console.log('이메일 구독', response)
-        response.data.forEach(chatRoom => {
-          subscribe(`/sub/chat/${chatRoom.chatRoomId}`, message => {
-            const res = JSON.parse(message.body) as APIResponse<FetchChatMessageListResponse['content'][number]>
-            console.log('채팅방 구독', res)
-            queryClient.invalidateQueries({
-              queryKey: queryKey.social.chatRoomList(),
-            })
-            if (res.data.chatId)
-              queryClient.setQueryData<InfiniteData<APIResponse<FetchChatMessageListResponse>>>(
-                queryKey.social.chatMessageList(res.data.chatRoomId),
-                oldData => {
-                  if (!oldData) {
-                    const initialPage: APIResponse<FetchChatMessageListResponse> = {
-                      code: 200,
-                      status: 'OK',
-                      message: 'Success',
-                      data: {
-                        content: [res.data],
-                        size: 1,
-                        number: 0,
-                        numberOfElements: 1,
-                        first: true,
-                        last: true,
-                        empty: false,
-                        sort: {
-                          empty: true,
-                          sorted: false,
-                          unsorted: true,
-                        },
-                        pageable: {
-                          offset: 0,
+          }
+          const data = response.data as Data[]
+
+          console.log('이메일 구독', response)
+
+          data.forEach((chatRoom: Data) => {
+            subscribe(`/sub/chat/${chatRoom.chatRoomId}`, message => {
+              const res = JSON.parse(message.body) as APIResponse<FetchChatMessageListResponse['content'][number]>
+              console.log('채팅방 구독', res)
+              queryClient.invalidateQueries({
+                queryKey: queryKey.social.chatRoomList(),
+              })
+              if (res.data.chatId)
+                queryClient.setQueryData<InfiniteData<APIResponse<FetchChatMessageListResponse>>>(
+                  queryKey.social.chatMessageList(res.data.chatRoomId),
+                  oldData => {
+                    if (!oldData) {
+                      const initialPage: APIResponse<FetchChatMessageListResponse> = {
+                        code: 200,
+                        status: 'OK',
+                        message: 'Success',
+                        data: {
+                          content: [res.data],
+                          size: 1,
+                          number: 0,
+                          numberOfElements: 1,
+                          first: true,
+                          last: true,
+                          empty: false,
                           sort: {
                             empty: true,
                             sorted: false,
                             unsorted: true,
                           },
-                          pageSize: 1,
-                          paged: true,
-                          pageNumber: 0,
-                          unpaged: false,
+                          pageable: {
+                            offset: 0,
+                            sort: {
+                              empty: true,
+                              sorted: false,
+                              unsorted: true,
+                            },
+                            pageSize: 1,
+                            paged: true,
+                            pageNumber: 0,
+                            unpaged: false,
+                          },
                         },
-                      },
+                      }
+                      return {
+                        pages: [initialPage],
+                        pageParams: [null],
+                      }
                     }
                     return {
-                      pages: [initialPage],
-                      pageParams: [null],
-                    }
-                  }
-                  return {
-                    ...oldData,
-                    pages: oldData.pages.map((page, index) => {
-                      if (index === 0) {
-                        return {
-                          ...page,
-                          data: {
-                            ...page.data,
-                            content: [...page.data.content, res.data],
-                            numberOfElements: page.data.numberOfElements + 1,
-                          },
+                      ...oldData,
+                      pages: oldData.pages.map((page, index) => {
+                        if (index === 0) {
+                          return {
+                            ...page,
+                            data: {
+                              ...page.data,
+                              content: [...page.data.content, res.data],
+                              numberOfElements: page.data.numberOfElements + 1,
+                            },
+                          }
                         }
-                      }
-                      return page
-                    }),
+                        return page
+                      }),
+                    }
                   }
-                }
-              )
+                )
+            })
           })
-        })
+        }
+        if (response.code === 1001) {
+          //* 첫 연결 이후부터 새로운 채팅방 생성 시
+          const data = response.data as CreateChatRoomResponse
+          //todo 새로운 채팅방 추가
+        }
       })
 
-      subscribe(`sub/notification/${email}`, message => {
+      subscribe(`/sub/notification/${email}`, message => {
         const response = JSON.parse(message.body) as APIResponse<FetchNotificationListResponse['content'][number]>
+        console.log('알림 구독')
+        if (!response.data.content) {
+          return
+        }
         showNotification(response.data.content)
         console.log(response)
         queryClient.setQueryData<InfiniteData<APIResponse<FetchNotificationListResponse>>>(