feat(leaderboard): display points' name

src/app/(dashboard)/[guildUrlName]/leaderboard/[rewardId]/components/Leaderboard.tsx

@@ -1,16 +1,22 @@
 "use client";
 
-import { useInfiniteQuery } from "@tanstack/react-query";
-import { leaderboardOptions } from "../options";
+import {
+  useSuspenseInfiniteQuery,
+  useSuspenseQuery,
+} from "@tanstack/react-query";
+import { leaderboardOptions, pointsRewardOptions } from "../options";
 import { LeaderboardUserCard } from "./LeaderboardUserCard";
 
 export const Leaderboard = ({ rewardId }: { rewardId: string }) => {
-  const { data: rawData } = useInfiniteQuery(leaderboardOptions({ rewardId }));
+  const { data: rawData } = useSuspenseInfiniteQuery(
+    leaderboardOptions({ rewardId }),
+  );
 
-  const data = rawData?.pages[0];
+  const { data: pointReward } = useSuspenseQuery(
+    pointsRewardOptions({ rewardId }),
+  );
 
-  // TODO: use useSuspenseQuery & render proper skeleton loaders
-  if (!data) return <>Loading...</>;
+  const data = rawData?.pages[0];
 
   return (
     <div className="space-y-6">
@@ -20,8 +26,7 @@ export const Leaderboard = ({ rewardId }: { rewardId: string }) => {
       </section> */}
 
       <section className="space-y-4">
-        {/* TODO: display points' name */}
-        <h2 className="font-bold">Leaderboard</h2>
+        <h2 className="font-bold">{`${pointReward.data.name} leaderboard`}</h2>
         {data.leaderboard.map((user, index) => (
           <LeaderboardUserCard
             key={user.userId}

src/app/(dashboard)/[guildUrlName]/leaderboard/[rewardId]/components/LeaderboardUserCard.tsx

@@ -1,27 +1,36 @@
 import { Card } from "@/components/ui/Card";
 import type { Leaderboard } from "@/lib/schemas/leaderboard";
 import { User } from "@phosphor-icons/react/dist/ssr";
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { useParams } from "next/navigation";
+import { pointsRewardOptions } from "../options";
 
 export const LeaderboardUserCard = ({
   user,
-}: { user: Leaderboard["user"] }) => (
-  <Card className="flex items-center">
-    <div className="flex size-16 shrink-0 items-center justify-center border-r bg-blackAlpha px-2 font-display font-extrabold text-lg sm:size-24 dark:bg-blackAlpha-hard">
-      {`#${user.rank}`}
-    </div>
+}: { user: Leaderboard["user"] }) => {
+  const { rewardId } = useParams<{ rewardId: string }>();
+  const { data: pointReward } = useSuspenseQuery(
+    pointsRewardOptions({ rewardId }),
+  );
 
-    <div className="flex w-full items-center justify-between gap-4 px-4 sm:px-5">
-      <div className="flex items-center gap-2">
-        <div className="flex size-8 shrink-0 items-center justify-center rounded-full bg-image sm:size-10">
-          <User weight="duotone" className="size-4 sm:size-5" />
+  return (
+    <Card className="flex items-center">
+      <div className="flex size-16 shrink-0 items-center justify-center border-r bg-blackAlpha px-2 font-display font-extrabold text-lg sm:size-24 dark:bg-blackAlpha-hard">
+        {`#${user.rank}`}
+      </div>
+
+      <div className="flex w-full items-center justify-between gap-4 px-4 sm:px-5">
+        <div className="flex items-center gap-2">
+          <div className="flex size-8 shrink-0 items-center justify-center rounded-full bg-image sm:size-10">
+            <User weight="duotone" className="size-4 sm:size-5" />
+          </div>
+          <span className="line-clamp-1 shrink font-bold">{user.userId}</span>
         </div>
-        <span className="line-clamp-1 shrink font-bold">{user.userId}</span>
+        <span className="shrink-0">
+          <b>{`${user.amount} `}</b>
+          <span>{pointReward.data.name}</span>
+        </span>
       </div>
-      <span className="shrink-0">
-        <b>{`${user.amount} `}</b>
-        {/* TODO: display point' name */}
-        {/* <span>point name</span> */}
-      </span>
-    </div>
-  </Card>
-);
+    </Card>
+  );
+};

src/app/(dashboard)/[guildUrlName]/leaderboard/[rewardId]/options.ts

@@ -1,5 +1,7 @@
 import { fetchLeaderboard } from "@/app/(dashboard)/explorer/fetchers";
-import { infiniteQueryOptions } from "@tanstack/react-query";
+import { fetchGuildApiData } from "@/lib/fetchGuildApi";
+import type { GuildReward } from "@/lib/schemas/guildReward";
+import { infiniteQueryOptions, queryOptions } from "@tanstack/react-query";
 
 export const leaderboardOptions = ({ rewardId }: { rewardId: string }) => {
   return infiniteQueryOptions({
@@ -14,3 +16,14 @@ export const leaderboardOptions = ({ rewardId }: { rewardId: string }) => {
         : lastPage.offset + 1,
   });
 };
+
+export const pointsRewardOptions = ({ rewardId }: { rewardId: string }) => {
+  return queryOptions({
+    queryKey: ["reward", "id", rewardId],
+    queryFn: () =>
+      fetchGuildApiData<Extract<GuildReward, { type: "POINTS" }>>(
+        `reward/id/${rewardId}`,
+      ),
+    enabled: !!rewardId,
+  });
+};

src/app/(dashboard)/[guildUrlName]/leaderboard/[rewardId]/page.tsx

@@ -1,8 +1,9 @@
 import { getQueryClient } from "@/lib/getQueryClient";
 import type { DynamicRoute } from "@/lib/types";
 import { HydrationBoundary, dehydrate } from "@tanstack/react-query";
+import { Suspense } from "react";
 import { Leaderboard } from "./components/Leaderboard";
-import { leaderboardOptions } from "./options";
+import { leaderboardOptions, pointsRewardOptions } from "./options";
 
 const LeaderboardPage = async ({
   params,
@@ -11,10 +12,13 @@ const LeaderboardPage = async ({
 
   const queryClient = getQueryClient();
   await queryClient.prefetchInfiniteQuery(leaderboardOptions({ rewardId }));
+  await queryClient.prefetchQuery(pointsRewardOptions({ rewardId }));
 
   return (
     <HydrationBoundary state={dehydrate(queryClient)}>
-      <Leaderboard rewardId={rewardId} />
+      <Suspense>
+        <Leaderboard rewardId={rewardId} />
+      </Suspense>
     </HydrationBoundary>
   );
 };