Merge pull request hallofcodes#11 from mrepol742/master

mrepol742 · web-flow · commit 39d570830ab9 · 2026-03-18T04:20:49.000+08:00
feat: address several known issues
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -0,0 +1,47 @@
+name: Build Next.js App
+
+on:
+  push:
+    branches: ['master']
+  pull_request:
+    branches: ['master']
+  workflow_dispatch:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+            node-version: 22
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Cache Supabase Docker images
+        uses: actions/cache@v4
+        with:
+           path: /var/lib/docker
+           key: ${{ runner.os }}-supabase-docker-${{ hashFiles('supabase/config.toml') }}
+           restore-keys: |
+             ${{ runner.os }}-supabase-docker-
+
+      - name: Start Supabase locally in background
+        run: |
+           npx --yes supabase start
+           SUPABASE_URL=$(npx --yes supabase status --output env | awk -F= '/API_URL/ {gsub(/"/,"",$2); print $2}')
+           SUPABASE_ANON_KEY=$(npx --yes supabase status --output env | awk -F= '/PUBLISHABLE_KEY/ {gsub(/"/,"",$2); print $2}')
+           SUPABASE_SERVICE_ROLE_KEY=$(npx --yes supabase status --output env | awk -F= '/SERVICE_ROLE_KEY/ {gsub(/"/,"",$2); print $2}')
+
+           echo "NEXT_PUBLIC_SUPABASE_URL=$SUPABASE_URL" >> $GITHUB_ENV
+           echo "NEXT_PUBLIC_SUPABASE_ANON_KEY=$SUPABASE_ANON_KEY" >> $GITHUB_ENV
+           echo "SUPABASE_SERVICE_ROLE_KEY=$SUPABASE_SERVICE_ROLE_KEY" >> $GITHUB_ENV
+
+           sleep 15 # wait
+
+      - name: Build project
+        run: npm run build
diff --git a/app/components/BoardList.tsx b/app/components/BoardList.tsx
@@ -4,20 +4,24 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { createClient } from "../lib/supabase/client";
 import Link from "next/link";
 import { useState } from "react";
