wip

2023-06-24 18:31:40 +07:00
parent 21d22320b3
commit 85b30f770c
102 changed files with 1844 additions and 2014 deletions
--- a/src/shared/notes/mentions/note.tsx
+++ b/src/shared/notes/mentions/note.tsx
@@ -3,18 +3,19 @@ import { Kind1063 } from "@shared/notes/contents/kind1063";
 import { NoteSkeleton } from "@shared/notes/skeleton";
 import { User } from "@shared/user";
 import { useEvent } from "@utils/hooks/useEvent";
-import { parser } from "@utils/parser";
 import { memo } from "react";

 export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
-	const data = useEvent(id);
+	const { status, data, isFetching } = useEvent(id);

-	const kind1 = data?.kind === 1 ? parser(data) : null;
+	const kind1 = data?.kind === 1 ? data.content : null;
 	const kind1063 = data?.kind === 1063 ? data.tags : null;

 	return (
 		<div className="mt-3 rounded-lg border border-zinc-800 px-3 py-3">
-			{data ? (
+			{isFetching || status === "loading" ? (
+				<NoteSkeleton />
+			) : (
 				<>
 					<User pubkey={data.pubkey} time={data.created_at} size="small" />
 					<div className="mt-2">
@@ -37,8 +38,6 @@ export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
 						)}
 					</div>
 				</>
-			) : (
-				<NoteSkeleton />
 			)}
 		</div>
 	);
--- a/src/shared/notes/mentions/user.tsx
+++ b/src/shared/notes/mentions/user.tsx
@@ -1,13 +1,13 @@
-import { Link } from "@shared/link";
 import { useProfile } from "@utils/hooks/useProfile";
 import { shortenKey } from "@utils/shortenKey";
