94 lines
2.6 KiB
TypeScript
94 lines
2.6 KiB
TypeScript
import { ChatSidebar } from "../components/sidebar";
|
|
import { ChatMessageList } from "@app/chat/components/messageList";
|
|
import { ChatMessageForm } from "@app/chat/components/messages/form";
|
|
import { RelayContext } from "@shared/relayProvider";
|
|
import { useActiveAccount } from "@stores/accounts";
|
|
import { useChatMessages } from "@stores/chats";
|
|
import { READONLY_RELAYS } from "@stores/constants";
|
|
import { dateToUnix } from "@utils/date";
|
|
import { usePageContext } from "@utils/hooks/usePageContext";
|
|
import { useContext, useEffect } from "react";
|
|
import useSWRSubscription from "swr/subscription";
|
|
|
|
export function Page() {
|
|
const pool: any = useContext(RelayContext);
|
|
const account = useActiveAccount((state: any) => state.account);
|
|
|
|
const pageContext = usePageContext();
|
|
const searchParams: any = pageContext.urlParsed.search;
|
|
const pubkey = searchParams.pubkey;
|
|
|
|
const [fetchMessages, addMessage, clear] = useChatMessages((state: any) => [
|
|
state.fetch,
|
|
state.add,
|
|
state.clear,
|
|
]);
|
|
|
|
useSWRSubscription(account ? ["chat", pubkey] : null, ([, key]) => {
|
|
const unsubscribe = pool.subscribe(
|
|
[
|
|
{
|
|
kinds: [4],
|
|
authors: [key],
|
|
"#p": [account.pubkey],
|
|
since: dateToUnix(),
|
|
},
|
|
],
|
|
READONLY_RELAYS,
|
|
(event: any) => {
|
|
addMessage({
|
|
receiver_pubkey: account.pubkey,
|
|
sender_pubkey: event.pubkey,
|
|
content: event.content,
|
|
tags: event.tags,
|
|
created_at: event.created_at,
|
|
});
|
|
},
|
|
);
|
|
|
|
return () => {
|
|
unsubscribe();
|
|
};
|
|
});
|
|
|
|
useEffect(() => {
|
|
fetchMessages(account.pubkey, pubkey);
|
|
|
|
return () => {
|
|
clear();
|
|
};
|
|
}, [pubkey]);
|
|
|
|
return (
|
|
<div className="h-full w-full grid grid-cols-3">
|
|
<div className="col-span-2 flex flex-col justify-between border-r border-zinc-900">
|
|
<div
|
|
data-tauri-drag-region
|
|
className="h-11 w-full shrink-0 inline-flex items-center justify-center border-b border-zinc-900"
|
|
>
|
|
<h3 className="font-semibold text-zinc-100">Encrypted Chat</h3>
|
|
</div>
|
|
<div className="w-full flex-1 p-3">
|
|
<div className="flex h-full flex-col justify-between rounded-md bg-zinc-900 shadow-input shadow-black/20">
|
|
<ChatMessageList />
|
|
<div className="shrink-0 px-5 p-3 border-t border-zinc-800">
|
|
<ChatMessageForm
|
|
receiverPubkey={pubkey}
|
|
userPubkey={account.pubkey}
|
|
userPrivkey={account.privkey}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="col-span-1">
|
|
<div
|
|
data-tauri-drag-region
|
|
className="h-11 w-full shrink-0 inline-flex items-center justify-center border-b border-zinc-900"
|
|
/>
|
|
<ChatSidebar pubkey={pubkey} />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|