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 ; } @@ -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} /> )} @@ -122,7 +132,7 @@ export default function MiniLeaderboardDesktop() { ; } @@ -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} /> )} @@ -120,7 +130,7 @@ export default function MiniLeaderboardMobile() { ; @@ -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} /> )} @@ -222,7 +230,7 @@ function LeaderboardIndex({ { @@ -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 ( View Submissions + * ); + * ``` + */ +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, + }; +}