70 lines
2.0 KiB
TypeScript
70 lines
2.0 KiB
TypeScript
import ChatMessageForm from '@lume/app/chat/components/messages/form';
|
|
import { RelayContext } from '@lume/shared/relayProvider';
|
|
import { chatMessagesAtom } from '@lume/stores/chat';
|
|
import { READONLY_RELAYS } from '@lume/stores/constants';
|
|
import { useActiveAccount } from '@lume/utils/hooks/useActiveAccount';
|
|
import { usePageContext } from '@lume/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('@lume/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(pubkey ? ['chat', pubkey] : null, ([, key], {}: any) => {
|
|
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(() => {
|
|
// reset channel messages
|
|
resetChatMessages();
|
|
});
|
|
|
|
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>
|
|
);
|
|
}
|