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 <[email protected]> Co-authored-by: Caleb Eby <[email protected]>
Pigmice2733 · Jan 16, 2024 · d7a4522 · d7a4522
1 parent 2ecff41
commit d7a4522
Showing 1 changed file with 10 additions and 5 deletions.
diff --git 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>
   )