Files
axiom/src/app/server/[ip]/page.tsx
T

58 lines
1.5 KiB
TypeScript

"use client";
import { useRef, useState } from "react";
import { useParams } from "next/navigation";
import MessageBox from "@/components/MessageBox";
import AppSidebar from "@/components/Sidebar";
import { Server as ServerType } from "@/types/types";
import auth from "@/lib/auth";
import { useServerMessages } from "@/hooks/use-messages";
import useApp from "@/hooks/use-app";
import { useEffectOnceWhenReady } from "@/hooks/use-once";
export default function Server() {
const { ip } = useParams<{ ip: string }>();
const serverRef = useRef<WebSocket | null>(null);
const [server, setServer] = useState<undefined | ServerType>();
const app = useApp();
const { messages, addMessage } = useServerMessages();
useEffectOnceWhenReady(
() => {
if (!ip) return;
const msgs = messages[ip];
auth(
ip,
serverRef,
setServer,
(m) => addMessage(ip, m),
() => {},
msgs ? msgs[msgs.length - 1]?.id : undefined
);
},
[ip, messages],
[undefined, (v) => v[ip]]
);
return (
<AppSidebar app={app} server={server}>
<MessageBox
app={app}
channelName="General"
messages={messages[ip]?.filter((m) => m.channel_id === "general") || []}
sendMessage={(message) => {
serverRef.current?.send(
JSON.stringify({
type: "send_message",
params: {
channel_id: "general",
contents: message,
},
})
);
}}
/>
</AppSidebar>
);
}