From d3b01674e1ea1e6fc8ff82de27a7bc62946af5ec Mon Sep 17 00:00:00 2001 From: yuwen Date: Mon, 4 Sep 2023 21:10:40 +0800 Subject: [PATCH] refactor: modified MessageType --- .../rooms/RoomChatroom/ChatMessage.test.tsx | 11 ++++---- components/rooms/RoomChatroom/ChatMessage.tsx | 2 +- .../rooms/RoomChatroom/RoomChatroom.tsx | 6 ++--- components/rooms/RoomChatroom/index.ts | 25 ++++++------------- containers/provider/ChatroomProvider.tsx | 10 +++----- pages/api/mock/socketio.ts | 5 +++- 6 files changed, 24 insertions(+), 35 deletions(-) diff --git a/components/rooms/RoomChatroom/ChatMessage.test.tsx b/components/rooms/RoomChatroom/ChatMessage.test.tsx index 0b748f49..61d96a16 100644 --- a/components/rooms/RoomChatroom/ChatMessage.test.tsx +++ b/components/rooms/RoomChatroom/ChatMessage.test.tsx @@ -3,19 +3,18 @@ import { render, screen } from "@testing-library/react"; import ChatMessage, { ChatMessageProps } from "./ChatMessage"; import { TEXT_COLORS_CLASS } from "./ChatMessage"; -const TEST_USER_MESSAGE_PROPS: ChatMessageProps = { - from: "USER", +const TEST_USER_MESSAGE_PROPS = { + from: { id: "test_user", nickname: "test_nickname" }, content: "test textContent", - user: { id: "a", nickname: "testName" }, timestamp: new Date().toISOString(), - to: "LOBBY", + target: "LOBBY", }; const TEST_SYSTEM_MESSAGE_PROPS: ChatMessageProps = { from: "SYSTEM", content: "test textContent", timestamp: new Date().toISOString(), - to: "ALL", + target: "LOBBY", }; describe("ChatMessage", () => { @@ -48,7 +47,7 @@ describe("ChatMessage", () => { ); expect(baseElement.textContent).toMatch( - TEST_USER_MESSAGE_PROPS.user!.nickname + TEST_USER_MESSAGE_PROPS.from.nickname ); }); }); diff --git a/components/rooms/RoomChatroom/ChatMessage.tsx b/components/rooms/RoomChatroom/ChatMessage.tsx index ac954650..63a8a601 100644 --- a/components/rooms/RoomChatroom/ChatMessage.tsx +++ b/components/rooms/RoomChatroom/ChatMessage.tsx @@ -11,7 +11,7 @@ function ChatMessage(props: MessageType): JSX.Element { const textColorClass = props.from === "SYSTEM" ? TEXT_COLORS_CLASS.SYSTEM : TEXT_COLORS_CLASS.USER; - const senderText = props.from === "USER" ? props.user?.nickname + ": " : ""; + const senderText = props.from === "SYSTEM" ? "" : props.from.nickname + ": "; return (
diff --git a/components/rooms/RoomChatroom/RoomChatroom.tsx b/components/rooms/RoomChatroom/RoomChatroom.tsx index 94e16b98..8ed65f22 100644 --- a/components/rooms/RoomChatroom/RoomChatroom.tsx +++ b/components/rooms/RoomChatroom/RoomChatroom.tsx @@ -28,7 +28,7 @@ export default function RoomChatroom({ roomId }: RoomChatroom) { // update message list while received new message from websocket useEffect(() => { if (!lastMessage || !roomId) return; - if (lastMessage.to === roomId || lastMessage.to === "ALL") { + if (lastMessage.target === `ROOM_${roomId}`) { setMessageList((prev) => [...prev, lastMessage]); } }, [lastMessage, roomId]); @@ -53,9 +53,9 @@ export default function RoomChatroom({ roomId }: RoomChatroom) { function handleSubmitText() { if (!inputValue) return; - const data: Pick = { + const data: Pick = { content: inputValue, - to: roomId, + target: `ROOM_${roomId}`, }; sendChatMessage(data); setInputValue(""); diff --git a/components/rooms/RoomChatroom/index.ts b/components/rooms/RoomChatroom/index.ts index 10a4bed6..56ee5472 100644 --- a/components/rooms/RoomChatroom/index.ts +++ b/components/rooms/RoomChatroom/index.ts @@ -1,30 +1,19 @@ -import { RoomInfo } from "@/requests/rooms"; import { UserInfo } from "@/requests/users"; import RoomChatroom from "./RoomChatroom"; type User = Pick; export type MessageType = { - /** - * The source of the message (always "USER" for user messages). - */ - from: "USER" | "SYSTEM"; - /** - * The user who sent the message. - */ - user?: User; - /** - * The content of the user message. - */ + /** The source of the message. */ + from: "SYSTEM" | User; + /** The content of the user message. */ content: string; - /** - * The timestamp of the message. + /** The recipient of the message. + * @ "LOBBY" | "ROOM_[:roomId]" - */ + target: string; + /** The timestamp of the message. */ timestamp: string; - /** - * {"ALL" | "LOBBY" | User["id"] | RoomInfo.Room["id"]} to - The recipient of the message. - */ - to: "ALL" | "LOBBY" | User["id"] | RoomInfo.Room["id"]; }; export default RoomChatroom; diff --git a/containers/provider/ChatroomProvider.tsx b/containers/provider/ChatroomProvider.tsx index f6bb8af1..ea4ad8ca 100644 --- a/containers/provider/ChatroomProvider.tsx +++ b/containers/provider/ChatroomProvider.tsx @@ -35,15 +35,13 @@ function useChatroomCore() { /** * Sends a chat message to the server. * @param {string} message.content - The content of the message. - * @param {string} message.to - The target roomId of the message. + * @param {string} message.target - The target chatroomId of the message. */ const sendChatMessage = useCallback( - (message: Pick) => { + (message: Pick) => { if (!currentUser) return; - const payload: MessageType = { - from: "USER", - user: { id: currentUser.id, nickname: currentUser.nickname }, - timestamp: new Date().toISOString(), + const payload: Omit = { + from: { id: currentUser.id, nickname: currentUser.nickname }, ...message, }; if (socket) { diff --git a/pages/api/mock/socketio.ts b/pages/api/mock/socketio.ts index fac1b7e8..64fc025d 100644 --- a/pages/api/mock/socketio.ts +++ b/pages/api/mock/socketio.ts @@ -122,7 +122,10 @@ const socketio = async (req: NextApiRequest, res: NextApiResponseServerIO) => { default: break; } - io.emit(SOCKET_EVENT.CHAT_MESSAGE, message); + io.emit(SOCKET_EVENT.CHAT_MESSAGE, { + ...message, + timestamp: new Date().toISOString(), + }); }); socket.on(SOCKET_EVENT.DISCONNECT, () => { // eslint-disable-next-line no-console