wip

src/shared/notes/metadata.tsx

@@ -5,57 +5,9 @@ import { NoteReply } from "@shared/notes/metadata/reply";
 import { NoteRepost } from "@shared/notes/metadata/repost";
 import { NoteZap } from "@shared/notes/metadata/zap";
 import { RelayContext } from "@shared/relayProvider";
+import { useQuery } from "@tanstack/react-query";
 import { decode } from "light-bolt11-decoder";
 import { useContext } from "react";
-import useSWR from "swr";
-
-const fetcher = async ([, ndk, id]) => {
-	let replies = 0;
-	let reposts = 0;
-	let zap = 0;
-
-	const filter: NDKFilter = {
-		"#e": [id],
-		kinds: [1, 6, 9735],
-	};
-
-	const events = await ndk.fetchEvents(filter);
-	events.forEach((event: NDKEvent) => {
-		switch (event.kind) {
-			case 1:
-				replies += 1;
-				createReplyNote(
-					id,
-					event.id,
-					event.pubkey,
-					event.kind,
-					event.tags,
-					event.content,
-					event.created_at,
-				);
-				break;
-			case 6:
-				reposts += 1;
-				break;
-			case 9735: {
-				const bolt11 = event.tags.find((tag) => tag[0] === "bolt11")[1];
-				if (bolt11) {
-					const decoded = decode(bolt11);
-					const amount = decoded.sections.find(
-						(item) => item.name === "amount",
-					);
-					const sats = amount.value / 1000;
-					zap += sats;
-				}
-				break;
-			}
-			default:
-				break;
-		}
-	});
-
-	return { replies, reposts, zap };
-};
 
 export function NoteMetadata({
 	id,
@@ -67,11 +19,60 @@ export function NoteMetadata({
 	currentBlock?: number;
 }) {
 	const ndk = useContext(RelayContext);
-	const { data, isLoading } = useSWR(["note-metadata", ndk, id], fetcher);
+	const { status, data, isFetching } = useQuery(
+		["note-metadata", id],
+		async () => {
+			let replies = 0;
+			let reposts = 0;
+			let zap = 0;
+
+			const filter: NDKFilter = {
+				"#e": [id],
+				kinds: [1, 6, 9735],
+			};
+
+			const events = await ndk.fetchEvents(filter);
+			events.forEach((event: NDKEvent) => {
+				switch (event.kind) {
+					case 1:
+						replies += 1;
+						createReplyNote(
+							id,
+							event.id,
+							event.pubkey,
+							event.kind,
+							event.tags,
+							event.content,
+							event.created_at,
+						);
+						break;
+					case 6:
+						reposts += 1;
+						break;
+					case 9735: {
+						const bolt11 = event.tags.find((tag) => tag[0] === "bolt11")[1];
+						if (bolt11) {
+							const decoded = decode(bolt11);
+							const amount = decoded.sections.find(
+								(item) => item.name === "amount",
+							);
+							const sats = amount.value / 1000;
+							zap += sats;
+						}
+						break;
+					}
+					default:
+						break;
+				}
+			});
+
+			return { replies, reposts, zap };
+		},
+	);
 
 	return (
 		<div className="inline-flex items-center w-full h-12 mt-2">
-			{!data || isLoading ? (
+			{status === "loading" || isFetching ? (
 				<>
 					<div className="w-20 group inline-flex items-center gap-1.5">
 						<ReplyIcon