From d7a452294e6603f437c06742452d6982f9677bd4 Mon Sep 17 00:00:00 2001
From: Alex <avhoi83@gmail.com>
Date: Mon, 15 Jan 2024 19:04:43 -0800
Subject: [PATCH] updates to leaderboard: years dropdown and card links (#1520)

* updated year list on leaderboard to display correctly

* added links to leaderboard cards

* lint

* Update package.json

* Discard changes to package.json

---------

Co-authored-by: Caleb Eby <caleb.eby01@gmail.com>
Co-authored-by: Caleb Eby <calebeby@users.noreply.github.com>
---
 src/routes/leaderboard.tsx | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/routes/leaderboard.tsx b/src/routes/leaderboard.tsx
index 131eba074..62341981e 100644
--- a/src/routes/leaderboard.tsx
+++ b/src/routes/leaderboard.tsx
@@ -19,11 +19,13 @@ const leaderboardCardTitleStyle = css`
 
 const LeaderboardCard = ({
   user,
+  href,
 }: {
   user: UserInfo & { reports: number }
+  href: string
 }) => {
   return (
-    <Card>
+    <Card href={href}>
       <h1 class={leaderboardCardTitleStyle}>
         {user.firstName} {user.lastName} - {user.reports}
       </h1>
@@ -39,11 +41,10 @@ const leaderboardListStyle = css`
   padding: 0.8rem;
 `
 
-const currentYear = new Date().getFullYear()
 const LeaderboardList = () => {
-  const [yearVal, setYear] = useQueryState('year', currentYear)
+  const years = useYears().sort().reverse()
+  const [yearVal, setYear] = useQueryState('year', years[0])
   const year = Number(yearVal)
-  const years = useYears()
   const leaderboard = usePromise(async () => {
     const leaderboard = await getLeaderboard(year)
     return Promise.all(
@@ -60,7 +61,11 @@ const LeaderboardList = () => {
     <div class={leaderboardListStyle}>
       <Dropdown options={years} onChange={setYear} value={year} />
       {leaderboard?.map((user) => (
-        <LeaderboardCard key={user.id} user={user} />
+        <LeaderboardCard
+          key={user.id}
+          user={user}
+          href={`/users/${user.id}/reports`}
+        />
       )) || <Loader />}
     </div>
   )