42 lines
1.2 KiB
TypeScript
42 lines
1.2 KiB
TypeScript
import { FC, useEffect, useState } from "react"
|
|
import { CHAT_URL } from "../../config"
|
|
import useSession from "../../hooks/useSession"
|
|
import { ChatMessage as Message } from "../../types"
|
|
import Input from "../common/Input"
|
|
import ChatMessage from "../message/ChatMessage"
|
|
|
|
const Chat: FC = () => {
|
|
const { session } = useSession()
|
|
const [messages, setMessages] = useState<Message[]>([])
|
|
|
|
useEffect(() => {
|
|
const ws = new WebSocket(CHAT_URL)
|
|
ws.onmessage = (ev) => {
|
|
const newMsg = JSON.parse(ev.data) as Message
|
|
setMessages((old) => [...old, newMsg])
|
|
}
|
|
}, [])
|
|
|
|
return (
|
|
<div className="bg-zinc-900 w-80 border-l border-l-zinc-700 flex flex-col">
|
|
<div className="flex flex-row justify-center items-center border-b border-b-zinc-700 p-2 h-12">
|
|
<p className="uppercase font-semibold text-sm">Stream Chat</p>
|
|
</div>
|
|
<div className="flex-1 overflow-scrollbar">
|
|
{messages.map((message) => (
|
|
<ChatMessage key={message.messageId.toString()} message={message} />
|
|
))}
|
|
</div>
|
|
<div className="m-2">
|
|
<Input
|
|
disabled={!session}
|
|
className="w-full p-2"
|
|
placeholder="Send a message"
|
|
/>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Chat
|