add link preview

src/utils/hooks/useEvent.tsx

@@ -0,0 +1,57 @@
+import { RelayContext } from "@shared/relayProvider";
+import { useActiveAccount } from "@stores/accounts";
+import { READONLY_RELAYS } from "@stores/constants";
+import { createNote, getNoteByID } from "@utils/storage";
+import { getParentID } from "@utils/transform";
+import { useContext } from "react";
+import useSWR from "swr";
+import useSWRSubscription from "swr/subscription";
+
+const fetcher = ([, id]) => getNoteByID(id);
+
+export function useEvent(id: string) {
+	const pool: any = useContext(RelayContext);
+	const account = useActiveAccount((state: any) => state.account);
+
+	const { data: cache } = useSWR(["event", id], fetcher);
+	const { data: newest } = useSWRSubscription(
+		!cache ? id : null,
+		(key, { next }) => {
+			const unsubscribe = pool.subscribe(
+				[
+					{
+						ids: [key],
+					},
+				],
+				READONLY_RELAYS,
+				(event: any) => {
+					const parentID = getParentID(event.tags, event.id);
+					// insert event to local database
+					createNote(
+						event.id,
+						account.id,
+						event.pubkey,
+						event.kind,
+						event.tags,
+						event.content,
+						event.created_at,
+						parentID,
+					);
+					// update state
+					next(null, event);
+				},
+				undefined,
+				undefined,
+				{
+					unsubscribeOnEose: true,
+				},
+			);
+
+			return () => {
+				unsubscribe();
+			};
+		},
+	);
+
+	return cache ? cache : newest;
+}

src/utils/hooks/useOpenGraph.tsx

@@ -0,0 +1,28 @@
+import { OPENGRAPH_KEY } from "@stores/constants";
+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,
+	);
+
+	return {
+		data: data,
+		error: error,
+		isLoading: isLoading,
+	};
+}

src/utils/parser.tsx

@@ -13,12 +13,14 @@ export function noteParser(event: Event) {
 		notes: string[];
 		images: string[];
 		videos: string[];
+		links: string[];
 	} = {
 		original: event.content,
 		parsed: event.content,
 		notes: [],
 		images: [],
 		videos: [],
+		links: [],
 	};
 
 	// handle media
@@ -36,10 +38,15 @@ export function noteParser(event: Event) {
 			content.videos.push(url);
 			// remove url from original content
 			content.parsed = content.parsed.replace(url, "");
+		} else {
+			// push to store
+			content.links.push(url);
+			// remove url from original content
+			content.parsed = content.parsed.replace(url, "");
 		}
 	});
 
-	// map hashtag to em
+	// map hashtag to link
 	content.original.match(/#(\w+)(?!:\/\/)/g)?.forEach((item) => {
 		content.parsed = content.parsed.replace(item, `[${item}](/search/${item})`);
 	});
@@ -47,13 +54,6 @@ export function noteParser(event: Event) {
 	// handle nostr mention
 	references.forEach((item) => {
 		const profile = item.profile;
-		const event = item.event;
-
-		if (event) {
-			content.notes.push(event.id);
-			content.parsed = content.parsed.replace(item.text, "");
-		}
-
 		if (profile) {
 			content.parsed = content.parsed.replace(item.text, `*${profile.pubkey}*`);
 		}