From e7fbeefb541369d6e36cb99232315968e200045b Mon Sep 17 00:00:00 2001
From: MurakawaTakuya <murakawatakuya5@gmail.com>
Date: Sat, 26 Oct 2024 16:58:43 +0900
Subject: [PATCH 1/2] =?UTF-8?q?=E3=83=90=E3=83=83=E3=82=AF=E3=82=A8?=
 =?UTF-8?q?=E3=83=B3=E3=83=89=E3=81=ABisSelfMessage=E3=82=92=E8=BF=BD?=
 =?UTF-8?q?=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/.prettierrc          |  7 +++++++
 backend/src/bin/websocket.ts | 10 +++++++++-
 2 files changed, 16 insertions(+), 1 deletion(-)
 create mode 100644 backend/.prettierrc

diff --git a/backend/.prettierrc b/backend/.prettierrc
new file mode 100644
index 0000000..4224969
--- /dev/null
+++ b/backend/.prettierrc
@@ -0,0 +1,7 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": false,
+  "printWidth": 80
+}
diff --git a/backend/src/bin/websocket.ts b/backend/src/bin/websocket.ts
index 73ca7f1..cc3fd1d 100644
--- a/backend/src/bin/websocket.ts
+++ b/backend/src/bin/websocket.ts
@@ -74,8 +74,16 @@ export default function createWebsocketServer(httpServer: HttpServer) {
         const name = users[socket.id].name;
         const addressHash = "TODO: implement addressHash";
         const format = "text";
+        const isSelfMessage = socketId === socket.id;
         console.log(socketId);
-        io.to(socketId).emit("message", name, addressHash, format, message);
+        io.to(socketId).emit(
+          "message",
+          name,
+          addressHash,
+          format,
+          message,
+          isSelfMessage
+        );
       });
     });
   });

From 09fe1c46c38cbd179fc002539afe325e54ad7d84 Mon Sep 17 00:00:00 2001
From: MurakawaTakuya <murakawatakuya5@gmail.com>
Date: Sat, 26 Oct 2024 17:26:37 +0900
Subject: [PATCH 2/2] =?UTF-8?q?message=E3=81=AEinterface=E3=82=92=E8=BF=BD?=
 =?UTF-8?q?=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/app/page.tsx                 | 36 +++++++++++++++--------
 frontend/src/components/Bubble/Bubble.tsx | 15 ++--------
 frontend/src/types/interface.ts           |  8 +++++
 3 files changed, 34 insertions(+), 25 deletions(-)

diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index 6b64a1c..b3d633d 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -8,13 +8,12 @@ import { useLayoutEffect, useRef, useState } from "react";
 import io, { Socket } from "socket.io-client";
 import Bubble from "@/components/Bubble/Bubble";
 import styles from "./page.module.scss";
+import { MessageInterface } from "@/types/interface";
 
 let socket: Socket;
 
 export default function WebSocketPage() {
-  const [messageList, setMessageList] = useState<[string, string, string][]>(
-    []
-  );
+  const [messageList, setMessageList] = useState<MessageInterface[]>([]);
   const [modalClosed, setModalClosed] = useState<boolean>(false);
   const [name, setName] = useState<string>("");
   const [names, setNames] = useState<string[]>([]);
@@ -56,9 +55,25 @@ export default function WebSocketPage() {
     // 'message' イベントをリッスンして、メッセージを受信
     socket.on(
       "message",
-      (name: string, addressHash: string, format: string, message: string) => {
-        console.log("Received messages: ", name, addressHash, message);
-        setMessageList((prev) => [...prev, [name, addressHash, message]]); // TODO: formatも追加
+      (
+        senderName: string,
+        addressHash: string,
+        format: string,
+        message: string,
+        isSelfMessage: boolean
+      ) => {
+        console.log(
+          "Received messages: ",
+          senderName,
+          addressHash,
+          format,
+          message,
+          isSelfMessage
+        );
+        setMessageList((prev) => [
+          ...prev,
+          { senderName, addressHash, format, message, isSelfMessage },
+        ]);
       }
     );
 
@@ -87,13 +102,8 @@ export default function WebSocketPage() {
         ))}
         <div>
           <h2>Received Messages: </h2>
-          {messageList.map(([senderName, addressHash, message], index) => (
-            <Bubble
-              key={index}
-              senderName={senderName}
-              addressHash={addressHash}
-              message={message}
-            />
+          {messageList.map((bubble, index) => (
+            <Bubble key={index} bubble={bubble} />
           ))}
           <div ref={scrollBottomRef} />
         </div>
diff --git a/frontend/src/components/Bubble/Bubble.tsx b/frontend/src/components/Bubble/Bubble.tsx
index 6e7d32c..6165af3 100644
--- a/frontend/src/components/Bubble/Bubble.tsx
+++ b/frontend/src/components/Bubble/Bubble.tsx
@@ -1,19 +1,10 @@
 import React from "react";
+import { MessageInterface } from "@/types/interface";
 
-interface BubbleProps {
-  senderName: string;
-  addressHash: string;
-  message: string;
-}
-
-export default function Bubble({
-  senderName,
-  addressHash,
-  message,
-}: BubbleProps) {
+export default function Bubble({ bubble }: { bubble: MessageInterface }) {
   return (
     <p>
-      {senderName} @{addressHash} : {message}
+      {bubble.senderName} @{bubble.addressHash}: {bubble.message}
     </p>
   );
 }
diff --git a/frontend/src/types/interface.ts b/frontend/src/types/interface.ts
index fc17f2f..67a83b0 100644
--- a/frontend/src/types/interface.ts
+++ b/frontend/src/types/interface.ts
@@ -8,3 +8,11 @@ export interface User {
   position: Position;
   groupId: number;
 }
+
+export interface MessageInterface {
+  senderName: string;
+  addressHash: string;
+  format: string;
+  message: string;
+  isSelfMessage: boolean;
+}