fix errors

2024-09-19 11:43:30 +00:00 · 2023-06-06 17:32:26 +07:00 · 2023-06-06 17:32:26 +07:00 · 8fa70c3fd3
commit 8fa70c3fd3
parent 1b56684cf5
3 changed files with 51 additions and 185 deletions
--- a/src/app/auth/pages/index.page.tsx
+++ b/src/app/auth/pages/index.page.tsx
@ -1,130 +1,26 @@
-import { ArrowRightIcon } from "@shared/icons";
-import { Image } from "@shared/image";
-
-const PLEBS = [
-	"https://133332.xyz/p.jpg",
-	"https://void.cat/d/3Bp6jSHURFNQ9u3pK8nwtq.webp",
-	"https://i.imgur.com/f8SyhRL.jpg",
-	"http://nostr.build/i/6369.jpg",
-	"https://pbs.twimg.com/profile_images/1622010345589190656/mAPqsmtz_400x400.jpg",
-	"https://media.tenor.com/l5arkXy9RfIAAAAd/thunder.gif",
-	"https://nostr.build/i/p/nostr.build_0e412058980ed2ac4adf3de639304c9e970e2745ba9ca19c75f984f4f6da4971.jpeg",
-	"https://nostr.build/i/nostr.build_864a019a6c1d3a90a17363553d32b71de618d250f02cf0a59ca19fb3029fd5bc.jpg",
-	"https://void.cat/d/8zE9T8a39YfUVjrLM4xcpE.webp",
-	"https://avatars.githubusercontent.com/u/89577423",
-	"https://pbs.twimg.com/profile_images/1363180486080663554/iN-r_BiM_400x400.jpg",
-	"https://void.cat/d/JUBBqXgCcGBEh7jUgJaayy",
-	"https://phase1.attract-eu.com/wp-content/uploads/2020/03/ATTRACT_HPLM.png",
-	"https://www.retro-synthwave.com/wp-content/uploads/2017/01/PowerGlove-23.jpg",
-	"https://void.cat/d/KvAEMvYNmy1rfCH6a7HZzh.webp",
-	"https://media.giphy.com/media/NqfMNCkyGwtXhKFlCR/giphy-downsized-large.gif",
-	"https://i.imgur.com/VGpUNFS.jpg",
-	"https://nostr.build/i/p/nostr.build_b39254db43d5557df99d1eb516f1c2f56a21a01b10c248f6eb66aa827c9a90f4.jpeg",
-	"https://davidcoen.it/wp-content/uploads/2020/11/7004972-taglio.jpg",
-	"https://pbs.twimg.com/profile_images/1570432066348515330/26PtCuwF_400x400.jpg",
-	"https://nostr.build/i/nostr.build_9d33ee801aa08955be174554832952ab95a65d5e015176834c8aa9a4e2f2e3a5.jpg",
-	"https://www.linkpicture.com/q/0FE78CFF-C931-4568-A7AA-DD8AEE889992.jpeg",
-	"https://nostr.build/i/nostr.build_97d6e2d25dd92422eb3d6d645b7cee9ed9c614f331be7e6f7db9ccfdbc5ee260.png",
-	"https://pbs.twimg.com/profile_images/1569570198348337152/-n1KD74u_400x400.jpg",
-	"https://pbs.twimg.com/profile_images/1600149653898596354/5PVe-r-J_400x400.jpg",
-	"https://pbs.twimg.com/profile_images/1639659216372658178/Dnn-Ysp-_400x400.jpg",
-	"https://pbs.twimg.com/profile_images/1554429112978120706/yr1hXl6R_400x400.jpg",
-	"https://pbs.twimg.com/profile_images/1615478486688272385/q2ECeZDX_400x400.jpg",
-	"https://pbs.twimg.com/profile_images/1638644441773748226/tNsA6RpG_400x400.jpg",
-	"https://pbs.twimg.com/profile_images/1607882836740120576/3Tg1mTYJ_400x400.jpg",
-	"https://pbs.twimg.com/profile_images/1401907430339002369/WKrP9Esn_400x400.jpg",
-	"https://pbs.twimg.com/profile_images/1523971278478131200/TMPzfvhE_400x400.jpg",
-	"https://pbs.twimg.com/profile_images/1626421539884204032/aj4tmzsk_400x400.png",
-	"https://pbs.twimg.com/profile_images/1582771691779985408/C9MHYIgt_400x400.jpg",
-	"https://pbs.twimg.com/profile_images/1409612480465276931/38Vyx4e8_400x400.jpg",
-	"https://pbs.twimg.com/profile_images/1549826566787588098/MlduJCZO_400x400.jpg",
-	"https://pbs.twimg.com/profile_images/539211568035004416/sBMjPR9q_400x400.jpeg",
-	"https://pbs.twimg.com/profile_images/1548660003522887682/1QMHmles_400x400.jpg",
-	"https://pbs.twimg.com/profile_images/1362497143999787013/KLUoN1Vn_400x400.png",
-	"https://pbs.twimg.com/profile_images/1600434913240563713/AssmMGwf_400x400.jpg",
-];
-
-const DURATION = 50000;
-const ROWS = 7;
-const PLEBS_PER_ROW = 20;
-
-const random = (min, max) => Math.floor(Math.random() * (max - min)) + min;
-const shuffle = (arr) => [...arr].sort(() => 0.5 - Math.random());
-
-const InfiniteLoopSlider = ({
-	children,
-	duration,
-	reverse,
-}: { children: any; duration: any; reverse: any }) => {
-	return (
-		<div>
-			<div
-				className="flex w-fit"
-				style={{
-					animationName: "loop",
-					animationIterationCount: "infinite",
-					animationDirection: reverse ? "reverse" : "normal",
-					animationDuration: `${duration}ms`,
-					animationTimingFunction: "linear",
-				}}
-			>
-				{children}
-				{children}
-			</div>
-		</div>
-	);
-};
-
 export function Page() {
 	return (
-		<div className="grid h-full w-full grid-rows-5">
-			<div className="row-span-3 overflow-hidden">
-				<div className="relaive flex w-full max-w-full shrink-0 flex-col gap-4 overflow-hidden p-4">
-					{[...new Array(ROWS)].map((_, i) => (
-						<InfiniteLoopSlider
-							key={`item-${i}`}
-							duration={random(DURATION - 5000, DURATION + 20000)}
-							reverse={i % 2}
-						>
-							{shuffle(PLEBS)
-								.slice(0, PLEBS_PER_ROW)
-								.map((tag) => (
-									<div
-										key={tag}
-										className="relative mr-4 h-11 w-11 gap-2 rounded-md bg-zinc-900 shadow-xl"
-									>
-										<Image
-											src={tag}
-											alt={tag}
-											className="h-11 w-11 rounded-md border border-zinc-900"
-										/>
-									</div>
-								))}
-						</InfiniteLoopSlider>
-					))}
-					<div className="pointer-events-none absolute inset-0 bg-fade" />
-				</div>
-			</div>
-			<div className="row-span-2 flex w-full flex-col items-center gap-4 overflow-hidden pt-6 min-[1050px]:gap-8 min-[1050px]:pt-10">
-				<h1 className="animate-moveBg bg-gradient-to-r from-fuchsia-300 via-orange-100 to-amber-300 bg-clip-text text-5xl font-bold leading-none text-transparent">
-					Let&apos;s start!
+		<div className="flex flex-col justify-between h-full w-full">
+			<div className="w-full h-full flex flex-col justify-center items-center gap-4 overflow-hidden">
+				<h1 className="animate-moveBg bg-gradient-to-r from-fuchsia-400 via-green-200 to-orange-400 bg-clip-text text-5xl font-bold leading-none text-transparent">
+					Preserve your freedom
 				</h1>
-				<div className="mt-4 flex flex-col items-center gap-1.5">
-					<a
-						href="/app/auth/create"
-						className="relative inline-flex h-14 w-64 items-center justify-center gap-2 rounded-full bg-zinc-900 px-6 text-lg font-medium ring-1 ring-zinc-800 hover:bg-zinc-800"
-					>
-						Create new key
-						<ArrowRightIcon width={20} height={20} />
-					</a>
+				<div className="mt-4 flex flex-col gap-1.5">
 					<a
 						href="/app/auth/import"
-						className="inline-flex h-14 w-64 items-center justify-center gap-2 rounded-full px-6 text-base font-medium text-zinc-300 hover:bg-zinc-800"
+						className="inline-flex h-14 w-64 items-center justify-center gap-2 rounded-lg px-6 font-medium text-zinc-200 hover:bg-zinc-900"
 					>
 						Login with private key
 					</a>
+					<a
+						href="/app/auth/create"
+						className="inline-flex h-14 w-64 items-center justify-center gap-2 rounded-lg px-6 font-medium text-zinc-200 hover:bg-zinc-900"
+					>
+						Create new key
+					</a>
 				</div>
 			</div>
+			<div className="overflow-hidden" />
 		</div>
 	);
 }
