81 lines
1.9 KiB
TypeScript
81 lines
1.9 KiB
TypeScript
import ChatMessageForm from "@app/chat/components/messages/form";
|
|
|
|
import { RelayContext } from "@shared/relayProvider";
|
|
|
|
import { chatMessagesAtom } from "@stores/chat";
|
|
import { READONLY_RELAYS } from "@stores/constants";
|
|
|
|
import { useActiveAccount } from "@utils/hooks/useActiveAccount";
|
|
import { usePageContext } from "@utils/hooks/usePageContext";
|
|
|
|
import { useSetAtom } from "jotai";
|
|
import { useResetAtom } from "jotai/utils";
|
|
import { Suspense, lazy, useContext, useEffect } from "react";
|
|
import useSWRSubscription from "swr/subscription";
|
|
|
|
const ChatMessageList = lazy(() => import("@app/chat/components/messageList"));
|
|
|
|
export function Page() {
|
|
const pool: any = useContext(RelayContext);
|
|
const pageContext = usePageContext();
|
|
const searchParams: any = pageContext.urlParsed.search;
|
|
|
|
const pubkey = searchParams.pubkey;
|
|
|
|
const { account } = useActiveAccount();
|
|
|
|
const setChatMessages = useSetAtom(chatMessagesAtom);
|
|
const resetChatMessages = useResetAtom(chatMessagesAtom);
|
|
|
|
useSWRSubscription(account ? ["chat", pubkey] : null, ([, key]) => {
|
|
const unsubscribe = pool.subscribe(
|
|
[
|
|
{
|
|
kinds: [4],
|
|
authors: [key],
|
|
"#p": [account.pubkey],
|
|
limit: 20,
|
|
},
|
|
{
|
|
kinds: [4],
|
|
authors: [account.pubkey],
|
|
"#p": [key],
|
|
limit: 20,
|
|
},
|
|
],
|
|
READONLY_RELAYS,
|
|
(event: any) => {
|
|
setChatMessages((prev) => [...prev, event]);
|
|
},
|
|
);
|
|
|
|
return () => {
|
|
unsubscribe();
|
|
};
|
|
});
|
|
|
|
useEffect(() => {
|
|
let ignore = false;
|
|
|
|
if (!ignore) {
|
|
// reset chat messages
|
|
resetChatMessages();
|
|
}
|
|
|
|
return () => {
|
|
ignore = true;
|
|
};
|
|
});
|
|
|
|
return (
|
|
<div className="relative flex h-full w-full flex-col justify-between rounded-lg border border-zinc-800 bg-zinc-900 shadow-input shadow-black/20">
|
|
<Suspense fallback={<p>Loading...</p>}>
|
|
<ChatMessageList />
|
|
</Suspense>
|
|
<div className="shrink-0 p-3">
|
|
<ChatMessageForm receiverPubkey={pubkey} />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|