vinvoor: add a leaderboard

vinvoor/package.json

@@ -18,10 +18,13 @@
     "@mui/material": "^5.15.19",
     "@types/js-cookie": "^3.0.6",
     "@types/react-router-dom": "^5.3.3",
+    "@types/react-router-hash-link": "^2.4.9",
     "js-cookie": "^3.0.5",
+    "mdi-material-ui": "^7.9.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.23.1"
+    "react-router-dom": "^6.23.1",
+    "react-router-hash-link": "^2.4.3"
   },
   "devDependencies": {
     "@types/react": "^18.2.66",

vinvoor/src/cards/CardsTable.tsx

@@ -12,7 +12,7 @@ import { Card } from "../types/cards";
 import { TableOrder } from "../types/table";
 import { CardsTableBody } from "./CardsTableBody";
 import { CardsTableHead } from "./CardsTableHead";
-import { CardsTableToolbar } from "./CardsTableToolBar";
+import { CardsTableToolbar } from "./CardsTableToolbar";
 
 interface CardTableProps {
     cards: readonly Card[];

vinvoor/src/cards/CardsTableBody.tsx

@@ -43,9 +43,7 @@ export const CardsTableBody: FC<CardsTableBodyProps> = ({
                             <TableCell
                                 key={headCell.id}
                                 align={headCell.align}
-                                padding={
-                                    headCell.disablePadding ? "none" : "normal"
-                                }
+                                padding={headCell.padding}
                             >
                                 <Typography>{row[headCell.id]}</Typography>
                             </TableCell>

vinvoor/src/cards/CardsTableHead.tsx

@@ -50,7 +50,7 @@ export const CardsTableHead: FC<CardTableHeadProps> = ({
                     <TableCell
                         key={headCell.id}
                         align={headCell.align}
-                        padding={headCell.disablePadding ? "none" : "normal"}
+                        padding={headCell.padding}
                     >
                         <TableSortLabel
                             active={orderBy === headCell.id}

vinvoor/src/cards/CardsTableToolBar.tsx → vinvoor/src/cards/CardsTableToolbar.tsx

@@ -5,12 +5,12 @@ import { Card } from "../types/cards";
 import { CardsAdd } from "./CardsAdd";
 import { CardsDelete } from "./CardsDelete";
 
-interface CardTableToolBarProps {
+interface CardTableToolbarProps {
     selected: readonly string[];
     setCards: Dispatch<SetStateAction<readonly Card[]>>;
 }
 
-export const CardsTableToolbar: FC<CardTableToolBarProps> = ({
+export const CardsTableToolbar: FC<CardTableToolbarProps> = ({
     selected,
     setCards,
 }) => {
@@ -32,7 +32,7 @@ export const CardsTableToolbar: FC<CardTableToolBarProps> = ({
             {numSelected > 0 ? (
                 <>
                     <Typography
-                        sx={{ flex: "1 1 100%" }}
+                        sx={{ flex: "1" }}
                         variant="subtitle1"
                         fontWeight="medium"
                     >

vinvoor/src/leaderboard/Leaderboard.tsx

@@ -0,0 +1,36 @@
+import { Divider, Paper, Table, TableContainer } from "@mui/material";
+import { useState } from "react";
+import { LoadingSkeleton } from "../components/LoadingSkeleton";
+import { useFetch } from "../hooks/useFetch";
+import { LeaderboardItem } from "../types/leaderboard";
+import { LeaderboardTableBody } from "./LeaderboardTableBody";
+import { LeaderboardTableToolbar } from "./LeaderboardTableToolbar";
+
+export const Leaderboard = () => {
+    const [leaderboardItems, setLeaderboardItems] = useState<
+        readonly LeaderboardItem[]
+    >([]);
+    const { loading, error: _ } = useFetch<readonly LeaderboardItem[]>(
+        "leaderboard",
+        setLeaderboardItems
+    );
+
+    return (
+        <LoadingSkeleton loading={loading}>
+            <Paper elevation={4}>
+                <LeaderboardTableToolbar />
+                <Divider
+                    sx={{ bgcolor: "primary.main", borderBottomWidth: 3 }}
+                />
+                <TableContainer>
+                    <Table>
+                        {/* <LeaderboardTableHead /> */}
+                        <LeaderboardTableBody
+                            leaderboardItems={leaderboardItems}
+                        />
+                    </Table>
+                </TableContainer>
+            </Paper>
+        </LoadingSkeleton>
+    );
+};

vinvoor/src/leaderboard/LeaderboardTableBody.tsx

@@ -0,0 +1,76 @@
+import {
+    styled,
+    TableBody,
+    TableCell,
+    tableCellClasses,
+    TableRow,
+    Typography,
+} from "@mui/material";
+import { PodiumBronze, PodiumGold, PodiumSilver } from "mdi-material-ui";
+import { FC } from "react";
+import { leaderboardHeadCells, LeaderboardItem } from "../types/leaderboard";
+
+interface LeaderboardTableBodyProps {
+    leaderboardItems: readonly LeaderboardItem[];
+}
+
+const StyledTableCell = styled(TableCell)(({ theme }) => ({
+    [`&.${tableCellClasses.head}`]: {
+        backgroundColor: theme.palette.common.black,
+        color: theme.palette.common.white,
+    },
+    [`&.${tableCellClasses.body}`]: {
+        fontSize: 14,
+    },
+}));
+
+const StyledTableRow = styled(TableRow)(({ theme }) => ({
+    "&:nth-of-type(odd)": {
+        backgroundColor: theme.palette.action.hover,
+    },
+    // hide last border
+    "&:last-child td, &:last-child th": {
+        border: 0,
+    },
+}));
+
+const getPosition = (position: number) => {
+    switch (position) {
+        case 1:
+            return <PodiumGold htmlColor="#FFD700" />;
+        case 2:
+            return <PodiumSilver htmlColor="#C0C0C0" />;
+        case 3:
+            return <PodiumBronze htmlColor="#CD7F32" />;
+        default:
+            return <Typography fontWeight="bold">{position}</Typography>;
+    }
+};
+
+export const LeaderboardTableBody: FC<LeaderboardTableBodyProps> = ({
+    leaderboardItems: rows,
+}) => {
+    return (
+        <TableBody>
+            {rows.map((row) => {
+                return (
+                    <StyledTableRow key={row.username} id={row.username}>
+                        {leaderboardHeadCells.map((headCell) => (
+                            <StyledTableCell
+                                key={headCell.id}
+                                align={headCell.align}
+                                padding={headCell.padding}
+                            >
+                                {headCell.id === "position" ? (
+                                    getPosition(row[headCell.id])
+                                ) : (
+                                    <Typography>{row[headCell.id]}</Typography>
+                                )}
+                            </StyledTableCell>
+                        ))}
+                    </StyledTableRow>
+                );
+            })}
+        </TableBody>
+    );
+};

vinvoor/src/leaderboard/LeaderboardTableHead.tsx

@@ -0,0 +1,16 @@
+import { TableCell, TableHead, TableRow, Typography } from "@mui/material";
+import { leaderboardHeadCells } from "../types/leaderboard";
+
+export const LeaderboardTableHead = () => {
+    return (
+        <TableHead>
+            <TableRow>
+                {leaderboardHeadCells.map((headCell) => (
+                    <TableCell key={headCell.id} align={headCell.align}>
+                        <Typography>{headCell.label}</Typography>
+                    </TableCell>
+                ))}
+            </TableRow>
+        </TableHead>
+    );
+};

vinvoor/src/leaderboard/LeaderboardTableToolbar.tsx

@@ -0,0 +1,27 @@
+import { MoveDown } from "@mui/icons-material";
+import { Button, Toolbar, Typography } from "@mui/material";
+import { FC, useContext } from "react";
+import { HashLink } from "react-router-hash-link";
+import { UserContext } from "../user/UserProvider";
+
+interface LeaderboardTableToolbarProps {}
+
+export const LeaderboardTableToolbar: FC<
+    LeaderboardTableToolbarProps
+> = ({}) => {
+    const { user } = useContext(UserContext);
+
+    return (
+        <Toolbar sx={{ p: { xs: 1, sm: 2 }, m: { xs: 1, sm: 2 } }}>
+            <Typography sx={{ flex: "1" }} variant="h4" fontWeight="bold">
+                Ranking
+            </Typography>
+            <HashLink to={`/leaderboard#${user!.username}`}>
+                <Button variant="contained">
+                    <MoveDown sx={{ mr: "2%" }} />
+                    <Typography>Jump</Typography>
+                </Button>
+            </HashLink>
+        </Toolbar>
+    );
+};

vinvoor/src/main.tsx

@@ -6,8 +6,9 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import { App } from "./App.tsx";
-import { Cards } from "./cards/Card.tsx";
+import { Cards } from "./cards/Cards.tsx";
 import { ErrorPage } from "./errors/ErrorPage.tsx";
+import { Leaderboard } from "./leaderboard/Leaderboard.tsx";
 import { Login } from "./user/Login.tsx";
 import { Logout } from "./user/Logout.tsx";
 
@@ -29,6 +30,10 @@ const router = createBrowserRouter([
                 path: "cards",
                 element: <Cards />,
             },
+            {
+                path: "leaderboard",
+                element: <Leaderboard />,
+            },
         ],
     },
 ]);

vinvoor/src/navbar/NavBar.tsx

@@ -7,7 +7,7 @@ import { NavBarPages } from "./NavBarPages";
 import { NavBarSandwich } from "./NavBarSandwich";
 import { NavBarUserMenu } from "./NavBarUserMenu";
 
-const pages = ["Cards"];
+const pages = ["Cards", "Leaderboard"];
 const settings = ["Logout"];
 
 export const NavBar = () => {

vinvoor/src/types/cards.ts

@@ -10,12 +10,12 @@ export const CardsHeadCells: readonly TableHeadCell<Card>[] = [
         id: "serial",
         label: "Serial",
         align: "left",
-        disablePadding: true,
+        padding: "none",
     },
     {
         id: "createdAt",
         label: "Created at",
         align: "right",
-        disablePadding: false,
+        padding: "normal",
     },
 ];

vinvoor/src/types/leaderboard.ts

@@ -0,0 +1,28 @@
+import { TableHeadCell } from "./table";
+
+export interface LeaderboardItem {
+    position: number;
+    username: string;
+    totalDays: number;
+}
+
+export const leaderboardHeadCells: readonly TableHeadCell<LeaderboardItem>[] = [
+    {
+        id: "position",
+        label: "#",
+        align: "center",
+        padding: "checkbox",
+    },
+    {
+        id: "username",
+        label: "Username",
+        align: "left",
+        padding: "normal",
+    },
+    {
+        id: "totalDays",
+        label: "Total Days",
+        align: "right",
+        padding: "normal",
+    },
+];