issue #289 refactor: chat message refactoring

teamWaggle · Jun 19, 2024 · d7d545a · d7d545a
1 parent 2293bf7
commit d7d545a
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 44 deletions.
diff --git a/...waggle-service/src/components/Connection/Chat/ChatRoomContent/ChatMessage/ChatMessage.tsx b/...waggle-service/src/components/Connection/Chat/ChatRoomContent/ChatMessage/ChatMessage.tsx
@@ -9,11 +9,11 @@ import type { ChatMessageInfoType } from "@/types/chat";
 const ChatMessage = ({ chatMessageInfo }: ChatMessageInfoType) => {
   return (
     <Flex styles={{ gap: "24px", width: "100%" }}>
-      <img src={chatMessageInfo.sender.profileImgUrl} alt="profileImg" css={profileImgStyle} />
+      <img src={chatMessageInfo.senderProfileImgUrl} alt="profileImg" css={profileImgStyle} />
       <Flex styles={{ direction: "column" }}>
         <Flex styles={{ gap: "16px", align: "center" }}>
           <Text css={getDefaultTextStyle(Theme.color.text, 500)}>
-            {chatMessageInfo.sender.nickname}
+            {chatMessageInfo.senderNickname}
           </Text>
           <Text css={getDefaultTextStyle(Theme.color.readonly_text, 300)}>
             {convertToUTC(new Date(chatMessageInfo.sendTime)).date}

diff --git a/...le-service/src/components/Connection/Chat/ChatRoomContent/ChatMessage/ChatMessageMine.tsx b/...le-service/src/components/Connection/Chat/ChatRoomContent/ChatMessage/ChatMessageMine.tsx
@@ -11,7 +11,7 @@ const ChatMessageMine = ({ chatMessageInfo }: ChatMessageInfoType) => {
     <Flex styles={{ direction: "column", marginLeft: "auto" }}>
       <Flex styles={{ gap: "16px", align: "center", marginLeft: "auto" }}>
         <Text css={getDefaultTextStyle(Theme.color.text, 500)}>
-          {chatMessageInfo.sender.nickname}
+          {chatMessageInfo.senderNickname}
         </Text>
         <Text css={getDefaultTextStyle(Theme.color.readonly_text, 300)}>
           {convertToUTC(new Date(chatMessageInfo.sendTime)).date}

diff --git a/packages/waggle-service/src/components/Connection/Chat/ChatRoomContent/ChatRoomContent.tsx b/packages/waggle-service/src/components/Connection/Chat/ChatRoomContent/ChatRoomContent.tsx
@@ -1,4 +1,4 @@
-import { Fragment, useContext, useEffect, useState } from "react";
+import { Fragment, useContext, useEffect, useState, useRef } from "react";
 
 import { Client } from "@stomp/stompjs";
 
@@ -15,8 +15,9 @@ import { ACCESS_TOKEN_KEY } from "@/constants/api";
 
 import { useChatMessageListQuery } from "@/hooks/api/chat/useChatMessageListQuery";
 import { useMemberInfoSaveQuery } from "@/hooks/api/member/useMemberInfoSaveQuery";
+import useObserver from "@/hooks/common/useObserver";
 
-// import type { ChatMessageType } from "@/types/chat";
+import type { ChatMessageType } from "@/types/chat";
 
 import {
   chattingContentBoxStyle,
@@ -39,16 +40,46 @@ const ChatRoomContent = () => {
 
   const { chatRoomId } = context;
 
-  const { chatMessageListData } = useChatMessageListQuery(chatRoomId);
+  const { chatMessageListData, fetchNextPage, hasNextPage, isFetching } =
+    useChatMessageListQuery(chatRoomId);
 
-  const { userUrl, memberId } = useMemberInfoSaveQuery();
+  const observeRef = useObserver(async (entry, observer) => {
+    observer.unobserve(entry.target);
 
-  // const [messages, setMessages] = useState([]);
+    if (hasNextPage && !isFetching) {
+      fetchNextPage();
+    }
+  });
+
+  const chatRef = useRef<HTMLDivElement>(null);
+
+  const { userUrl } = useMemberInfoSaveQuery();
+
+  const [messages, setMessages] = useState<ChatMessageType[]>([]);
   const [stompClient, setStompClient] = useState<Client | null>(null);
   const [newMessage, setNewMessage] = useState<string>("");
 
   const accessToken = localStorage.getItem(ACCESS_TOKEN_KEY);
 
+  const sendMessage = () => {
+    if (!stompClient) return;
+
+    const chatMessage: ChatMessageRequest = {
+      chatMessageType: "TALK",
+      chatRoomId,
+      senderUserUrl: userUrl,
+      content: newMessage,
+    };
+
+    stompClient.publish({
+      destination: "/publish/message",
+      body: JSON.stringify(chatMessage),
+      headers: { Authorization: `Bearer ${accessToken}` },
+    });
+
+    setNewMessage("");
+  };
+
   useEffect(() => {
     const client = new Client({
       brokerURL: import.meta.env.VITE_SOCKET_URL,
@@ -61,73 +92,67 @@ const ChatRoomContent = () => {
       // },
     });
 
-    setStompClient(client);
-
     client.activate();
 
     client.onConnect = () => {
       client.subscribe(
         `/subscribe/${chatRoomId}`,
         (message) => {
           const msg = JSON.parse(message.body);
-          console.log(msg);
-          // setMessages((prev) => [...prev, msg]);
-          // console.log(JSON.parse(message.body));
+          setMessages((prev) => [msg, ...prev]);
         },
         { Authorization: `Bearer ${accessToken}` }
       );
     };
 
+    setStompClient(client);
+
     return () => {
       if (stompClient && stompClient.connected) {
         stompClient.deactivate();
       }
     };
-  }, []);
+  }, [chatRoomId]);
 
-  // const recvMessage = () => {
-
-  // }
-
-  const sendMessage = () => {
-    if (!stompClient) return;
-
-    const chatMessage: ChatMessageRequest = {
-      chatMessageType: "TALK",
-      chatRoomId,
-      senderUserUrl: userUrl,
-      content: newMessage,
-    };
-
-    stompClient.publish({
-      destination: "/publish/message",
-      body: JSON.stringify(chatMessage),
-      headers: { Authorization: `Bearer ${accessToken}` },
-    });
-
-    setNewMessage("");
-  };
+  useEffect(() => {
+    !hasNextPage &&
+      chatMessageListData.pages.forEach((value) => {
+        setMessages((prev) => [...value.result.chatMessages, ...prev]);
+      });
+  }, [chatMessageListData]);
 
   return (
     <Box style={{ width: "100%" }}>
-      <Flex styles={{ direction: "column", gap: "20px" }} css={chattingContentBoxStyle}>
-        {chatMessageListData.pages.map((chatMessageData) => (
+      <Flex
+        styles={{ direction: "column", gap: "20px" }}
+        css={chattingContentBoxStyle}
+        ref={chatRef}
+      >
+        <div ref={observeRef} />
+        {/* {chatMessageListData.pages.map((chatMessageData) => (
           <Fragment key={chatMessageData.result.nextPageParam}>
             {chatMessageData.result.chatMessages.map((chatMessageInfo) => (
               <Fragment key={chatMessageInfo.id}>
-                {chatMessageInfo.sender.memberId === memberId ? (
+                {chatMessageInfo.senderUserUrl === userUrl ? (
                   <ChattingMessageMine chatMessageInfo={chatMessageInfo} />
                 ) : (
                   <ChattingMessage chatMessageInfo={chatMessageInfo} />
                 )}
               </Fragment>
             ))}
           </Fragment>
-        ))}
-        {/* {messages.map((data) => (
-          <ChattingMessage chatMessageInfo={data} />
         ))} */}
+        {messages.map((chatMessageInfo, index) => (
+          <Fragment key={index}>
+            {chatMessageInfo.senderUserUrl === userUrl ? (
+              <ChattingMessageMine chatMessageInfo={chatMessageInfo} />
+            ) : (
+              <ChattingMessage chatMessageInfo={chatMessageInfo} />
+            )}
+          </Fragment>
+        ))}
       </Flex>
+
       <Flex styles={{ gap: "14px" }} css={inputBoxStyle}>
         <input
           css={chattingInputStyle}

diff --git a/packages/waggle-service/src/types/chat.ts b/packages/waggle-service/src/types/chat.ts
@@ -74,8 +74,11 @@ interface ChatMessagesType {
 export interface ChatMessageType {
   id: string;
   content: string;
-  sendTime: Date;
-  sender: MemberType;
+  chatRoomId: number;
+  senderUserUrl: string;
+  senderNickname: string;
+  senderProfileImgUrl: string;
+  sendTime: number;
   chatMessageType: string;
 }