--- a/src/app/prefetch/pages/index.page.tsx
+++ b/src/app/prefetch/pages/index.page.tsx
@ -15,19 +15,11 @@ import useSWRSubscription from "swr/subscription";
 import { navigate } from "vite-plugin-ssr/client/router";

 let totalNotes: number;
+
 if (typeof window !== "undefined") {
 	totalNotes = await countTotalNotes();
 }

-function isJSON(str: string) {
-	try {
-		JSON.parse(str);
-	} catch (e) {
-		return false;
-	}
-	return true;
-}
-
 export function Page() {
 	const pool: any = useContext(RelayContext);
 	const [account, lastLogin] = useActiveAccount((state: any) => [
@ -92,7 +84,7 @@ export function Page() {
 	}, [account]);

 	useSWRSubscription(account ? "prefetch" : null, () => {
-		console.log("data prefetching... ", account.pubkey);
+		let timeout: string | number | NodeJS.Timeout;
 		const query = getQuery();
 		const unsubscribe = pool.subscribe(
 			query,
@ -178,22 +170,18 @@ export function Page() {
 						);
 						break;
 					// long post
-					case 30023: {
-						const verifyMetadata = isJSON(event.tags);
-						if (verifyMetadata) {
-							createNote(
-								event.id,
-								account.id,
-								event.pubkey,
-								event.kind,
-								event.tags,
-								event.content,
-								event.created_at,
-								"",
-							);
-						}
+					case 30023:
+						createNote(
+							event.id,
+							account.id,
+							event.pubkey,
+							event.kind,
+							event.tags,
+							event.content,
+							event.created_at,
+							event.id,
+						);
 						break;
-					}
 					default:
 						break;
 				}
@ -202,7 +190,7 @@ export function Page() {
 			() => {
 				eose.current += 1;
 				if (eose.current === READONLY_RELAYS.length) {
-					setTimeout(
+					timeout = setTimeout(
 						() => navigate("/app/space", { overwriteLastHistoryEntry: true }),
 						2000,
 					);
@ -212,6 +200,7 @@ export function Page() {

 		return () => {
 			unsubscribe();
+			clearTimeout(timeout);
 		};
 	});

--- a/src/app/threads/pages/index.page.tsx
+++ b/src/app/threads/pages/index.page.tsx
@ -1,13 +1,15 @@
 import { NoteSkeleton } from "@app/note/components/skeleton";
 import { ThreadBase } from "@app/threads/components/base";
-import { useInfiniteQuery } from "@tanstack/react-query";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { getLongNotes } from "@utils/storage";
-import { useEffect, useRef } from "react";
+import { useEffect, useMemo, useRef } from "react";
+import useSWRInfinite from "swr/infinite";

 const ITEM_PER_PAGE = 10;
 const TIME = Math.floor(Date.now() / 1000);

+const fetcher = async ([, offset]) => getLongNotes(TIME, ITEM_PER_PAGE, offset);
+
 function isJSON(str: string) {
 	try {
 		JSON.parse(str);
@ -18,32 +20,26 @@ function isJSON(str: string) {
 }

 export function Page() {
-	const {
-		status,
-		error,
-		data,
-		fetchNextPage,
-		hasNextPage,
-		isFetching,
-		isFetchingNextPage,
-	}: any = useInfiniteQuery({
-		queryKey: ["threads"],
-		queryFn: async ({ pageParam = 0 }) => {
-			return await getLongNotes(TIME, ITEM_PER_PAGE, pageParam);
-		},
-		getNextPageParam: (lastPage) => lastPage.nextCursor,
-	});
+	const getKey = (pageIndex, previousPageData) => {
+		if (previousPageData && !previousPageData.data) return null;
+		if (pageIndex === 0) return ["following", 0];
+		return ["following", previousPageData.nextCursor];
+	};
+
+	const { data, isLoading, size, setSize } = useSWRInfinite(getKey, fetcher);
+
+	const notes = useMemo(
+		() => (data ? data.flatMap((d) => d.data) : []),
+		[data],
+	);

-	const allRows = data ? data.pages.flatMap((d: { data: any }) => d.data) : [];
 	const parentRef = useRef();
-
 	const rowVirtualizer = useVirtualizer({
-		count: hasNextPage ? allRows.length + 1 : allRows.length,
+		count: notes.length,
 		getScrollElement: () => parentRef.current,
-		estimateSize: () => 500,
+		estimateSize: () => 400,
 		overscan: 2,
 	});
-
 	const itemsVirtualizer = rowVirtualizer.getVirtualItems();

 	useEffect(() => {
@ -53,14 +49,10 @@ export function Page() {
 			return;
 		}

-		if (
-			lastItem.index >= allRows.length - 1 &&
-			hasNextPage &&
-			!isFetchingNextPage
-		) {
-			fetchNextPage();
+		if (lastItem.index >= notes.length - 1) {
+			setSize(size + 1);
 		}
-	}, [fetchNextPage, allRows.length, rowVirtualizer.getVirtualItems()]);
+	}, [notes.length, rowVirtualizer.getVirtualItems()]);

 	return (
 		<div
@ -68,14 +60,12 @@ export function Page() {
 			className="scrollbar-hide h-full overflow-y-auto"
 			style={{ contain: "strict" }}
 		>
-			{status === "loading" ? (
+			{!data || isLoading ? (
 				<div className="px-3 py-1.5">
 					<div className="rounded-md border border-zinc-800 bg-zinc-900 px-3 py-3 shadow-input shadow-black/20">
 						<NoteSkeleton />
 					</div>
 				</div>
-			) : status === "error" ? (
-				<div>{error.message}</div>
 			) : (
 				<div
 					className="relative w-full mt-2"
@ -92,7 +82,7 @@ export function Page() {
 						}}
 					>
 						{rowVirtualizer.getVirtualItems().map((virtualRow) => {
-							const note = allRows[virtualRow.index];
+							const note = notes[virtualRow.index];
 							if (note && isJSON(note.tags)) {
 								return (
 									<div
@ -108,15 +98,6 @@ export function Page() {
 					</div>
 				</div>
 			)}
-			<div>
-				{isFetching && !isFetchingNextPage ? (
-					<div className="px-3 py-1.5">
-						<div className="rounded-md border border-zinc-800 bg-zinc-900 px-3 py-3 shadow-input shadow-black/20">
-							<NoteSkeleton />
-						</div>
-					</div>
-				) : null}
-			</div>
 		</div>
 	);
 }