+import { Link } from "react-router-dom";

 export function MentionUser({ pubkey }: { pubkey: string }) {
 	const { user } = useProfile(pubkey);

 	return (
 		<Link
-			href={`/app/user?pubkey=${pubkey}`}
+			to={`/app/user/${pubkey}`}
 			className="text-fuchsia-500 hover:text-fuchsia-600 no-underline font-normal"
 		>
 			@{user?.name || user?.displayName || shortenKey(pubkey)}
--- a/src/shared/notes/metadata.tsx
+++ b/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
--- a/src/shared/notes/parent.tsx
+++ b/src/shared/notes/parent.tsx
@@ -4,21 +4,22 @@ import { NoteMetadata } from "@shared/notes/metadata";
 import { NoteSkeleton } from "@shared/notes/skeleton";
 import { User } from "@shared/user";
 import { useEvent } from "@utils/hooks/useEvent";
-import { parser } from "@utils/parser";

 export function NoteParent({
 	id,
 	currentBlock,
 }: { id: string; currentBlock: number }) {
-	const data = useEvent(id);
+	const { status, data, isFetching } = useEvent(id);

-	const kind1 = data?.kind === 1 ? parser(data) : null;
+	const kind1 = data?.kind === 1 ? data.content : null;
 	const kind1063 = data?.kind === 1063 ? data.tags : null;

 	return (
 		<div className="relative overflow-hidden flex flex-col pb-6">
 			<div className="absolute left-[18px] top-0 h-full w-0.5 bg-gradient-to-t from-zinc-800 to-zinc-600" />
-			{data ? (
+			{isFetching || status === "loading" ? (
+				<NoteSkeleton />
+			) : (
 				<>
 					<User pubkey={data.pubkey} time={data.created_at} />
 					<div className="-mt-5 pl-[49px]">
@@ -46,8 +47,6 @@ export function NoteParent({
 						/>
 					</div>
 				</>
-			) : (
-				<NoteSkeleton />
 			)}
 		</div>
 	);
--- a/src/shared/notes/preview/link.tsx
+++ b/src/shared/notes/preview/link.tsx
@@ -1,16 +1,26 @@
 import { Image } from "@shared/image";
 import { useOpenGraph } from "@utils/hooks/useOpenGraph";

+function isValidURL(string: string) {
+	let url: URL;
+	try {
+		url = new URL(string);
+	} catch (_) {
+		return false;
+	}
+	return true;
+}
+
 export function LinkPreview({ urls }: { urls: string[] }) {
 	const domain = new URL(urls[0]);
-	const { data, error, isLoading } = useOpenGraph(urls[0]);
+	const { status, data, error, isFetching } = useOpenGraph(urls[0]);

 	return (
 		<div className="mt-3 max-w-[420px] overflow-hidden rounded-lg bg-zinc-800">
 			{error && <p>failed to load</p>}
-			{isLoading || !data ? (
+			{isFetching || status === "loading" ? (
 				<div className="flex flex-col">
-					<div className="w-full h-16 bg-zinc-700 animate-pulse" />
+					<div className="w-full h-44 bg-zinc-700 animate-pulse" />
 					<div className="flex flex-col gap-2 px-3 py-3">
 						<div className="w-2/3 h-3 rounded bg-zinc-700 animate-pulse" />
 						<div className="w-3/4 h-3 rounded bg-zinc-700 animate-pulse" />
@@ -19,6 +29,20 @@ export function LinkPreview({ urls }: { urls: string[] }) {
 						</span>
 					</div>
 				</div>
+			) : !data ? (
+				<a
+					className="flex flex-col px-3 py-3 rounded-lg border border-transparent hover:border-fuchsia-900"
+					href={urls[0]}
+					target="_blank"
+					rel="noreferrer"
+				>
+					<p className="leading-none text-sm text-zinc-400 line-clamp-3">
+						Can't fetch open graph, click to open website directly
+					</p>
+					<span className="mt-2.5 leading-none text-sm text-zinc-500">
+						{domain.hostname}
+					</span>
+				</a>
 			) : (
 				<a
 					className="flex flex-col rounded-lg border border-transparent hover:border-fuchsia-900"
@@ -26,13 +50,20 @@ export function LinkPreview({ urls }: { urls: string[] }) {
 					target="_blank"
 					rel="noreferrer"
 				>
-					{data["og:image"] && (
+					{isValidURL(data["og:image"]) ? (
 						<Image
 							src={data["og:image"]}
 							fallback="https://void.cat/d/XTmrMkpid8DGLjv1AzdvcW"
 							alt={urls[0]}
 							className="w-full h-44 object-cover rounded-t-lg bg-white"
 						/>
+					) : (
+						<Image
+							src="https://void.cat/d/XTmrMkpid8DGLjv1AzdvcW"
+							fallback="https://void.cat/d/XTmrMkpid8DGLjv1AzdvcW"
+							alt={urls[0]}
+							className="w-full h-44 object-cover rounded-t-lg bg-white"
+						/>
 					)}
 					<div className="flex flex-col gap-2 px-3 py-3">
 						<h5 className="leading-none font-medium text-zinc-200">
--- a/src/shared/notes/preview/video.tsx
+++ b/src/shared/notes/preview/video.tsx
@@ -1,17 +1,9 @@
-import { MediaOutlet, MediaPlayer } from "@vidstack/react";
-
 export function VideoPreview({ urls }: { urls: string[] }) {
 	return (
 		<div
 			onClick={(e) => e.stopPropagation()}
 			onKeyDown={(e) => e.stopPropagation()}
 			className="relative mt-3 max-w-[420px] flex w-full flex-col overflow-hidden rounded-lg bg-zinc-950"
-		>
-			{urls.map((url: string) => (
-				<MediaPlayer key={url} src={urls[0]} poster="" controls>
-					<MediaOutlet />
-				</MediaPlayer>
-			))}
-		</div>
+		/>
 	);
 }
--- a/src/shared/notes/replies/form.tsx
+++ b/src/shared/notes/replies/form.tsx
@@ -10,8 +10,9 @@ import { useContext, useState } from "react";

 export function NoteReplyForm({ id }: { id: string }) {
 	const ndk = useContext(RelayContext);
-	const account = useActiveAccount((state: any) => state.account);
-	const { user } = useProfile(account.npub);
+	const account = useActiveAccount((state) => state.account);
+
+	const { status, user } = useProfile(account.npub);

 	const [value, setValue] = useState("");

@@ -46,35 +47,41 @@ export function NoteReplyForm({ id }: { id: string }) {
 				/>
 			</div>
 			<div className="border-t border-zinc-800 w-full py-3 px-5">
-				<div className="flex w-full items-center justify-between">
-					<div className="inline-flex items-center gap-2">
-						<div className="relative h-9 w-9 shrink-0 rounded">
-							<Image
-								src={user?.image}
-								fallback={DEFAULT_AVATAR}
-								alt={account.npub}
-								className="h-9 w-9 rounded-md bg-white object-cover"
-							/>
+				{status === "loading" ? (
+					<div>
+						<p>Loading...</p>
+					</div>
+				) : (
+					<div className="flex w-full items-center justify-between">
+						<div className="inline-flex items-center gap-2">
+							<div className="relative h-9 w-9 shrink-0 rounded">
+								<Image
+									src={user?.image}
+									fallback={DEFAULT_AVATAR}
+									alt={account.npub}
+									className="h-9 w-9 rounded-md bg-white object-cover"
+								/>
+							</div>
+							<div>
+								<p className="mb-px leading-none text-sm text-zinc-400">
+									Reply as
+								</p>
+								<p className="leading-none text-sm font-medium text-zinc-100">
+									{user?.nip05 || user?.name}
+								</p>
+							</div>
 						</div>
-						<div>
-							<p className="mb-px leading-none text-sm text-zinc-400">
-								Reply as
-							</p>
-							<p className="leading-none text-sm font-medium text-zinc-100">
-								{user?.nip05 || user?.name}
-							</p>
+						<div className="flex items-center gap-2">
+							<Button
+								onClick={() => submitEvent()}
+								disabled={value.length === 0 ? true : false}
+								preset="publish"
+							>
+								Reply
+							</Button>
 						</div>
 					</div>
-					<div className="flex items-center gap-2">
-						<Button
-							onClick={() => submitEvent()}
-							disabled={value.length === 0 ? true : false}
-							preset="publish"
-						>
-							Reply
-						</Button>
-					</div>
-				</div>
+				)}
 			</div>
 		</div>
 	);
--- a/src/shared/notes/replies/list.tsx
+++ b/src/shared/notes/replies/list.tsx
@@ -2,12 +2,12 @@ import { getReplies } from "@libs/storage";
 import { NDKEvent } from "@nostr-dev-kit/ndk";
 import { EmptyIcon } from "@shared/icons";
 import { Reply } from "@shared/notes/replies/item";
-import useSWR from "swr";
-
-const fetcher = ([, id]) => getReplies(id);
+import { useQuery } from "@tanstack/react-query";

 export function RepliesList({ parent_id }: { parent_id: string }) {
-	const { data }: any = useSWR(["note-replies", parent_id], fetcher);
+	const { data } = useQuery(["replies", parent_id], async () => {
+		return await getReplies(parent_id);
+	});

 	return (
 		<div className="mt-5">
--- a/src/shared/notes/repost.tsx
+++ b/src/shared/notes/repost.tsx
@@ -4,7 +4,6 @@ import { NoteMetadata } from "@shared/notes/metadata";
 import { NoteSkeleton } from "@shared/notes/skeleton";
 import { User } from "@shared/user";
 import { useEvent } from "@utils/hooks/useEvent";
-import { parser } from "@utils/parser";
 import { getRepostID } from "@utils/transform";
 import { LumeEvent } from "@utils/types";

@@ -13,14 +12,16 @@ export function Repost({
 	currentBlock,
 }: { event: LumeEvent; currentBlock?: number }) {
 	const repostID = getRepostID(event.tags);
-	const data = useEvent(repostID);
+	const { status, data, isFetching } = useEvent(repostID);

-	const kind1 = data?.kind === 1 ? parser(data) : null;
+	const kind1 = data?.kind === 1 ? data.content : null;
 	const kind1063 = data?.kind === 1063 ? data.tags : null;

 	return (
 		<div className="relative overflow-hidden flex flex-col mt-12">
-			{data ? (
+			{isFetching || status === "loading" ? (
+				<NoteSkeleton />
+			) : (
 				<>
 					<User pubkey={data.pubkey} time={data.created_at} />
 					<div className="-mt-5 pl-[49px]">
@@ -48,8 +49,6 @@ export function Repost({
 						/>
 					</div>
 				</>
-			) : (
-				<NoteSkeleton />
 			)}
 		</div>
 	);