wip

src/utils/hooks/useAccount.tsx

@@ -0,0 +1,11 @@
+import { getActiveAccount } from "@libs/storage";
+import { useQuery } from "@tanstack/react-query";
+
+export function useAccount() {
+	const { status, data: account } = useQuery(["currentAccount"], async () => {
+		const res = await getActiveAccount();
+		return res;
+	});
+
+	return { status, account };
+}

src/utils/hooks/useEvent.tsx

@@ -1,31 +1,40 @@
 import { createNote, getNoteByID } from "@libs/storage";
 import { RelayContext } from "@shared/relayProvider";
+import { useQuery } from "@tanstack/react-query";
+import { parser } from "@utils/parser";
 import { useContext } from "react";
-import useSWR from "swr";
-
-const fetcher = async ([, ndk, id]) => {
-	const result = await getNoteByID(id);
-
-	if (result) {
-		return result;
-	} else {
-		const event = await ndk.fetchEvent(id);
-		await createNote(
-			event.id,
-			event.pubkey,
-			event.kind,
-			event.tags,
-			event.content,
-			event.created_at,
-		);
-		event["event_id"] = event.id;
-		return event;
-	}
-};
 
 export function useEvent(id: string) {
 	const ndk = useContext(RelayContext);
-	const { data } = useSWR(["note", ndk, id], fetcher);
+	const { status, data, error, isFetching } = useQuery(
+		["note", id],
+		async () => {
+			const result = await getNoteByID(id);
+			if (result) {
+				result["content"] = parser(result);
+				return result;
+			} else {
+				const event = await ndk.fetchEvent(id);
+				await createNote(
+					event.id,
+					event.pubkey,
+					event.kind,
+					event.tags,
+					event.content,
+					event.created_at,
+				);
+				event["event_id"] = event.id;
+				// @ts-ignore
+				event["content"] = parser(event);
+				return event;
+			}
+		},
+		{
+			refetchOnWindowFocus: false,
+			refetchOnMount: false,
+			refetchOnReconnect: false,
+		},
+	);
 
-	return data;
+	return { status, data, error, isFetching };
 }

src/utils/hooks/useOpenGraph.tsx

@@ -1,28 +1,49 @@
 import { OPENGRAPH_KEY } from "@stores/constants";
+import { useQuery } from "@tanstack/react-query";
 import { fetch } from "@tauri-apps/api/http";
