54 lines
1.1 KiB
TypeScript
54 lines
1.1 KiB
TypeScript
|
import { useState } from "react";
|
||
|
|
import { FormEventHandler } from "react";
|
||
|
|
import useAllChat from "../../hooks/useAllChat";
|
||
|
|
import "./Chat.css"
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
sendMessage: Function
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
function Chat({ sendMessage }: Props) {
|
||
|
|
|
||
|
|
const [chatInput, setChatInput] = useState("")
|
||
|
|
|
||
|
|
const { chatMesages } = useAllChat()
|
||
|
|
|
||
|
|
const onInput: React.ChangeEventHandler<HTMLInputElement> = (event) => {
|
||
|
|
setChatInput(event.target.value);
|
||
|
|
event.preventDefault();
|
||
|
|
};
|
||
|
|
|
||
|
|
const onSubmit: FormEventHandler<HTMLFormElement> = (event) => {
|
||
|
|
event.preventDefault();
|
||
|
|
sendMessage(JSON.stringify({ content: chatInput }));
|
||
|
|
setChatInput("")
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="">
|
||
|
|
{chatMesages.map(message => (
|
||
|
|
<div className="chat-bubble"> <span>{message.sender.name}: </span> {message.content} </div>
|
||
|
|
))
|
||
|
|
|
||
|
|
}
|
||
|
|
<form onSubmit={onSubmit}>
|
||
|
|
<input
|
||
|
|
className="chat-input"
|
||
|
|
placeholder="Say something funny :D"
|
||
|
|
type="text"
|
||
|
|
value={chatInput}
|
||
|
|
onChange={onInput}
|
||
|
|
/>
|
||
|
|
<button type="submit">Send</button>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
export default Chat
|