102 lines
2.6 KiB
TypeScript
102 lines
2.6 KiB
TypeScript
import BaseLayout from '@layouts/base';
|
|
import WithSidebarLayout from '@layouts/withSidebar';
|
|
|
|
import { ChannelMessages } from '@components/channels/messages/index';
|
|
import FormChannelMessage from '@components/form/channelMessage';
|
|
import { RelayContext } from '@components/relaysProvider';
|
|
|
|
import { channelReplyAtom } from '@stores/channel';
|
|
|
|
import useLocalStorage from '@rehooks/local-storage';
|
|
import { useResetAtom } from 'jotai/utils';
|
|
import { useRouter } from 'next/router';
|
|
import {
|
|
JSXElementConstructor,
|
|
ReactElement,
|
|
ReactFragment,
|
|
ReactPortal,
|
|
useContext,
|
|
useEffect,
|
|
useRef,
|
|
useState,
|
|
} from 'react';
|
|
|
|
export default function Page() {
|
|
const [pool, relays]: any = useContext(RelayContext);
|
|
|
|
const router = useRouter();
|
|
const id: string | string[] = router.query.id || null;
|
|
|
|
const [messages, setMessages] = useState([]);
|
|
const [activeAccount]: any = useLocalStorage('activeAccount', {});
|
|
const resetChannelReply = useResetAtom(channelReplyAtom);
|
|
|
|
const muted = useRef(new Set());
|
|
const hided = useRef(new Set());
|
|
|
|
useEffect(() => {
|
|
// reset channel reply
|
|
resetChannelReply();
|
|
// subscribe event
|
|
const unsubscribe = pool.subscribe(
|
|
[
|
|
{
|
|
authors: [activeAccount.pubkey],
|
|
kinds: [43, 44],
|
|
since: 0,
|
|
},
|
|
{
|
|
'#e': [id],
|
|
kinds: [42],
|
|
since: 0,
|
|
},
|
|
],
|
|
relays,
|
|
(event: any) => {
|
|
if (event.kind === 44) {
|
|
muted.current = muted.current.add(event.tags[0][1]);
|
|
} else if (event.kind === 43) {
|
|
hided.current = hided.current.add(event.tags[0][1]);
|
|
} else {
|
|
if (muted.current.has(event.pubkey)) {
|
|
console.log('muted');
|
|
} else if (hided.current.has(event.id)) {
|
|
console.log('hided');
|
|
} else {
|
|
setMessages((messages) => [event, ...messages]);
|
|
}
|
|
}
|
|
}
|
|
);
|
|
|
|
return () => {
|
|
unsubscribe;
|
|
};
|
|
}, [id, pool, relays, activeAccount.pubkey, resetChannelReply]);
|
|
|
|
return (
|
|
<div className="flex h-full w-full flex-col justify-between">
|
|
<ChannelMessages data={messages.sort((a, b) => a.created_at - b.created_at)} />
|
|
<div className="shrink-0 p-3">
|
|
<FormChannelMessage eventId={id} />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
Page.getLayout = function getLayout(
|
|
page:
|
|
| string
|
|
| number
|
|
| boolean
|
|
| ReactElement<unknown, string | JSXElementConstructor<unknown>>
|
|
| ReactFragment
|
|
| ReactPortal
|
|
) {
|
|
return (
|
|
<BaseLayout>
|
|
<WithSidebarLayout>{page}</WithSidebarLayout>
|
|
</BaseLayout>
|
|
);
|
|
};
|