Files
lume/src/components/note/repost.tsx
2023-03-04 21:04:34 +07:00

53 lines
1.5 KiB
TypeScript

import { RelayContext } from '@components/contexts/relay';
import { UserRepost } from '@components/note/atoms/userRepost';
import { Content } from '@components/note/content';
import { Placeholder } from '@components/note/placeholder';
import { LoopIcon } from '@radix-ui/react-icons';
import useLocalStorage from '@rehooks/local-storage';
import { memo, useContext, useState } from 'react';
export const Repost = memo(function Repost({ root, user }: { root: any; user: string }) {
const relayPool: any = useContext(RelayContext);
const [relays]: any = useLocalStorage('relays');
const [events, setEvents] = useState([]);
relayPool.subscribe(
[
{
ids: [root[0][1]],
since: 0,
kinds: [1],
},
],
relays,
(event: any) => {
setEvents((events) => [event, ...events]);
},
undefined,
(events: any, relayURL: any) => {
console.log(events, relayURL);
}
);
if (events !== null && Object.keys(events).length > 0) {
return (
<div className="flex h-min min-h-min w-full select-text flex-col border-b border-zinc-800 py-6 px-6">
<div className="flex items-center gap-1 pl-8 text-sm">
<LoopIcon className="h-4 w-4 text-zinc-400" />
<div className="ml-2">
<UserRepost pubkey={user} />
</div>
</div>
{events[0].content && <Content data={events[0]} />}
</div>
);
} else {
return (
<div className="border-b border-zinc-800">
<Placeholder />
</div>
);
}
});