refactor chat

This commit is contained in:
1ilit 2023-09-19 15:51:00 +03:00
parent 274c434206
commit 4181ef4c74
5 changed files with 97 additions and 11 deletions

9
package-lock.json generated
View File

@ -24,6 +24,7 @@
"react-router-dom": "^6.11.2", "react-router-dom": "^6.11.2",
"react-scripts": "5.0.1", "react-scripts": "5.0.1",
"socket.io-client": "^4.7.2", "socket.io-client": "^4.7.2",
"unique-names-generator": "^4.7.1",
"url": "^0.11.1", "url": "^0.11.1",
"web-vitals": "^2.1.4" "web-vitals": "^2.1.4"
}, },
@ -17035,6 +17036,14 @@
"node": ">=4" "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": { "node_modules/unique-string": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/unique-string/-/unique-string-2.0.0.tgz", "resolved": "https://registry.npmjs.org/unique-string/-/unique-string-2.0.0.tgz",

View File

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

View File

@ -1,30 +1,54 @@
import React, { useContext, useState } from "react"; 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 { IconSend } from "@douyinfe/semi-icons";
import { socket } from "../data/socket"; import { socket } from "../data/socket";
import { MessageContext } from "../pages/editor"; import { MessageContext } from "../pages/editor";
export default function Chat() { export default function Chat() {
const [message, setMessage] = useState(""); const [message, setMessage] = useState("");
const { messages, setMessages } = useContext(MessageContext); const { messages } = useContext(MessageContext);
return ( return (
<div className="mx-5 flex flex-col h-full"> <div className="mx-5 flex flex-col h-full">
<div className="h-full flex-1 overflow-y-auto" id="message-box"> <div className="h-full flex-1 overflow-y-auto flex flex-col-reverse py-2">
{messages.map((m, i) => ( {messages.map((m, i) =>
<div key={i}>{m}</div> 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> </div>
<form <form
onSubmit={(e) => { onSubmit={(e) => {
e.preventDefault(); e.preventDefault();
if (message !== "") { if (message.trim() !== "") {
setMessages((prev) => [...prev, message]);
socket.emit("send-message", message); socket.emit("send-message", message);
} }
setMessage(""); setMessage("");
}} }}
className="flex" className="flex mt-2"
> >
<Input <Input
onChange={(v) => setMessage(v)} onChange={(v) => setMessage(v)}

View File

@ -40,6 +40,26 @@ const tableThemes = [
const noteThemes = ["#ffdfd9", "#fcf7ac", "#cffcb1", "#c7d2ff", "#e7c7ff"]; 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 defaultTableTheme = "#175e7a";
const defaultNoteTheme = "#fcf7ac"; const defaultNoteTheme = "#fcf7ac";
const bgBlue = "#124559"; const bgBlue = "#124559";
@ -88,6 +108,7 @@ export {
noteThemes, noteThemes,
defaultTableTheme, defaultTableTheme,
defaultNoteTheme, defaultNoteTheme,
avatarThemes,
Cardinality, Cardinality,
Constraint, Constraint,
Tab, Tab,

View File

@ -7,10 +7,12 @@ import {
Tab, Tab,
defaultTableTheme, defaultTableTheme,
defaultNoteTheme, defaultNoteTheme,
avatarThemes,
Action, Action,
ObjectType, ObjectType,
} from "../data/data"; } from "../data/data";
import { socket } from "../data/socket"; import { socket } from "../data/socket";
import { uniqueNamesGenerator, colors, animals } from "unique-names-generator";
export const LayoutContext = createContext(); export const LayoutContext = createContext();
export const TableContext = createContext(); export const TableContext = createContext();
@ -401,15 +403,44 @@ export default function Editor(props) {
socket.connect(); socket.connect();
const onConnect = () => console.log(`You connected with id: ${socket.id}`); const onConnect = () => {
const onRecieve = (value) => setMessages((prev) => [...prev, value]); 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("connect", onConnect);
socket.on("recieve-message", onRecieve); socket.on("recieve-message", onRecieve);
socket.on("user-connected", onUserConnected);
socket.on("user-disconnected", onUserDisconnected);
return () => { return () => {
socket.off("connect", onConnect); socket.off("connect", onConnect);
socket.off("recieve-message", onRecieve); socket.off("recieve-message", onRecieve);
socket.off("user-connected", onUserConnected);
socket.off("user-disconnected", onUserDisconnected);
socket.disconnect();
}; };
}, []); }, []);