vinvoor: simple overview page

vinvoor/package.json

@@ -42,6 +42,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
     "typescript": "^5.2.2",
-    "vite": "^5.2.0"
+    "vite": "^5.2.0",
+    "vite-plugin-svgr": "^4.2.0"
   }
 }

vinvoor/src/cards/CardsAdd.tsx

@@ -47,7 +47,7 @@ const checkCardsChange = async (): Promise<
         await new Promise((r) => setTimeout(r, CHECK_INTERVAL));
     }
 
-    return [cardsNow !== null && cardsNow !== cardsStart, cardsNow];
+    return [cardsNow !== null && !equal(cardsNow, cardsStart), cardsNow];
 };
 
 export const CardsAdd = () => {
@@ -93,7 +93,9 @@ export const CardsAdd = () => {
             title: confirmTitle,
             description: confirmContent,
             confirmationText: "Register",
-        }).then(() => startRegistering());
+        })
+            .then(() => startRegistering())
+            .catch(() => {}); // Required otherwise the confirm dialog will throw an error in the console
     };
 
     return (
@@ -108,3 +110,5 @@ export const CardsAdd = () => {
         </Button>
     );
 };
+
+// TODO: Make plus sign a spinner when registering

vinvoor/src/leaderboard/LeaderboardTableBody.tsx

@@ -1,9 +1,17 @@
-import { TableBody, TableCell, TableRow, Typography } from "@mui/material";
+import {
+    Icon,
+    TableBody,
+    TableCell,
+    TableRow,
+    Typography,
+} from "@mui/material";
 import { alpha } from "@mui/material/styles";
-import { PodiumBronze, PodiumGold, PodiumSilver } from "mdi-material-ui";
 import { FC, useContext } from "react";
 import { leaderboardHeadCells, LeaderboardItem } from "../types/leaderboard";
 import { UserContext } from "../user/UserProvider";
+import FirstPlaceIcon from "/first_place.svg";
+import SecondPlaceIcon from "/second_place.svg";
+import ThirdPlaceIcon from "/third_place.svg";
 
 interface LeaderboardTableBodyProps {
     leaderboardItems: readonly LeaderboardItem[];
@@ -12,11 +20,24 @@ interface LeaderboardTableBodyProps {
 const getPosition = (position: number) => {
     switch (position) {
         case 1:
-            return <PodiumGold htmlColor="#FFD700" />;
+            // return <PodiumGold htmlColor="#FFD700" />;
+            return (
+                <Icon>
+                    <img src={FirstPlaceIcon} />
+                </Icon>
+            );
         case 2:
-            return <PodiumSilver htmlColor="#C0C0C0" />;
+            return (
+                <Icon>
+                    <img src={SecondPlaceIcon} />
+                </Icon>
+            );
         case 3:
-            return <PodiumBronze htmlColor="#CD7F32" />;
+            return (
+                <Icon>
+                    <img src={ThirdPlaceIcon} />
+                </Icon>
+            );
         default:
             return <Typography fontWeight="bold">{position}</Typography>;
     }

vinvoor/src/overview/Overview.tsx

@@ -86,7 +86,3 @@ export const Overview = () => {
         </LoadingSkeleton>
     );
 };
-
-// TODO: Checked in today
-// TODO: Current streak
-// TODO: Pie chart

vinvoor/src/overview/heatmap/Heatmap.tsx

@@ -172,7 +172,7 @@ export const Heatmap: FC<HeatmapProps> = ({ startDate, endDate, variant }) => {
                 y={y}
                 rx={2}
                 ry={2}
-                className={getClassNameForValue(value, variant)}
+                className={`rect ${getClassNameForValue(value, variant)}`}
                 {...getTooltipDataAttrsForDate(value, variant)}
             />
         );

vinvoor/src/overview/heatmap/heatmap.css

@@ -60,3 +60,17 @@
     stroke-width: 1px;
     stroke: #ba5f02;
 }
+
+@keyframes createBox {
+    from {
+        width: 0;
+        height: 0;
+    }
+    to {
+        transform: scale(1);
+    }
+}
+
+.rect {
+    animation: createBox 1s;
+}

vinvoor/vite.config.ts

@@ -1,7 +1,8 @@
 import react from "@vitejs/plugin-react-swc";
 import { defineConfig } from "vite";
+import svgr from "vite-plugin-svgr";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-    plugins: [react()],
+    plugins: [svgr(), react()],
 });