Merge pull request #40 from PBTP/feat/socket-chat-message

[fix]: ChatItemBase Content Render Data fix, Chat Api Type fix

src/hooks/api/services/chat.ts

@@ -1,5 +1,5 @@
 import { requestAPI } from '@/utils/fetch';
-import { ChatRoom, ReqChatRoomMessages } from '../types/chat';
+import { ChatMessages, ChatRoom, ReqChatRoomMessages } from '../types/chat';
 
 export const fetchChatRooms = async (): Promise<ChatRoom[]> => {
   const { data } = await requestAPI().get('/v1/chat/room');
@@ -11,7 +11,7 @@ export const fetchChatRoomMessages = async ({
   cursor = 0,
   limit = 20,
   next,
-}: ReqChatRoomMessages): Promise<string[]> => {
+}: ReqChatRoomMessages): Promise<ChatMessages> => {
   const { data } = await requestAPI().get(
     `/v1/chat/room/${chatRoomId}/message`,
     {

src/hooks/api/types/chat.ts

@@ -24,3 +24,24 @@ export interface ReqChatRoomMessages {
   limit?: number;
   next?: number;
 }
+
+export interface ChatUser {
+  authProvider: 'KAKAO' | 'GOOGLE';
+  userType: 'customer' | 'business' | 'driver';
+  userId?: number;
+  phoneNumber?: string;
+  uuid?: string;
+  name: string;
+}
+export interface ChatMessage {
+  chatRoomId: number;
+  chatMessageId: number;
+  senderUuid: string;
+  chatMessageType: string;
+  user: ChatUser;
+  chatMessageContent: string;
+}
+export interface ChatMessages {
+  data: ChatMessage[];
+  next: number;
+}

src/hooks/api/useChat.ts

@@ -21,13 +21,13 @@ export const useChatRoomMessages = ({
   limit,
   next,
 }: ReqChatRoomMessages) => {
+  console.log(chatRoomId);
   return useQuery({
     queryKey: ['chatRoomMessage', { chatRoomId, cursor, limit, next }] as const,
     queryFn: async ({ queryKey }) => {
       const reqChatRoomMessages = queryKey[1];
       const res = await fetchChatRoomMessages(reqChatRoomMessages);
       return res;
     },
-    initialData: [''],
   });
 };

src/hooks/socket/useSocket.ts

@@ -1,6 +1,7 @@
 import { useAuthStore } from '@/stores/useAuthStore';
 import { useEffect, useMemo } from 'react';
 import { io } from 'socket.io-client';
+import { ChatMessage } from '../api/types/chat';
 
 const MAX_ACK_TIME = 10000;
 const INITIAL_RETRY = 3;
@@ -10,7 +11,6 @@ export const useSocket = (path: 'chat' = 'chat') => {
 
   const socket = useMemo(() => {
     if (!token) return null;
-
     return io(`${import.meta.env.VITE_SOCKET_URL}`, {
       path: `/${path}`,
       extraHeaders: {
@@ -40,14 +40,11 @@ export const useSocket = (path: 'chat' = 'chat') => {
     }
   };
 
-  const onMessage = (getMessage: (message: string[]) => void) => {
+  const onMessage = (getMessage: (message: ChatMessage[]) => void) => {
     if (socket) socket.on('receive', getMessage);
   };
 
-  interface joinRoomProps {
-    roomId: string;
-  }
-  const joinRoom = ({ roomId }: joinRoomProps) => {
+  const joinRoom = ({ roomId }: { roomId: string }) => {
     if (socket) socket.emit('join', roomId);
   };
 

src/pages/Chat/ChatRoom/ChatRoom.tsx

@@ -5,7 +5,7 @@ import { useLocation, useNavigate } from 'react-router';
 import { useEffect, useState } from 'react';
 import { useSocket } from '@/hooks/socket/useSocket';
 import { useChatRoomMessages } from '@/hooks/api/useChat';
-import { ReqChatRoomMessages } from '@/hooks/api/types/chat';
+import { ChatMessage, ReqChatRoomMessages } from '@/hooks/api/types/chat';
 import { useAuthStore } from '@/stores/useAuthStore';
 import { UploadIcon, CameraIcon } from '@/icons/icon';
 
@@ -15,25 +15,24 @@ const ChatRoom = () => {
   const senderUuid = useAuthStore((state) => state.uuid);
   const navigate = useNavigate();
   const { state } = useLocation();
-  const { chatRoomId, storeName, chatMessageId } = state;
+  const { chatRoomId, storeName } = state;
 
   const [chatMessageContent, setChatMessageContent] = useState('');
 
   const { data: previousMessages } = useChatRoomMessages({
     chatRoomId,
-  } as ReqChatRoomMessages);
+  });
   const { socket, sendMessage, onMessage, joinRoom } = useSocket();
 
   const [chatMessageType, setChatMessageType] =
     useState<ChatMessageType>('TEXT');
 
-  const [chatMsgs, setChatMsgs] = useState([...previousMessages]);
+  const [chatMsgs, setChatMsgs] = useState([...(previousMessages?.data ?? [])]);
 
-  const sendMsg = () => {
+  const handleSocketMessage = () => {
     sendMessage(
       {
         chatRoomId,
-        chatMessageId,
         senderUuid,
         chatMessageType,
         chatMessageContent,
@@ -43,8 +42,8 @@ const ChatRoom = () => {
   };
 
   useEffect(
-    function handleChatRoom() {
-      const getMessage = (msg: string[]) => {
+    function onSocket() {
+      const getMessage = (msg: ChatMessage[]) => {
         setChatMsgs([...chatMsgs, ...msg]);
       };
       onMessage(getMessage);
@@ -106,7 +105,7 @@ const ChatRoom = () => {
             onChange={(e) => setChatMessageContent(e.target.value)}
           />
           <UploadIcon
-            onClick={sendMsg}
+            onClick={handleSocketMessage}
             className={styles.UploadIcon}
             width={20}
             height={20}

src/pages/Chat/ChatRooms/ChatItemBase.tsx

@@ -3,6 +3,7 @@ import styles from './ChatItemBase.module.scss';
 import RadioActiveIcon from '@/icons/icon/RadioActiveIcon';
 import RadioIcon from '@/icons/icon/RadioIcon';
 import { ChatRoom } from '@/hooks/api/types/chat';
+import { ErrorLogoIcon } from '@/icons/logo';
 
 type ChatItemBaseProps = {
   children?: ReactNode;
@@ -27,19 +28,22 @@ const ChatItemBase = ({ children, onClick }: ChatItemBaseProps) => {
 };
 
 const ChatItemContent = ({ chatInfo, onClick }: ChatItemContentProps) => {
-  const { lastMessage, inviteUser, chatRoomName } = chatInfo;
-  const { lastDate, chatMessageContent: recentChat } = lastMessage;
-  const { imgSrc } = inviteUser;
+  // const { lastMessage, inviteUser, chatRoomName } = chatInfo;
+  const { chatRoomName } = chatInfo;
+  // const { lastDate, chatMessageContent: recentChat } = lastMessage;
+  // const { lastDate, chatMessageContent: recentChat } = lastMessage;
+  // const { imgSrc } = inviteUser;
 
   return (
     <div className={styles.ChatItemContainer} onClick={onClick}>
-      <img src={imgSrc} className={styles.ChatImage} />
+      <ErrorLogoIcon width={60} height={60} className={styles.ChatImage} />
+      {/* <img src={imgSrc} className={styles.ChatImage} /> */}
       <div className={styles.ChatContent}>
         <div className={styles.ChatTitle}>
           <span className={styles.ShopName}>{chatRoomName}</span>
-          <span className={styles.LastDate}>{lastDate}</span>
+          <span className={styles.LastDate}>lastDate</span>
         </div>
-        <div className={styles.ChatText}>{recentChat}</div>
+        <div className={styles.ChatText}>recentChat</div>
       </div>
     </div>
   );

src/pages/Chat/ChatRooms/ChatRooms.tsx

@@ -17,8 +17,8 @@ const ChatRooms = () => {
 
   const navigate = useNavigate();
 
-  const onClickRoute = (roomId: string, storeName: string) => {
-    navigate(`${roomId}`, { state: { roomId, storeName } });
+  const onClickRoute = (chatRoomId: string, storeName: string) => {
+    navigate(`${chatRoomId}`, { state: { chatRoomId, storeName } });
   };
 
   return (
@@ -36,7 +36,6 @@ const ChatRooms = () => {
               onClick={handleEditIcon}
             />
           </div>
-          {chatRoomDatas && <div>{chatRoomDatas[0].tsid}</div>}
           {chatRoomDatas &&
             chatRoomDatas.map((chatInfo) => (
               <ChatItemBase key={chatInfo.chatRoomId}>