-import { faKey, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { faKey, faRefresh, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { toast } from "react-toastify";
+import { Leaderboard } from "./dashboard/LeaderbordList";
+import { User } from "@supabase/supabase-js";
 
 export default function BoardList({
+  user,
   board,
 }: {
-  board: { id: string; name: string; slug: string; join_code: string };
+  user: User;
+  board: Leaderboard;
 }) {
+  const supabase = createClient();
   const [showCodeModal, setShowCodeModal] = useState(false);
   const [selectedCode, setSelectedCode] = useState<string | null>(null);
   const [showDeleteModal, setShowDeleteModal] = useState(false);
 
   const handleDelete = async () => {
-    const supabase = await createClient();
     const { error } = await supabase
       .from("leaderboards")
       .delete()
@@ -27,6 +31,74 @@ export default function BoardList({
     window.location.reload();
   };
 
+  const regenerateJoinCode = (boardId: string) => {
+    const generateJoinCode = new Promise(async (resolve, reject) => {
+      try {
+        const joinCode = crypto.randomUUID().slice(0, 8);
+        const { data, error } = await supabase
+          .from("leaderboards")
+          .update({ join_code: joinCode })
+          .eq("id", boardId)
+          .select()
+          .single();
+
+        if (error) return reject(error);
+
+        resolve(data);
+      } catch (error) {
+        reject(error);
+      }
+    });
+
+    toast.promise(generateJoinCode, {
+      pending: "Generating new join code...",
+      success: "Successfully generated new join code.",
+      error: {
+        render({ data }) {
+          const err = data as Error;
+          return (
+            err?.message ||
+            "Failed to generate new join code. Please try again."
+          );
+        },
+      },
+    });
+  };
+
+  const getJoinCode = (boardId: string) => {
+    const joinCode: Promise<{ join_code: string }[]> = new Promise(
+      async (resolve, reject) => {
+        try {
+          const { data, error } = await supabase
+            .from("leaderboards")
+            .select("join_code")
+            .eq("id", boardId)
+
+          if (error) return reject(error);
+
+          resolve(data);
+        } catch (error) {
+          reject(error);
+        }
+      },
+    );
+
+    toast.promise(joinCode, {
+      pending: "Getting join code...",
+      error: {
+        render({ data }) {
+          const err = data as Error;
+          return err?.message || "Failed to get join code. Please try again.";
+        },
+      },
+    });
+
+    joinCode.then((data) => {
+      setSelectedCode(data[0].join_code);
+      setShowCodeModal(true);
+    });
+  };
+
   return (
     <>
       <div
@@ -39,23 +111,31 @@ export default function BoardList({
           </p>
         </Link>
 
-        <div className="flex items-center gap-2">
-          <button
-            onClick={() => setShowDeleteModal(true)}
-            className="p-2 rounded-lg text-gray-600 hover:text-red-400 hover:bg-red-500/10 transition"
-          >
-            <FontAwesomeIcon icon={faTrash} className="text-xs" />
-          </button>
-          <button
-            onClick={() => {
-              setSelectedCode(board.join_code);
-              setShowCodeModal(true);
-            }}
-            className="p-2 rounded-lg text-gray-600 hover:text-indigo-400 hover:bg-indigo-500/10 transition"
-          >
-            <FontAwesomeIcon icon={faKey} className="text-xs" />
-          </button>
-        </div>
+        {user.id === board.owner_id && (
+          <div className="flex items-center gap-2">
+            <button
+              onClick={() => setShowDeleteModal(true)}
+              className="p-2 rounded-lg text-gray-600 hover:text-red-400 hover:bg-red-500/10 transition"
+              title="Delete Leaderboard"
+            >
+              <FontAwesomeIcon icon={faTrash} className="text-xs" />
+            </button>
+            <button
+              onClick={() => regenerateJoinCode(board.id)}
+              className="p-2 rounded-lg text-gray-600 hover:text-indigo-400 hover:bg-indigo-500/10 transition"
+              title="Regenerate Join Code"
+            >
+              <FontAwesomeIcon icon={faRefresh} className="text-xs" />
+            </button>
+            <button
+              onClick={() => getJoinCode(board.id)}
+              className="p-2 rounded-lg text-gray-600 hover:text-indigo-400 hover:bg-indigo-500/10 transition"
+              title="View Join Code"
+            >
+              <FontAwesomeIcon icon={faKey} className="text-xs" />
+            </button>
+          </div>
+        )}
       </div>
 
       {showCodeModal && (
diff --git a/app/components/dashboard/LeaderbordList.tsx b/app/components/dashboard/LeaderbordList.tsx
@@ -1,6 +1,18 @@
 import { createClient } from "../../lib/supabase/server";
 import BoardList from "../BoardList";
 
+export interface Leaderboard {
+  id: string;
+  name: string;
+  slug: string;
+  join_code?: string;
+  owner_id?: string;
+};
+
+export interface LeaderboardMember {
+  leaderboards: Leaderboard[];
+};
+
 export default async function LeaderboardsList() {
   const supabase = await createClient();
 
@@ -12,23 +24,23 @@ export default async function LeaderboardsList() {
 
   const { data: owned } = await supabase
     .from("leaderboards")
-    .select("id, name, slug, join_code")
+    .select("id, name, slug, owner_id")
     .eq("owner_id", user.id);
 
   const { data: joined } = await supabase
     .from("leaderboard_members")
-    .select("leaderboards(id, name, slug, join_code)")
+    .select("leaderboards(id, name, slug)")
     .eq("user_id", user.id)
     .neq("role", "owner");
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const joinedBoards = joined?.map((j: any) => j.leaderboards) || [];
+  const joinedBoards =
+    joined?.flatMap((j: LeaderboardMember) => j.leaderboards) || [];
 
   const ownedCount = owned?.length || 0;
   const joinedCount = joinedBoards.length;
 
   return (
-    <div 
+    <div
       className="glass-card p-6 h-full"
       data-aos="fade-up"
       data-aos-delay="200"
@@ -50,7 +62,7 @@ export default async function LeaderboardsList() {
               Owned ({ownedCount})
             </p>
             {owned.map((board) => (
-              <BoardList key={board.id} board={board} />
+              <BoardList key={board.id} user={user} board={board} />
             ))}
           </>
         )}
@@ -61,8 +73,8 @@ export default async function LeaderboardsList() {
             <p className="text-[10px] uppercase tracking-widest text-gray-700 font-semibold mt-4 mb-2">
               Joined ({joinedCount})
             </p>
-            {joinedBoards.map((board: { id: string; name: string; slug: string; join_code: string }) => (
-              <BoardList key={board.id} board={board} />
+            {joinedBoards.map((board) => (
+              <BoardList key={board.id} user={user} board={board} />
             ))}
           </>
         )}
diff --git a/app/lib/proxy/auth.ts b/app/lib/proxy/auth.ts
@@ -33,9 +33,10 @@ export default async function Auth(req: NextRequest) {
   const { pathname } = req.nextUrl;
 
   const protectedRoutes = ["/dashboard", "/logout"];
-  const isProtectedRoute = protectedRoutes.some((route) =>
-    pathname.startsWith(route),
-  );
+  const isProtectedRoute = protectedRoutes.some((route) => {
+    const regex = new RegExp(`^${route}(/.*)?$`);
+    return regex.test(pathname);
+  });
 
   if (isProtectedRoute && !user) {
     console.log("User is not authenticated, redirecting to login.");
diff --git a/sql/public.leaderboards.sql b/sql/public.leaderboards.sql
@@ -73,3 +73,19 @@ create policy "Users can join leaderboard"
 on public.leaderboard_members
 for insert
 with check (auth.uid() = user_id);
+
+create policy "Members can leave leaderboard"
+on public.leaderboard_members
+for delete
+using (user_id = auth.uid());
+
+create policy "Owner can manage members"
+on public.leaderboard_members
+for delete
+using (
+  leaderboard_id IN (
+    select leaderboard_id
+    from public.leaderboards
+    where owner_id = auth.uid()
+  )
+);
