chore: upgrade dependencies and fix compatibility

.github/workflows/ci.yml

@@ -25,7 +25,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: '20'
+          node-version: '22'
           cache: 'npm'
 
       - name: Install dependencies

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:20-alpine AS base
+FROM node:24-alpine AS base
 
 # Install dependencies only when needed
 FROM base AS deps

README.md

@@ -27,7 +27,7 @@ Anonymous voting system for National Tsing Hua University Student Association.
 
 ### Prerequisites
 
-- Node.js 18.18+
+- Node.js 22+ (Docker uses Node.js 24)
 - MongoDB 7+
 - npm 9+
 

app/vote/certificate/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useSyncExternalStore } from "react";
 import { useRouter } from "next/navigation";
 import Header from "@/components/Header";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
@@ -12,11 +12,19 @@
 import { useUser } from "@/hooks";
 import { API_CONSTANTS } from "@/lib/constants";
 
+const subscribeToHydration = () => () => {};
+const getClientSnapshot = () => true;
+const getServerSnapshot = () => false;
+
 export default function CompletionPage() {
   const router = useRouter();
-  const [votingHistory, setVotingHistory] = useState<VotingHistory | null>(
-    () => loadVotingHistory(),
+  const isHydrated = useSyncExternalStore(
+    subscribeToHydration,
+    getClientSnapshot,
+    getServerSnapshot,
   );
+  const [savedHistory, setVotingHistory] = useState<VotingHistory | null>(null);
+  const votingHistory = savedHistory ?? (isHydrated ? loadVotingHistory() : null);
   const [copiedIndex, setCopiedIndex] = useState<number | null>(null);
 
   const { user: userInfo } = useUser();

components/Footer.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import Link from "next/link";
-import { Heart, Github, Mail, Facebook, Instagram } from "lucide-react";
+import { Heart, GitBranch, Mail, Users, Camera } from "lucide-react";
 
 export default function Footer() {
   const currentYear = new Date().getFullYear();
@@ -73,7 +73,7 @@ export default function Footer() {
                   rel="noopener noreferrer"
                   className="flex items-center gap-2 text-muted-foreground hover:text-foreground transition-colors"
                 >
-                  <Facebook className="h-4 w-4" />
+                  <Users className="h-4 w-4" />
                   <span>Facebook</span>
                 </a>
               </li>
@@ -84,7 +84,7 @@ export default function Footer() {
                   rel="noopener noreferrer"
                   className="flex items-center gap-2 text-muted-foreground hover:text-foreground transition-colors"
                 >
-                  <Instagram className="h-4 w-4" />
+                  <Camera className="h-4 w-4" />
                   <span>Instagram</span>
                 </a>
               </li>
@@ -95,7 +95,7 @@ export default function Footer() {
                   rel="noopener noreferrer"
                   className="flex items-center gap-2 text-muted-foreground hover:text-foreground transition-colors"
                 >
-                  <Github className="h-4 w-4" />
+                  <GitBranch className="h-4 w-4" />
                   <span>GitHub</span>
                 </a>
               </li>

jest.config.js

@@ -12,8 +12,11 @@
   moduleNameMapper: {
     "^@/(.*)$": "<rootDir>/$1",
   },
-  modulePathIgnorePatterns: ["<rootDir>/.next/"],
-  testPathIgnorePatterns: ["<rootDir>/node_modules/", "<rootDir>/.next/"],
+  modulePathIgnorePatterns: ["[/\\\\]\\.next[/\\\\]"],
+  testPathIgnorePatterns: [
+    "[/\\\\]node_modules[/\\\\]",
+    "[/\\\\]\\.next[/\\\\]",
+  ],
   // Transform ESM modules from bson, mongodb, and mongoose packages
   // These packages use ESM exports which need to be transformed for Jest
   transformIgnorePatterns: ["/node_modules/(?!(bson|mongodb|mongoose)/)"],