refactor chat

package-lock.json

@@ -24,6 +24,7 @@
         "react-router-dom": "^6.11.2",
         "react-scripts": "5.0.1",
         "socket.io-client": "^4.7.2",
+        "unique-names-generator": "^4.7.1",
         "url": "^0.11.1",
         "web-vitals": "^2.1.4"
       },
@@ -17035,6 +17036,14 @@
         "node": ">=4"
       }
     },
+    "node_modules/unique-names-generator": {
+      "version": "4.7.1",
+      "resolved": "https://registry.npmjs.org/unique-names-generator/-/unique-names-generator-4.7.1.tgz",
+      "integrity": "sha512-lMx9dX+KRmG8sq6gulYYpKWZc9RlGsgBR6aoO8Qsm3qvkSJ+3rAymr+TnV8EDMrIrwuFJ4kruzMWM/OpYzPoow==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/unique-string": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/unique-string/-/unique-string-2.0.0.tgz",

package.json

@@ -19,6 +19,7 @@
     "react-router-dom": "^6.11.2",
     "react-scripts": "5.0.1",
     "socket.io-client": "^4.7.2",
+    "unique-names-generator": "^4.7.1",
     "url": "^0.11.1",
     "web-vitals": "^2.1.4"
   },

src/components/chat.jsx

@@ -1,30 +1,54 @@
 import React, { useContext, useState } from "react";
-import { Button, Input } from "@douyinfe/semi-ui";
+import { Button, Input, Tag, Avatar } from "@douyinfe/semi-ui";
 import { IconSend } from "@douyinfe/semi-icons";
 import { socket } from "../data/socket";
 import { MessageContext } from "../pages/editor";
 
 export default function Chat() {
   const [message, setMessage] = useState("");
-  const { messages, setMessages } = useContext(MessageContext);
+  const { messages } = useContext(MessageContext);
 
   return (
     <div className="mx-5 flex flex-col h-full">
-      <div className="h-full flex-1 overflow-y-auto" id="message-box">
-        {messages.map((m, i) => (
-          <div key={i}>{m}</div>
-        ))}
+      <div className="h-full flex-1 overflow-y-auto flex flex-col-reverse py-2">
+        {messages.map((m, i) =>
+          m.type === "note" ? (
+            <div key={i} className="text-center my-1">
+              <Tag size="large" color={m.action === "join" ? "blue" : "amber"}>
+                {m.message}
+              </Tag>
+            </div>
+          ) : messages[i + 1].id !== m.id ? (
+            <div key={i} className="flex pt-1">
+              <Avatar
+                size="small"
+                alt={m.name}
+                color={m.color}
+                className="border border-grey-900"
+              >
+                {m.name.split(" ").map((c) => c[0])}
+              </Avatar>
+              <div className="ms-2">
+                <div className="font-semibold">{m.name}</div>
+                <div>{m.message}</div>
+              </div>
+            </div>
+          ) : (
+            <div key={i} className="ms-10">
+              {m.message}
+            </div>
+          )
+        )}
       </div>
       <form
         onSubmit={(e) => {
           e.preventDefault();
-          if (message !== "") {
-            setMessages((prev) => [...prev, message]);
+          if (message.trim() !== "") {
             socket.emit("send-message", message);
           }
           setMessage("");
         }}
-        className="flex"
+        className="flex mt-2"
       >
         <Input
           onChange={(v) => setMessage(v)}

src/data/data.js

@@ -40,6 +40,26 @@ const tableThemes = [
 
 const noteThemes = ["#ffdfd9", "#fcf7ac", "#cffcb1", "#c7d2ff", "#e7c7ff"];
 
+const avatarThemes = [
+  "amber",
+  "blue",
+  "cyan",
+  "green",
+  "grey",
+  "indigo",
+  "light-blue",
+  "light-green",
+  "lime",
+  "orange",
+  "pink",
+  "rain",
+  "red",
+  "teal",
+  "violet",
+  "yellow",
+  "white",
+];
+
 const defaultTableTheme = "#175e7a";
 const defaultNoteTheme = "#fcf7ac";
 const bgBlue = "#124559";
@@ -88,6 +108,7 @@ export {
   noteThemes,
   defaultTableTheme,
   defaultNoteTheme,
+  avatarThemes,
   Cardinality,
   Constraint,
   Tab,

src/pages/editor.jsx

@@ -7,10 +7,12 @@ import {
   Tab,
   defaultTableTheme,
   defaultNoteTheme,
+  avatarThemes,
   Action,
   ObjectType,
 } from "../data/data";
 import { socket } from "../data/socket";
+import { uniqueNamesGenerator, colors, animals } from "unique-names-generator";
 
 export const LayoutContext = createContext();
 export const TableContext = createContext();
@@ -401,15 +403,44 @@ export default function Editor(props) {
 
     socket.connect();
 
-    const onConnect = () => console.log(`You connected with id: ${socket.id}`);
-    const onRecieve = (value) => setMessages((prev) => [...prev, value]);
+    const onConnect = () => {
+      const name = uniqueNamesGenerator({
+        dictionaries: [colors, animals],
+        separator: " ",
+        style: "capital",
+      });
+      const color =
+        avatarThemes[Math.floor(Math.random() * avatarThemes.length)];
+      socket.emit("new-user", name, color);
+      setMessages((prev) => [
+        ...prev,
+        { message: `You joined as ${name}`, type: "note", action: "join" },
+      ]);
+    };
+    const onRecieve = (value) =>
+      setMessages((prev) => [{ ...value, type: "message" }, ...prev]);
+    const onUserConnected = (name) =>
+      setMessages((prev) => [
+        { message: `${name} just joined`, type: "note", action: "join" },
+        ...prev,
+      ]);
+    const onUserDisconnected = (name) =>
+      setMessages((prev) => [
+        { message: `${name} left`, type: "note", action: "leave" },
+        ...prev,
+      ]);
 
     socket.on("connect", onConnect);
     socket.on("recieve-message", onRecieve);
+    socket.on("user-connected", onUserConnected);
+    socket.on("user-disconnected", onUserDisconnected);
 
     return () => {
       socket.off("connect", onConnect);
       socket.off("recieve-message", onRecieve);
+      socket.off("user-connected", onUserConnected);
+      socket.off("user-disconnected", onUserDisconnected);
+      socket.disconnect();
     };
   }, []);