68 lines
2.0 KiB
TypeScript
68 lines
2.0 KiB
TypeScript
import NoteLike from '@app/note/components/metadata/like';
|
|
import NoteReply from '@app/note/components/metadata/reply';
|
|
import NoteRepost from '@app/note/components/metadata/repost';
|
|
|
|
import { RelayContext } from '@shared/relayProvider';
|
|
|
|
import ZapIcon from '@icons/zap';
|
|
|
|
import { READONLY_RELAYS } from '@stores/constants';
|
|
|
|
import { useContext, useState } from 'react';
|
|
import useSWRSubscription from 'swr/subscription';
|
|
|
|
export default function NoteMetadata({ id, eventPubkey }: { id: string; eventPubkey: string }) {
|
|
const pool: any = useContext(RelayContext);
|
|
|
|
const [replies, setReplies] = useState(0);
|
|
const [reposts, setReposts] = useState(0);
|
|
const [likes, setLikes] = useState(0);
|
|
|
|
useSWRSubscription(id ? ['note-metadata', id] : null, ([, key], {}) => {
|
|
const unsubscribe = pool.subscribe(
|
|
[
|
|
{
|
|
'#e': [key],
|
|
since: 0,
|
|
kinds: [1, 6, 7],
|
|
limit: 20,
|
|
},
|
|
],
|
|
READONLY_RELAYS,
|
|
(event: any) => {
|
|
switch (event.kind) {
|
|
case 1:
|
|
setReplies((replies) => replies + 1);
|
|
break;
|
|
case 6:
|
|
setReposts((reposts) => reposts + 1);
|
|
break;
|
|
case 7:
|
|
if (event.content === '🤙' || event.content === '+') {
|
|
setLikes((likes) => likes + 1);
|
|
}
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
}
|
|
);
|
|
|
|
return () => {
|
|
unsubscribe();
|
|
};
|
|
});
|
|
|
|
return (
|
|
<div className="mt-4 flex h-12 items-center gap-16 border-t border-zinc-800/50">
|
|
<NoteReply id={id} replies={replies} />
|
|
<NoteLike id={id} pubkey={eventPubkey} likes={likes} />
|
|
<NoteRepost id={id} pubkey={eventPubkey} reposts={reposts} />
|
|
<button className="group inline-flex w-min items-center gap-1.5">
|
|
<ZapIcon width={20} height={20} className="text-zinc-400 group-hover:text-orange-400" />
|
|
<span className="text-sm leading-none text-zinc-400 group-hover:text-zinc-200">{0}</span>
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|