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

View File

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