From 88a93594f6451fc436cd2d031f0ca6a34c5ab2d9 Mon Sep 17 00:00:00 2001 From: VictoryJu Date: Thu, 12 Sep 2024 13:25:56 +0900 Subject: [PATCH] [fix]: ChatItemBase Content Render Data fix, Chat Api Type fix --- src/hooks/api/services/chat.ts | 4 ++-- src/hooks/api/types/chat.ts | 21 +++++++++++++++++++++ src/hooks/api/useChat.ts | 2 +- src/hooks/socket/useSocket.ts | 9 +++------ src/pages/Chat/ChatRoom/ChatRoom.tsx | 17 ++++++++--------- src/pages/Chat/ChatRooms/ChatItemBase.tsx | 16 ++++++++++------ src/pages/Chat/ChatRooms/ChatRooms.tsx | 5 ++--- 7 files changed, 47 insertions(+), 27 deletions(-) diff --git a/src/hooks/api/services/chat.ts b/src/hooks/api/services/chat.ts index 78173ae..da92ea3 100644 --- a/src/hooks/api/services/chat.ts +++ b/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 => { const { data } = await requestAPI().get('/v1/chat/room'); @@ -11,7 +11,7 @@ export const fetchChatRoomMessages = async ({ cursor = 0, limit = 20, next, -}: ReqChatRoomMessages): Promise => { +}: ReqChatRoomMessages): Promise => { const { data } = await requestAPI().get( `/v1/chat/room/${chatRoomId}/message`, { diff --git a/src/hooks/api/types/chat.ts b/src/hooks/api/types/chat.ts index fd64ca7..47381ce 100644 --- a/src/hooks/api/types/chat.ts +++ b/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; +} diff --git a/src/hooks/api/useChat.ts b/src/hooks/api/useChat.ts index ced5930..ea5e030 100644 --- a/src/hooks/api/useChat.ts +++ b/src/hooks/api/useChat.ts @@ -21,6 +21,7 @@ export const useChatRoomMessages = ({ limit, next, }: ReqChatRoomMessages) => { + console.log(chatRoomId); return useQuery({ queryKey: ['chatRoomMessage', { chatRoomId, cursor, limit, next }] as const, queryFn: async ({ queryKey }) => { @@ -28,6 +29,5 @@ export const useChatRoomMessages = ({ const res = await fetchChatRoomMessages(reqChatRoomMessages); return res; }, - initialData: [''], }); }; diff --git a/src/hooks/socket/useSocket.ts b/src/hooks/socket/useSocket.ts index 62e05eb..ae3e982 100644 --- a/src/hooks/socket/useSocket.ts +++ b/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); }; diff --git a/src/pages/Chat/ChatRoom/ChatRoom.tsx b/src/pages/Chat/ChatRoom/ChatRoom.tsx index 92a5d82..836e106 100644 --- a/src/pages/Chat/ChatRoom/ChatRoom.tsx +++ b/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('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)} /> { }; 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 (
- + + {/* */}
{chatRoomName} - {lastDate} + lastDate
-
{recentChat}
+
recentChat
); diff --git a/src/pages/Chat/ChatRooms/ChatRooms.tsx b/src/pages/Chat/ChatRooms/ChatRooms.tsx index 3c15210..a15f75b 100644 --- a/src/pages/Chat/ChatRooms/ChatRooms.tsx +++ b/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} /> - {chatRoomDatas &&
{chatRoomDatas[0].tsid}
} {chatRoomDatas && chatRoomDatas.map((chatInfo) => (