-import useSWR from "swr";
-
-const fetcher = async (url: string) => {
-	const result = await fetch(url, {
-		method: "GET",
-		timeout: 20,
-	});
-	if (result.ok) {
-		return result.data;
-	} else {
-		return null;
-	}
-};
 
 export function useOpenGraph(url: string) {
-	const { data, error, isLoading } = useSWR(
-		`https://skrape.dev/api/opengraph/?url=${url}&key=${OPENGRAPH_KEY}`,
-		fetcher,
+	const { status, data, error, isFetching } = useQuery(
+		["preview", url],
+		async () => {
+			const result = await fetch(
+				`https://skrape.dev/api/opengraph/?url=${url}&key=${OPENGRAPH_KEY}`,
+				{
+					method: "GET",
+					timeout: 10,
+				},
+			);
+			if (result.ok) {
+				if (Object.keys(result.data).length === 0) {
+					const origin = new URL(url).origin;
+					const result = await fetch(
+						`https://skrape.dev/api/opengraph/?url=${origin}&key=${OPENGRAPH_KEY}`,
+						{
+							method: "GET",
+							timeout: 10,
+						},
+					);
+					if (result.ok) {
+						return result.data;
+					}
+				} else {
+					return result.data;
+				}
+			} else {
+				return null;
+			}
+		},
+		{
+			refetchOnWindowFocus: false,
+			refetchOnMount: false,
+			refetchOnReconnect: false,
+		},
 	);
 
 	return {
-		data: data,
-		error: error,
-		isLoading: isLoading,
+		status,
+		data,
+		error,
+		isFetching,
 	};
 }

src/utils/hooks/useProfile.tsx

@@ -1,44 +1,38 @@
 import { createPleb, getPleb } from "@libs/storage";
-import NDK from "@nostr-dev-kit/ndk";
 import { RelayContext } from "@shared/relayProvider";
+import { useQuery } from "@tanstack/react-query";
 import { nip19 } from "nostr-tools";
 import { useContext } from "react";
-import useSWR from "swr";
 
-const fetcher = async ([, ndk, key]) => {
-	let npub: string;
-
-	if (key.substring(0, 4) === "npub") {
-		npub = key;
-	} else {
-		npub = nip19.npubEncode(key);
-	}
-
-	const current = Math.floor(Date.now() / 1000);
-	const result = await getPleb(npub);
-
-	if (result && result.created_at + 86400 > current) {
-		return result;
-	} else {
-		const user = ndk.getUser({ npub });
-		await user.fetchProfile();
-		await createPleb(key, user.profile);
-
-		return user.profile;
-	}
-};
-
-export function useProfile(key: string) {
+export function useProfile(id: string) {
 	const ndk = useContext(RelayContext);
-	const { data, error, isLoading } = useSWR(["profile", ndk, key], fetcher, {
-		revalidateIfStale: false,
-		revalidateOnFocus: false,
-		revalidateOnReconnect: false,
+	const {
+		status,
+		data: user,
+		error,
+		isFetching,
+	} = useQuery(["user", id], async () => {
+		let npub: string;
+
+		if (id.substring(0, 4) === "npub") {
+			npub = id;
+		} else {
+			npub = nip19.npubEncode(id);
+		}
+
+		const current = Math.floor(Date.now() / 1000);
+		const result = await getPleb(npub);
+
+		if (result && result.created_at + 86400 > current) {
+			return result;
+		} else {
+			const user = ndk.getUser({ npub });
+			await user.fetchProfile();
+			await createPleb(id, user.profile);
+
+			return user.profile;
+		}
 	});
 
-	return {
-		user: data,
-		isLoading,
-		isError: error,
-	};
+	return { status, user, error, isFetching };
 }

src/utils/parser.tsx

@@ -1,8 +1,8 @@
-import { Link } from "@shared/link";
 import { MentionUser } from "@shared/notes/mentions/user";
 import destr from "destr";
 import getUrls from "get-urls";
 import { parseReferences } from "nostr-tools";
+import { Link } from "react-router-dom";
 import reactStringReplace from "react-string-replace";
 
 function isJsonString(str) {
@@ -50,17 +50,33 @@ export function parser(event: any) {
 			// image url
 			content.images.push(url);
 			// remove url from original content
-			content.parsed = content.parsed.replace(url, "");
+			content.parsed = reactStringReplace(content.parsed, url, () => null);
 		} else if (url.match(/\.(mp4|webm|mov|ogv|avi|mp3)$/)) {
 			// video
 			content.videos.push(url);
 			// remove url from original content
-			content.parsed = content.parsed.replace(url, "");
+			content.parsed = reactStringReplace(content.parsed, url, () => null);
 		} else {
-			// push to store
-			content.links.push(url);
-			// remove url from original content
-			content.parsed = content.parsed.replace(url, "");
+			if (content.links.length < 1) {
+				// push to store
+				content.links.push(url);
+				// remove url from original content
+				content.parsed = reactStringReplace(content.parsed, url, () => null);
+			} else {
+				content.parsed = reactStringReplace(
+					content.parsed,
+					/#(\w+)/g,
+					(match, i) => (
+						<Link
+							key={match + i}
+							to={match}
+							className="text-fuchsia-500 hover:text-fuchsia-600 no-underline font-normal"
+						>
+							{match}
+						</Link>
+					),
+				);
+			}
 		}
 	});
 
@@ -70,7 +86,11 @@ export function parser(event: any) {
 		const event = item.event;
 		if (event) {
 			content.notes.push(event.id);
-			content.parsed = content.parsed.replace(item.text, "");
+			content.parsed = reactStringReplace(
+				content.parsed,
+				item.text,
+				() => null,
+			);
 		}
 		if (profile) {
 			content.parsed = reactStringReplace(
@@ -85,7 +105,7 @@ export function parser(event: any) {
 	content.parsed = reactStringReplace(content.parsed, /#(\w+)/g, (match, i) => (
 		<Link
 			key={match + i}
-			href={`/search/${match}`}
+			to={`/search/${match}`}
 			className="text-fuchsia-500 hover:text-fuchsia-600 no-underline font-normal"
 		>
 			#{match}