mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-18 11:13:30 +00:00
migrated channel messages to jotai state (same as chat)
This commit is contained in:
parent
00e28529dd
commit
a573f9e4eb
@ -4,17 +4,19 @@ import { ChannelMessages } from '@components/channels/messages/index';
|
||||
import FormChannelMessage from '@components/form/channelMessage';
|
||||
import { RelayContext } from '@components/relaysProvider';
|
||||
|
||||
import { channelReplyAtom } from '@stores/channel';
|
||||
import { channelMessagesAtom, channelReplyAtom } from '@stores/channel';
|
||||
|
||||
import useLocalStorage from '@rehooks/local-storage';
|
||||
import { useSetAtom } from 'jotai';
|
||||
import { useResetAtom } from 'jotai/utils';
|
||||
import { useContext, useEffect, useRef, useState } from 'react';
|
||||
import { Suspense, useContext, useEffect, useRef } from 'react';
|
||||
|
||||
export default function Page({ params }: { params: { id: string } }) {
|
||||
const [pool, relays]: any = useContext(RelayContext);
|
||||
|
||||
const [messages, setMessages] = useState([]);
|
||||
const [activeAccount]: any = useLocalStorage('activeAccount', {});
|
||||
|
||||
const setChannelMessages = useSetAtom(channelMessagesAtom);
|
||||
const resetChannelMessages = useResetAtom(channelMessagesAtom);
|
||||
const resetChannelReply = useResetAtom(channelReplyAtom);
|
||||
|
||||
const muted = useRef(new Set());
|
||||
@ -23,6 +25,8 @@ export default function Page({ params }: { params: { id: string } }) {
|
||||
useEffect(() => {
|
||||
// reset channel reply
|
||||
resetChannelReply();
|
||||
// reset channel messages
|
||||
resetChannelMessages();
|
||||
// subscribe event
|
||||
const unsubscribe = pool.subscribe(
|
||||
[
|
||||
@ -49,7 +53,7 @@ export default function Page({ params }: { params: { id: string } }) {
|
||||
} else if (hided.current.has(event.id)) {
|
||||
console.log('hided');
|
||||
} else {
|
||||
setMessages((messages) => [event, ...messages]);
|
||||
setChannelMessages((messages) => [event, ...messages]);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -58,11 +62,13 @@ export default function Page({ params }: { params: { id: string } }) {
|
||||
return () => {
|
||||
unsubscribe();
|
||||
};
|
||||
}, [pool, relays, activeAccount.pubkey, params.id, resetChannelReply]);
|
||||
}, [pool, relays, activeAccount.pubkey, params.id, setChannelMessages, resetChannelReply, resetChannelMessages]);
|
||||
|
||||
return (
|
||||
<div className="flex h-full w-full flex-col justify-between">
|
||||
<ChannelMessages data={messages.sort((a, b) => a.created_at - b.created_at)} />
|
||||
<Suspense fallback={<>Loading...</>}>
|
||||
<ChannelMessages />
|
||||
</Suspense>
|
||||
<div className="shrink-0 p-3">
|
||||
<FormChannelMessage eventId={params.id} />
|
||||
</div>
|
||||
|
@ -1,11 +1,17 @@
|
||||
import ChannelMessageItem from '@components/channels/messages/item';
|
||||
import { Placeholder } from '@components/note/placeholder';
|
||||
|
||||
import { sortedChannelMessagesAtom } from '@stores/channel';
|
||||
|
||||
import { useAtomValue } from 'jotai';
|
||||
import { useCallback, useRef } from 'react';
|
||||
import { Virtuoso } from 'react-virtuoso';
|
||||
|
||||
export const ChannelMessages = ({ data }: { data: any }) => {
|
||||
export const ChannelMessages = () => {
|
||||
const virtuosoRef = useRef(null);
|
||||
|
||||
const data = useAtomValue(sortedChannelMessagesAtom);
|
||||
|
||||
const itemContent: any = useCallback(
|
||||
(index: string | number) => {
|
||||
return <ChannelMessageItem data={data[index]} />;
|
||||
@ -25,6 +31,7 @@ export const ChannelMessages = ({ data }: { data: any }) => {
|
||||
<Virtuoso
|
||||
ref={virtuosoRef}
|
||||
data={data}
|
||||
components={COMPONENTS}
|
||||
itemContent={itemContent}
|
||||
computeItemKey={computeItemKey}
|
||||
initialTopMostItemIndex={data.length - 1}
|
||||
@ -37,3 +44,8 @@ export const ChannelMessages = ({ data }: { data: any }) => {
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const COMPONENTS = {
|
||||
EmptyPlaceholder: () => <Placeholder />,
|
||||
ScrollSeekPlaceholder: () => <Placeholder />,
|
||||
};
|
||||
|
@ -1,4 +1,11 @@
|
||||
import { atom } from 'jotai';
|
||||
import { atomWithReset } from 'jotai/utils';
|
||||
|
||||
// channel reply id
|
||||
export const channelReplyAtom = atomWithReset({ id: null, pubkey: null, content: null });
|
||||
// channel messages
|
||||
export const channelMessagesAtom = atomWithReset([]);
|
||||
export const sortedChannelMessagesAtom = atom((get) => {
|
||||
const messages = get(channelMessagesAtom);
|
||||
return messages.sort((x: { created_at: number }, y: { created_at: number }) => x.created_at - y.created_at);
|
||||
});
|
||||
|
Loading…
Reference in New Issue
Block a user