48 lines
1.5 KiB
TypeScript
48 lines
1.5 KiB
TypeScript
import { useParams } from "react-router-dom";
|
|
import Layout from "../components/Layout";
|
|
import Connect from "../components/ConnectWithName";
|
|
import { useWebSocket } from "../hooks/useWebSocket";
|
|
import ChatMessages from "../components/MessageDisplay";
|
|
import ChatInput from "../components/ChatInput";
|
|
import { useChatState } from "../contexts/ChatContext";
|
|
import ParticipantList from "../components/ParticipantsList";
|
|
import ChatMenu from "../components/ChatMenu";
|
|
import RoomHeader from "../components/RoomHeader";
|
|
|
|
function Room() {
|
|
const { roomId } = useParams(); // can never be null as this Room component is only ever rendered if react-router matches the route WITH a roomId
|
|
const { isConnected, connect, sendMessage } = useWebSocket(roomId ?? "");
|
|
const { state } = useChatState();
|
|
|
|
if (!isConnected) {
|
|
return (
|
|
<Layout>
|
|
<section className="w-full">
|
|
<RoomHeader roomId={roomId!} isConnected={isConnected} />
|
|
<Connect onConnect={connect} />
|
|
</section>
|
|
</Layout>
|
|
);
|
|
}
|
|
|
|
// is connected
|
|
return (
|
|
<Layout>
|
|
<section className="w-full">
|
|
<RoomHeader roomId={roomId!} isConnected={isConnected} />
|
|
|
|
<ChatMenu />
|
|
{state.selectedMenu === "chat" && (
|
|
<>
|
|
<ChatMessages sendMessage={sendMessage} />
|
|
<ChatInput sendMessage={sendMessage} />
|
|
</>
|
|
)}
|
|
|
|
{state.selectedMenu === "participants" && <ParticipantList />}
|
|
</section>
|
|
</Layout>
|
|
);
|
|
}
|
|
|
|
export default Room;
|