wip

src/app/trending/_default.page.tsx

@@ -1 +0,0 @@
-export { DefaultLayout as Layout } from "@shared/layout";

src/app/trending/components/profile.tsx

@@ -1,16 +1,20 @@
 import { Image } from "@shared/image";
 import { DEFAULT_AVATAR } from "@stores/constants";
+import { useQuery } from "@tanstack/react-query";
 import { compactNumber } from "@utils/number";
 import { shortenKey } from "@utils/shortenKey";
-import useSWR from "swr";
-
-const fetcher = (url: string) => fetch(url).then((r) => r.json());
 
 export function Profile({ data }: { data: any }) {
-	const { data: userStats, error } = useSWR(
-		`https://api.nostr.band/v0/stats/profile/${data.pubkey}`,
-		fetcher,
-	);
+	const {
+		status,
+		data: userStats,
+		isFetching,
+	} = useQuery(["user-stats", data.pubkey], async () => {
+		const res = await fetch(
+			`https://api.nostr.band/v0/stats/profile/${data.pubkey}`,
+		);
+		return res.json();
+	});
 
 	const embedProfile = data.profile ? JSON.parse(data.profile.content) : null;
 	const profile = embedProfile;
@@ -47,8 +51,7 @@ export function Profile({ data }: { data: any }) {
 				</p>
 			</div>
 			<div className="mt-8">
-				{error && <p>Failed to fetch user stats</p>}
-				{!userStats ? (
+				{status === "loading" || isFetching ? (
 					<p>Loading...</p>
 				) : (
 					<div className="w-full flex items-center gap-8">

src/app/trending/components/trendingNotes.tsx

@@ -1,22 +1,22 @@
 import { Note } from "@shared/notes/note";
 import { NoteSkeleton } from "@shared/notes/skeleton";
 import { TitleBar } from "@shared/titleBar";
-import useSWR from "swr";
-
-const fetcher = (url: string) => fetch(url).then((r) => r.json());
+import { useQuery } from "@tanstack/react-query";
 
 export function TrendingNotes() {
-	const { data, error } = useSWR(
-		"https://api.nostr.band/v0/trending/notes",
-		fetcher,
+	const { status, data, isFetching } = useQuery(
+		["trending-notes"],
+		async () => {
+			const res = await fetch("https://api.nostr.band/v0/trending/notes");
+			return res.json();
+		},
 	);
 
 	return (
 		<div className="shrink-0 w-[360px] flex-col flex border-r border-zinc-900">
 			<TitleBar title="Trending Posts" />
 			<div className="scrollbar-hide flex w-full h-full flex-col justify-between gap-1.5 pt-1.5 pb-20 overflow-y-auto">
-				{error && <p>Failed to load...</p>}
-				{!data ? (
+				{status === "loading" || isFetching ? (
 					<div className="px-3 py-1.5">
 						<div className="rounded-md bg-zinc-900 px-3 py-3 shadow-input shadow-black/20">
 							<NoteSkeleton />

src/app/trending/components/trendingProfiles.tsx

@@ -1,22 +1,22 @@
 import { Profile } from "@app/trending/components/profile";
 import { NoteSkeleton } from "@shared/notes/skeleton";
 import { TitleBar } from "@shared/titleBar";
-import useSWR from "swr";
-
-const fetcher = (url: string) => fetch(url).then((r) => r.json());
+import { useQuery } from "@tanstack/react-query";
 
 export function TrendingProfiles() {
-	const { data, error } = useSWR(
-		"https://api.nostr.band/v0/trending/profiles",
-		fetcher,
+	const { status, data, isFetching } = useQuery(
+		["trending-profiles"],
+		async () => {
+			const res = await fetch("https://api.nostr.band/v0/trending/profiles");
+			return res.json();
+		},
 	);
 
 	return (
 		<div className="shrink-0 w-[360px] flex-col flex border-r border-zinc-900">
 			<TitleBar title="Trending Profiles" />
 			<div className="scrollbar-hide flex w-full h-full flex-col justify-between gap-1.5 pt-1.5 pb-20 overflow-y-auto">
-				{error && <p>Failed to load...</p>}
-				{!data ? (
+				{status === "loading" || isFetching ? (
 					<div className="px-3 py-1.5">
 						<div className="rounded-md bg-zinc-900 px-3 py-3 shadow-input shadow-black/20">
 							<NoteSkeleton />

src/app/trending/index.tsx

@@ -1,7 +1,7 @@
 import { TrendingNotes } from "@app/trending/components/trendingNotes";
 import { TrendingProfiles } from "@app/trending/components/trendingProfiles";
 
-export function Page() {
+export function TrendingScreen() {
 	return (
 		<div className="h-full w-full flex flex-nowrap overflow-x-auto overflow-y-hidden scrollbar-hide">
 			<TrendingProfiles />