From 20ad31218d6393bcf324e17754ca5c9a24b45e30 Mon Sep 17 00:00:00 2001
From: Angela Yu <angelayu0530@gmail.com>
Date: Fri, 16 Jan 2026 23:13:00 -0500
Subject: [PATCH] 593: Added A react hook for Using Submissions Url and added
 it to all possible leaderboards when clicking on user profile

---
 js/src/app/_component/MiniLeaderboard.tsx     | 12 ++-
 .../app/_component/MiniLeaderboardMobile.tsx  | 12 ++-
 .../leaderboard/_components/Leaderboard.tsx   | 16 +++-
 js/src/components/ui/LeaderboardCard.tsx      | 18 ++++-
 .../lib/hooks/useLeaderboardSubmissionsUrl.ts | 76 +++++++++++++++++++
 5 files changed, 127 insertions(+), 7 deletions(-)
 create mode 100644 js/src/lib/hooks/useLeaderboardSubmissionsUrl.ts

diff --git a/js/src/app/_component/MiniLeaderboard.tsx b/js/src/app/_component/MiniLeaderboard.tsx
index b8d576999..95081711a 100644
--- a/js/src/app/_component/MiniLeaderboard.tsx
+++ b/js/src/app/_component/MiniLeaderboard.tsx
@@ -6,6 +6,7 @@ import { useCurrentLeaderboardUsersQuery } from "@/lib/api/queries/leaderboard";
 import { Tag } from "@/lib/api/types/autogen/schema";
 import { tagFF } from "@/lib/ff";
 import getOrdinal from "@/lib/helper/ordinal";
