vinvoor: merge vinvoor-heatmap into voor-en-achter

vinvoor/package.json

@@ -26,7 +26,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.23.1",
-    "react-router-hash-link": "^2.4.3"
+    "react-router-hash-link": "^2.4.3",
+    "react-tooltip": "^5.27.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.66",

vinvoor/src/App.tsx

@@ -1,8 +1,9 @@
 import { Container } from "@mui/material";
 import { useContext } from "react";
-import { Navigate, Outlet } from "react-router-dom";
+import { Navigate, Outlet, useOutlet } from "react-router-dom";
 import { LoadingSkeleton } from "./components/LoadingSkeleton";
 import { NavBar } from "./navbar/NavBar";
+import { Overview } from "./overview/Overview";
 import { UserContext } from "./user/UserProvider";
 import { WelcomePage } from "./WelcomePage";
 
@@ -11,13 +12,19 @@ export const App = () => {
         userState: { user, loading },
     } = useContext(UserContext);
 
+    const outlet = useOutlet();
+
     return (
         <>
             <NavBar />
             <Container maxWidth="xl" sx={{ my: "2%" }}>
                 <LoadingSkeleton loading={loading}>
                     {user !== undefined ? (
-                        <Outlet />
+                        outlet !== null ? (
+                            <Outlet />
+                        ) : (
+                            <Overview />
+                        )
                     ) : (
                         <>
                             <WelcomePage />

vinvoor/src/cards/Cards.tsx

@@ -1,7 +1,7 @@
 import { createContext, Dispatch, SetStateAction, useState } from "react";
 import { LoadingSkeleton } from "../components/LoadingSkeleton";
 import { useFetch } from "../hooks/useFetch";
-import { Card, convertCardJSON } from "../types/cards";
+import { Card } from "../types/cards";
 import { CardsEmpty } from "./CardsEmpty";
 import { CardsTable } from "./CardsTable";
 
@@ -17,11 +17,7 @@ export const CardContext = createContext<CardContextProps>({
 
 export const Cards = () => {
     const [cards, setCards] = useState<readonly Card[]>([]);
-    const { loading, error: _ } = useFetch<readonly Card[]>(
-        "cards",
-        setCards,
-        convertCardJSON
-    );
+    const { loading } = useFetch<readonly Card[]>("cards", setCards);
 
     return (
         <LoadingSkeleton loading={loading}>

vinvoor/src/leaderboard/Leaderboard.tsx

@@ -10,7 +10,7 @@ export const Leaderboard = () => {
     const [leaderboardItems, setLeaderboardItems] = useState<
         readonly LeaderboardItem[]
     >([]);
-    const { loading, error: _ } = useFetch<readonly LeaderboardItem[]>(
+    const { loading } = useFetch<readonly LeaderboardItem[]>(
         "leaderboard",
         setLeaderboardItems
     );
@@ -24,7 +24,6 @@ export const Leaderboard = () => {
                 />
                 <TableContainer>
                     <Table>
-                        {/* <LeaderboardTableHead /> */}
                         <LeaderboardTableBody
                             leaderboardItems={leaderboardItems}
                         />

vinvoor/src/leaderboard/LeaderboardTableBody.tsx

@@ -1,39 +1,14 @@
-import {
-    styled,
-    TableBody,
-    TableCell,
-    tableCellClasses,
-    TableRow,
-    Typography,
-} from "@mui/material";
+import { TableBody, TableCell, TableRow, Typography } from "@mui/material";
+import { alpha } from "@mui/material/styles";
 import { PodiumBronze, PodiumGold, PodiumSilver } from "mdi-material-ui";
-import { FC } from "react";
+import { FC, useContext } from "react";
 import { leaderboardHeadCells, LeaderboardItem } from "../types/leaderboard";
+import { UserContext } from "../user/UserProvider";
 
 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:
@@ -50,13 +25,33 @@ const getPosition = (position: number) => {
 export const LeaderboardTableBody: FC<LeaderboardTableBodyProps> = ({
     leaderboardItems: rows,
 }) => {
+    const {
+        userState: { user },
+    } = useContext(UserContext);
+
     return (
         <TableBody>
-            {rows.map((row) => {
+            {rows.map((row, index) => {
                 return (
-                    <StyledTableRow key={row.username} id={row.username}>
+                    <TableRow
+                        key={row.username}
+                        id={row.username}
+                        sx={{
+                            ...(index % 2 === 0 && {
+                                backgroundColor: (theme) =>
+                                    theme.palette.action.hover,
+                            }),
+                            ...(row.username === user!.username && {
+                                backgroundColor: (theme) =>
+                                    alpha(
+                                        theme.palette.primary.main,
+                                        theme.palette.action.activatedOpacity
+                                    ),
+                            }),
+                        }}
+                    >
                         {leaderboardHeadCells.map((headCell) => (
-                            <StyledTableCell
+                            <TableCell
                                 key={headCell.id}
                                 align={headCell.align}
                                 padding={headCell.padding}
@@ -66,9 +61,9 @@ export const LeaderboardTableBody: FC<LeaderboardTableBodyProps> = ({
                                 ) : (
                                     <Typography>{row[headCell.id]}</Typography>
                                 )}
-                            </StyledTableCell>
+                            </TableCell>
                         ))}
-                    </StyledTableRow>
+                    </TableRow>
                 );
             })}
         </TableBody>

vinvoor/src/main.tsx

@@ -8,6 +8,7 @@ import { SnackbarProvider } from "notistack";
 import React from "react";
 import ReactDOM from "react-dom/client";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
+import "react-tooltip/dist/react-tooltip.css";
 import { App } from "./App.tsx";
 import { Cards } from "./cards/Cards.tsx";
 import { ErrorPage } from "./errors/ErrorPage.tsx";

vinvoor/src/navbar/NavBarLogo.tsx

@@ -1,4 +1,4 @@
-import { Button, SxProps, Theme, Typography } from "@mui/material";
+import { Box, Button, SxProps, Theme, Typography } from "@mui/material";
 import { FC } from "react";
 import { UnstyledLink } from "../components/UnstyledLink";
 
@@ -8,25 +8,28 @@ interface NavBarLogoProps {
 
 export const NavBarLogo: FC<NavBarLogoProps> = ({ sx }) => {
     return (
-        <UnstyledLink to="/">
-            <Button
-                color="inherit"
-                sx={{
-                    ...sx,
-                    textTransform: "none",
-                    color: "white",
-                }}
-            >
-                <Typography
-                    variant="h6"
+        <Box display="flex">
+            <UnstyledLink to="/">
+                <Button
+                    color="inherit"
                     sx={{
-                        letterSpacing: ".3rem",
-                        fontWeight: 700,
+                        ...sx,
+                        textTransform: "none",
+                        color: "white",
                     }}
                 >
-                    ZeSS
-                </Typography>
-            </Button>
-        </UnstyledLink>
+                    <Typography
+                        variant="h6"
+                        sx={{
+                            letterSpacing: ".3rem",
+                            fontWeight: 700,
+                        }}
+                    >
+                        ZeSS
+                    </Typography>
+                </Button>
+            </UnstyledLink>
+            <Box sx={{ flexGrow: 1 }} />
+        </Box>
     );
 };

vinvoor/src/overview/Overview.tsx

@@ -0,0 +1,45 @@
+import { Box, Paper, Switch, Typography } from "@mui/material";
+import { useState } from "react";
+import { Tooltip } from "react-tooltip";
+import { LoadingSkeleton } from "../components/LoadingSkeleton";
+import { useFetch } from "../hooks/useFetch";
+import { Scan } from "../types/scans";
+import { Heatmap, HeatmapVariant } from "./heatmap/Heatmap";
+
+export const Overview = () => {
+    const [scans, setScans] = useState<Scan[]>([]);
+    const { loading } = useFetch<Scan[]>("scans", setScans);
+    const [checked, setChecked] = useState<boolean>(true);
+
+    const dates = scans.map((scan) => new Date(scan.scanTime));
+
+    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setChecked(event.target.checked);
+    };
+
+    return (
+        <LoadingSkeleton loading={loading}>
+            <Paper elevation={4} sx={{ padding: 2 }}>
+                <Box
+                    sx={{
+                        display: "flex",
+                        justifyContent: "right",
+                    }}
+                >
+                    <Typography variant="h6">Months</Typography>
+                    <Switch checked={checked} onChange={handleChange} />
+                    <Typography variant="h6">Days</Typography>
+                </Box>
+                <Heatmap
+                    startDate={new Date("2024-01-01")}
+                    endDate={new Date("2024-12-31")}
+                    days={dates}
+                    variant={
+                        checked ? HeatmapVariant.DAYS : HeatmapVariant.MONTHS
+                    }
+                />
+                <Tooltip id="heatmap" />
+            </Paper>
+        </LoadingSkeleton>
+    );
+};