31 lines
994 B
TypeScript
31 lines
994 B
TypeScript
import {GHButton} from "./Button";
|
|
import React, {FormEvent, FunctionComponent, RefObject} from "react";
|
|
|
|
interface Props{
|
|
chatRef: RefObject<HTMLOListElement>;
|
|
handleSend: (message: string) => void;
|
|
}
|
|
|
|
const Chat: FunctionComponent<Props> = ({chatRef, handleSend}) => {
|
|
|
|
const handleChat = (form: FormEvent<HTMLFormElement>) => {
|
|
form.preventDefault();
|
|
const data = new FormData(form.currentTarget);
|
|
const chatInput = data.get("chat-input") as string;
|
|
if(!chatInput) return;
|
|
handleSend(chatInput);
|
|
form.currentTarget.reset();
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<ol className={"chat__list"} ref={chatRef}/>
|
|
<form className={"chat-form"} onSubmit={handleChat}>
|
|
<input className={"chat-form__input"} type="text" placeholder={"Chat here..."} id={"chat-input"} name={"chat-input"}/>
|
|
<GHButton type={"submit"}>Send</GHButton>
|
|
</form>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default Chat; |