41 lines
1.2 KiB
React
41 lines
1.2 KiB
React
|
import React, { useContext, useState } from "react";
|
||
|
|
import { Button, Input } 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);
|
||
|
|
|
||
|
|
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>
|
||
|
|
<form
|
||
|
|
onSubmit={(e) => {
|
||
|
|
e.preventDefault();
|
||
|
|
if (message !== "") {
|
||
|
|
setMessages((prev) => [...prev, message]);
|
||
|
|
socket.emit("send-message", message);
|
||
|
|
}
|
||
|
|
setMessage("");
|
||
|
|
}}
|
||
|
|
className="flex"
|
||
|
|
>
|
||
|
|
<Input
|
||
|
|
onChange={(v) => setMessage(v)}
|
||
|
|
placeholder="Message"
|
||
|
|
value={message}
|
||
|
|
autoComplete="off"
|
||
|
|
className="me-2"
|
||
|
|
></Input>
|
||
|
|
<Button icon={<IconSend />} htmlType="submit"></Button>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|