80 lines
1.9 KiB
TypeScript
80 lines
1.9 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
|
|
type="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>
|
|
);
|
|
}
|