Merge pull request #315 from Game-as-a-Service/refactor/chat-message-…

…type

refactor: modified MessageType

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
     );
   });
 });

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 (
     <div className={cn("text-sm text-left", textColorClass)}>

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<MessageType, "content" | "to"> = {
+    const data: Pick<MessageType, "content" | "target"> = {
       content: inputValue,
-      to: roomId,
+      target: `ROOM_${roomId}`,
     };
     sendChatMessage(data);
     setInputValue("");

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<UserInfo, "id" | "nickname">;
 
 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;

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<MessageType, "content" | "to">) => {
+    (message: Pick<MessageType, "content" | "target">) => {
       if (!currentUser) return;
-      const payload: MessageType = {
-        from: "USER",
-        user: { id: currentUser.id, nickname: currentUser.nickname },
-        timestamp: new Date().toISOString(),
+      const payload: Omit<MessageType, "timestamp"> = {
+        from: { id: currentUser.id, nickname: currentUser.nickname },
         ...message,
       };
       if (socket) {

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