+import { useLeaderboardSubmissionsUrl } from "@/lib/hooks/useLeaderboardSubmissionsUrl";
 import { theme } from "@/lib/theme";
 import {
   Button,
@@ -26,6 +27,9 @@ export default function MiniLeaderboardDesktop() {
   const { data, status, filters, toggleFilter, isPlaceholderData } =
     useCurrentLeaderboardUsersQuery({ pageSize: 5, tieToUrl: false });
 
+  const { getUserSubmissionsUrl, startDate, endDate } =
+    useLeaderboardSubmissionsUrl();
+
   if (status === "pending") {
     return <MiniLeaderboardSkeleton />;
   }
@@ -85,6 +89,8 @@ export default function MiniLeaderboardDesktop() {
               width={"200px"}
               userId={second.id}
               isLoading={isPlaceholderData}
+              startDate={startDate}
+              endDate={endDate}
             />
           )}
           {first && (
@@ -98,6 +104,8 @@ export default function MiniLeaderboardDesktop() {
               width={"200px"}
               userId={first.id}
               isLoading={isPlaceholderData}
+              startDate={startDate}
+              endDate={endDate}
             />
           )}
           {third && (
@@ -111,6 +119,8 @@ export default function MiniLeaderboardDesktop() {
               width={"200px"}
               userId={third.id}
               isLoading={isPlaceholderData}
+              startDate={startDate}
+              endDate={endDate}
             />
           )}
         </Flex>
@@ -122,7 +132,7 @@ export default function MiniLeaderboardDesktop() {
                 <Card
                   key={entry.id}
                   component={Link}
-                  to={`/user/${entry.id}`}
+                  to={getUserSubmissionsUrl(entry.id)}
                   withBorder
                   radius="md"
                   padding="lg"
diff --git a/js/src/app/_component/MiniLeaderboardMobile.tsx b/js/src/app/_component/MiniLeaderboardMobile.tsx
index 6377a4c66..231a2e6ec 100644
--- a/js/src/app/_component/MiniLeaderboardMobile.tsx
+++ b/js/src/app/_component/MiniLeaderboardMobile.tsx
@@ -4,6 +4,7 @@ import Toast from "@/components/ui/toast/Toast";
 import { useCurrentLeaderboardUsersQuery } from "@/lib/api/queries/leaderboard";
 import { Tag } from "@/lib/api/types/autogen/schema";
 import getOrdinal from "@/lib/helper/ordinal";
+import { useLeaderboardSubmissionsUrl } from "@/lib/hooks/useLeaderboardSubmissionsUrl";
 import { theme } from "@/lib/theme";
 import {
   Button,
@@ -23,6 +24,9 @@ export default function MiniLeaderboardMobile() {
   const { data, status, filters, toggleFilter, isPlaceholderData } =
     useCurrentLeaderboardUsersQuery({ pageSize: 5, tieToUrl: false });
 
+  const { getUserSubmissionsUrl, startDate, endDate } =
+    useLeaderboardSubmissionsUrl();
+
   if (status === "pending") {
     return <MiniLeaderboardMobileSkeleton />;
   }
@@ -83,6 +87,8 @@ export default function MiniLeaderboardMobile() {
               width={"300px"}
               userId={first.id}
               isLoading={isPlaceholderData}
+              startDate={startDate}
+              endDate={endDate}
             />
           )}
           {second && (
@@ -96,6 +102,8 @@ export default function MiniLeaderboardMobile() {
               width={"300px"}
               userId={second.id}
               isLoading={isPlaceholderData}
+              startDate={startDate}
+              endDate={endDate}
             />
           )}
           {third && (
@@ -109,6 +117,8 @@ export default function MiniLeaderboardMobile() {
               width={"300px"}
               userId={third.id}
               isLoading={isPlaceholderData}
+              startDate={startDate}
+              endDate={endDate}
             />
           )}
         </Flex>
@@ -120,7 +130,7 @@ export default function MiniLeaderboardMobile() {
                 <Card
                   key={entry.id}
                   component={Link}
-                  to={`/user/${entry.id}`}
+                  to={getUserSubmissionsUrl(entry.id)}
                   withBorder
                   radius="md"
                   padding="lg"
diff --git a/js/src/app/leaderboard/_components/Leaderboard.tsx b/js/src/app/leaderboard/_components/Leaderboard.tsx
index a7b6ac93f..0719b14fe 100644
--- a/js/src/app/leaderboard/_components/Leaderboard.tsx
+++ b/js/src/app/leaderboard/_components/Leaderboard.tsx
@@ -13,6 +13,7 @@ import {
 import { ApiUtils } from "@/lib/api/utils";
 import { schoolFF, tagFF } from "@/lib/ff";
 import getOrdinal from "@/lib/helper/ordinal";
+import { useLeaderboardSubmissionsUrl } from "@/lib/hooks/useLeaderboardSubmissionsUrl";
 import { theme } from "@/lib/theme";
 import {
   Box,
@@ -64,9 +65,10 @@ function LeaderboardIndex({
     globalIndex,
     toggleGlobalIndex,
     isPlaceholderData,
-    isAnyFilterEnabled,
-    onFilterReset,
-  } = query;
+  } = useCurrentLeaderboardUsersQuery();
+
+  const { getUserSubmissionsUrl, startDate, endDate } =
+    useLeaderboardSubmissionsUrl();
 
   if (status === "pending") {
     return <LeaderboardSkeleton />;
@@ -120,6 +122,8 @@ function LeaderboardIndex({
             userId={second.id}
             tags={second.tags}
             isLoading={isPlaceholderData}
+            startDate={startDate}
+            endDate={endDate}
           />
         )}
         {page === 1 && first && !debouncedQuery && (
@@ -134,6 +138,8 @@ function LeaderboardIndex({
             userId={first.id}
             tags={first.tags}
             isLoading={isPlaceholderData}
+            startDate={startDate}
+            endDate={endDate}
           />
         )}
         {page === 1 && third && !debouncedQuery && (
@@ -148,6 +154,8 @@ function LeaderboardIndex({
             userId={third.id}
             tags={third.tags}
             isLoading={isPlaceholderData}
+            startDate={startDate}
+            endDate={endDate}
           />
         )}
       </Flex>
@@ -222,7 +230,7 @@ function LeaderboardIndex({
             <PossibleTooltip key={entry.id}>
               <Card
                 component={Link}
-                to={isPrevious ? "#" : `/user/${entry.id}`}
+                to={isPrevious ? "#" : getUserSubmissionsUrl(entry.id)}
                 shadow="sm"
                 padding="lg"
                 radius="md"
diff --git a/js/src/components/ui/LeaderboardCard.tsx b/js/src/components/ui/LeaderboardCard.tsx
index e5672e5f2..703a8d5d6 100644
--- a/js/src/components/ui/LeaderboardCard.tsx
+++ b/js/src/components/ui/LeaderboardCard.tsx
@@ -29,6 +29,8 @@ export default function LeaderboardCard({
   tags,
   isLoading = false,
   embedded = false,
+  startDate,
+  endDate,
 }: {
   placeString: OrdinalString;
   sizeOrder: 1 | 2 | 3;
@@ -41,6 +43,8 @@ export default function LeaderboardCard({
   tags?: UserTag[];
   isLoading?: boolean;
   embedded?: boolean;
+  startDate?: string;
+  endDate?: string;
 }) {
   const isTopThree = sizeOrder <= 3;
   const borderColor = (() => {
@@ -72,6 +76,18 @@ export default function LeaderboardCard({
   })();
   const displayTags = tags?.slice(0, 3);
 
+  const getUserSubmissionsUrl = () => {
+    const params = new URLSearchParams();
+    if (startDate) {
+      params.set("startDate", startDate);
+    }
+    if (endDate) {
+      params.set("endDate", endDate);
+    }
+    const queryString = params.toString();
+    return `/user/${userId}/submissions${queryString ? `?${queryString}` : ""}`;
+  };
+
   return (
     <Card
       withBorder
@@ -85,7 +101,7 @@ export default function LeaderboardCard({
         boxShadow,
       }}
       component={Link}
-      to={`/user/${userId}`}
+      to={getUserSubmissionsUrl()}
       reloadDocument={embedded}
       target={embedded ? "_blank" : undefined}
       rel={embedded ? "noopener noreferrer" : undefined}
diff --git a/js/src/lib/hooks/useLeaderboardSubmissionsUrl.ts b/js/src/lib/hooks/useLeaderboardSubmissionsUrl.ts
new file mode 100644
index 000000000..52eb771d0
--- /dev/null
+++ b/js/src/lib/hooks/useLeaderboardSubmissionsUrl.ts
@@ -0,0 +1,76 @@
+import {
+  useCurrentLeaderboardMetadataQuery,
+  useLeaderboardMetadataByIdQuery,
+} from "@/lib/api/queries/leaderboard";
+import { useCallback } from "react";
+
+/**
+ * React hook that provides a function to generate user submissions URLs
+ * with leaderboard date range parameters.
+ *
+ * @param {Object} options - Configuration options for the hook.
+ * @param {string} options.leaderboardId - (Optional) The leaderboard ID to fetch metadata for.
+ *   If not provided, uses the current active leaderboard.
+ *
+ * @returns An object containing:
+ * - `getUserSubmissionsUrl`: a function that takes a userId and returns the submissions URL with date params
+ * - `startDate`: the leaderboard start date (createdAt), or undefined if not loaded
+ * - `endDate`: the leaderboard end date (shouldExpireBy), or undefined if not loaded
+ *
+ * @example
+ * ```tsx
+ * // For current leaderboard
+ * const { getUserSubmissionsUrl, startDate, endDate } = useLeaderboardSubmissionsUrl();
+ *
+ * // For specific leaderboard
+ * const { getUserSubmissionsUrl, startDate, endDate } = useLeaderboardSubmissionsUrl({
+ *   leaderboardId: "some-id"
+ * });
+ *
+ * return (
+ *   <Link to={getUserSubmissionsUrl(userId)}>View Submissions</Link>
+ * );
+ * ```
+ */
+export function useLeaderboardSubmissionsUrl(
+  options: { leaderboardId?: string } = {},
+) {
+  const { leaderboardId } = options;
+
+  const currentLeaderboardQuery = useCurrentLeaderboardMetadataQuery();
+  const leaderboardByIdQuery = useLeaderboardMetadataByIdQuery(
+    leaderboardId ?? "",
+  );
+
+  const metadataData = leaderboardId
+    ? leaderboardByIdQuery.data
+    : currentLeaderboardQuery.data;
+
+  const startDate =
+    metadataData?.success ? metadataData.payload.createdAt : undefined;
+  const endDate =
+    metadataData?.success
+      ? (metadataData.payload.shouldExpireBy ?? undefined)
+      : undefined;
+
+  const getUserSubmissionsUrl = useCallback(
+    (userId: string) => {
+      const params = new URLSearchParams();
+      if (startDate) {
+        params.set("startDate", startDate);
+      }
+      if (endDate) {
+        params.set("endDate", endDate);
+      }
+      const queryString = params.toString();
+      return `/user/${userId}/submissions${queryString ? `?${queryString}` : ""}`;
+    },
+    [startDate, endDate],
+  );
+
+  return {
+    getUserSubmissionsUrl,
+    startDate,
+    endDate,
+  };
+}