Show at least the top 100 users on the leaderboards

website/src/components/Dashboard/LeaderboardWidget.tsx

@@ -17,7 +17,7 @@ export function LeaderboardWidget() {
         </div>
         <Card>
           <CardBody>
-            <LeaderboardTable timeFrame={LeaderboardTimeFrame.day} limit={5} />
+            <LeaderboardTable timeFrame={LeaderboardTimeFrame.day} limit={5} rowPerPage={5} />
           </CardBody>
         </Card>
       </div>

website/src/components/DataTable.tsx

@@ -93,7 +93,7 @@ export const DataTable = <T,>({
       )}
       <TableContainer>
         <Table variant="simple">
-          <TableCaption>{caption}</TableCaption>
+          <TableCaption pb={0}>{caption}</TableCaption>
           <Thead>
             {getHeaderGroups().map((headerGroup) => (
               <Tr key={headerGroup.id}>

website/src/components/LeaderboardTable/LeaderboardTable.tsx

@@ -1,7 +1,7 @@
 import { CircularProgress } from "@chakra-ui/react";
 import { createColumnHelper } from "@tanstack/react-table";
 import { useTranslation } from "next-i18next";
-import React, { useMemo } from "react";
+import React, { useMemo, useState } from "react";
 import { get } from "src/lib/api";
 import { LeaderboardEntity, LeaderboardReply, LeaderboardTimeFrame } from "src/types/Leaderboard";
 import useSWRImmutable from "swr/immutable";
@@ -13,7 +13,15 @@ const columnHelper = createColumnHelper<LeaderboardEntity>();
 /**
  * Presents a grid of leaderboard entries with more detailed information.
  */
-export const LeaderboardTable = ({ timeFrame, limit }: { timeFrame: LeaderboardTimeFrame; limit: number }) => {
+export const LeaderboardTable = ({
+  timeFrame,
+  limit: limit,
+  rowPerPage,
+}: {
+  timeFrame: LeaderboardTimeFrame;
+  limit: number;
+  rowPerPage: number;
+}) => {
   const { t } = useTranslation("leaderboard");
   const {
     data: reply,
@@ -52,6 +60,12 @@ export const LeaderboardTable = ({ timeFrame, limit }: { timeFrame: LeaderboardT
     return t("last_updated_at", { val, formatParams: { val: { dateStyle: "full", timeStyle: "short" } } });
   }, [t, reply?.last_updated]);
 
+  const [page, setPage] = useState(1);
+  const data = useMemo(() => {
+    const start = (page - 1) * rowPerPage;
+    return reply?.leaderboard.slice(start, start + rowPerPage) || [];
+  }, [rowPerPage, page, reply?.leaderboard]);
+
   if (isLoading) {
     return <CircularProgress isIndeterminate></CircularProgress>;
   }
@@ -60,5 +74,18 @@ export const LeaderboardTable = ({ timeFrame, limit }: { timeFrame: LeaderboardT
     return <span>Unable to load leaderboard</span>;
   }
 
-  return <DataTable data={reply.leaderboard} columns={columns} caption={lastUpdated} disablePagination></DataTable>;
+  const maxPage = Math.ceil(reply.leaderboard.length / rowPerPage);
+
+  return (
+    <DataTable
+      data={data}
+      columns={columns}
+      caption={lastUpdated}
+      disablePagination={limit <= rowPerPage}
+      disableNext={page === maxPage}
+      disablePrevious={page === 1}
+      onNextClick={() => setPage((p) => p + 1)}
+      onPreviousClick={() => setPage((p) => p - 1)}
+    ></DataTable>
+  );
 };

website/src/pages/leaderboard.tsx

@@ -21,7 +21,7 @@ const Leaderboard = () => {
         <Card>
           <CardBody>
             <Tabs isFitted isLazy>
-              <TabList>
+              <TabList mb={4}>
                 <Tab>{t("daily")}</Tab>
                 <Tab>{t("weekly")}</Tab>
                 <Tab>{t("monthly")}</Tab>
@@ -29,16 +29,16 @@ const Leaderboard = () => {
               </TabList>
               <TabPanels>
                 <TabPanel p="0">
-                  <LeaderboardTable timeFrame={LeaderboardTimeFrame.day} limit={20} />
+                  <LeaderboardTable timeFrame={LeaderboardTimeFrame.day} limit={100} rowPerPage={20} />
                 </TabPanel>
                 <TabPanel p="0">
-                  <LeaderboardTable timeFrame={LeaderboardTimeFrame.week} limit={20} />
+                  <LeaderboardTable timeFrame={LeaderboardTimeFrame.week} limit={100} rowPerPage={20} />
                 </TabPanel>
                 <TabPanel p="0">
-                  <LeaderboardTable timeFrame={LeaderboardTimeFrame.month} limit={20} />
+                  <LeaderboardTable timeFrame={LeaderboardTimeFrame.month} limit={100} rowPerPage={20} />
                 </TabPanel>
                 <TabPanel p="0">
-                  <LeaderboardTable timeFrame={LeaderboardTimeFrame.total} limit={20} />
+                  <LeaderboardTable timeFrame={LeaderboardTimeFrame.total} limit={100} rowPerPage={20} />
                 </TabPanel>
               </TabPanels>
             </Tabs>