Made it so the team members page shows more than one user and fixed the issue so that multiple users can join the same team. Team GUI needs to be worked on however.

app/(auth)/login/page.js

@@ -129,21 +129,6 @@ export default function Login() {
         </div>
       </div>
 
-      <div className="nav-bar">
-        <div className="nav-item">
-          <div className="nav-icon">🏠</div>
-        </div>
-        <div className="nav-item">
-          <div className="nav-icon">📊</div>
-        </div>
-        <div className="nav-item">
-          <div className="nav-icon">🏆</div>
-        </div>
-        <div className="nav-item">
-          <div className="nav-icon">👤</div>
-        </div>
-      </div>
-
       <style jsx>{`
         .auth-page {
           display: flex;
@@ -194,22 +179,6 @@ export default function Login() {
           color: red;
           margin-top: 10px;
         }
-        .nav-bar {
-          position: fixed;
-          bottom: 0;
-          width: 100%;
-          background-color: #fff;
-          border-top: 1px solid #ccc;
-          padding: 10px 0;
-          text-align: center;
-        }
-        .nav-item {
-          display: inline-block;
-          margin: 0 10px;
-        }
-        .nav-icon {
-          font-size: 24px;
-        }
       `}</style>
     </div>
   );

app/(auth)/register/page.js

@@ -105,21 +105,6 @@ export default function Register() {
         </div>
       </div>
 
-      <div className="nav-bar">
-        <div className="nav-item">
-          <div className="nav-icon">🏠</div>
-        </div>
-        <div className="nav-item">
-          <div className="nav-icon">📊</div>
-        </div>
-        <div className="nav-item">
-          <div className="nav-icon">🏆</div>
-        </div>
-        <div className="nav-item">
-          <div className="nav-icon">👤</div>
-        </div>
-      </div>
-
       <style jsx>{`
         .auth-page {
           display: flex;
@@ -170,22 +155,6 @@ export default function Register() {
           color: red;
           margin-top: 10px;
         }
-        .nav-bar {
-          position: fixed;
-          bottom: 0;
-          width: 100%;
-          background-color: #fff;
-          border-top: 1px solid #ccc;
-          padding: 10px 0;
-          text-align: center;
-        }
-        .nav-item {
-          display: inline-block;
-          margin: 0 10px;
-        }
-        .nav-icon {
-          font-size: 24px;
-        }
       `}</style>
     </div>
   );

app/(main)/team-selection/page.js

@@ -41,6 +41,7 @@ export default function TeamSelection() {
         throw new Error(data.error || "Failed to join team");
       }
 
+      // Navigate to the team page using the correct URL format
       window.location.href = `/${data.teamId}`;
     } catch (err) {
       setError(err.message);

app/api/join-team/route.js

@@ -1,46 +1,51 @@
-import { queryOne } from "../../../../lib/db";
-import { getServerSession } from "next-auth/next";
-import { authOptions } from "../../auth/[...nextauth]/route";
+import { queryOne, run } from "@/lib/db";
+import { cookies } from "next/headers";
+import { verifyToken } from "@/app/api/auth/[...nextauth]/route";
 
 export async function POST(request) {
-  const session = await getServerSession(authOptions);
+  try {
+    // Use our custom token verification instead of getServerSession
+    const cookieStore = await cookies();
+    const sessionToken = cookieStore.get("next-auth.session-token")?.value;
 
-  if (!session) {
-    return new Response(JSON.stringify({ error: "Unauthorized" }), {
-      status: 401,
-    });
+    if (!sessionToken) {
+      return Response.json({ error: "Unauthorized" }, { status: 401 });
+    }
+
+    const userData = verifyToken(sessionToken);
+    if (!userData) {
+      return Response.json({ error: "Invalid session" }, { status: 401 });
     }
 
-  try {
     const { teamCode } = await request.json();
     if (!teamCode) {
-      return new Response(JSON.stringify({ error: "Team code is required" }), {
-        status: 400,
-      });
+      return Response.json({ error: "Team code is required" }, { status: 400 });
     }
 
-    const team = await queryOne("SELECT id FROM teams WHERE code = ?", [
+    const team = await queryOne("SELECT id, name FROM teams WHERE code = ?", [
       teamCode,
     ]);
 
     if (!team) {
-      return new Response(JSON.stringify({ error: "Invalid team code" }), {
-        status: 404,
-      });
+      return Response.json({ error: "Invalid team code" }, { status: 404 });
     }
 
-    await queryOne("UPDATE users SET team_id = ? WHERE id = ?", [
+    // Update the user's team ID
+    await run("UPDATE users SET team_id = ? WHERE id = ?", [
       team.id,
-      session.user.id,
+      userData.id,
     ]);
 
-    return new Response(JSON.stringify({ teamId: team.id }), {
-      status: 200,
-    });
+    return Response.json(
+      {
+        teamId: team.id,
+        teamName: team.name,
+        success: true,
+      },
+      { status: 200 }
+    );
   } catch (error) {
     console.error("Join team error:", error);
-    return new Response(JSON.stringify({ error: "Failed to join team" }), {
-      status: 500,
-    });
+    return Response.json({ error: "Failed to join team" }, { status: 500 });
   }
 }

app/api/teams/[teamId]/route.js

@@ -2,6 +2,8 @@ import { query, queryOne } from "@/lib/db";
 import { cookies } from "next/headers";
 import { verifyToken } from "@/app/api/auth/[...nextauth]/route";
 
+export const dynamic = "force-dynamic"; // Disable static rendering and caching
+
 export async function GET(request, context) {
   try {
     // Use our custom token verification
@@ -17,7 +19,9 @@ export async function GET(request, context) {
       return Response.json({ error: "Invalid session" }, { status: 401 });
     }
 
-    const teamId = context.params.teamId;
+    // Properly await the params object before accessing it
+    const params = context.params || {};
+    const teamId = params.teamId;
 
     // Validate teamId
     if (!teamId || isNaN(parseInt(teamId, 10))) {
@@ -30,18 +34,27 @@ export async function GET(request, context) {
       return Response.json({ error: "Team not found" }, { status: 404 });
     }
 
+    // Use a fresh query to get the latest team members each time
     const members = await query(
-      "SELECT id, username FROM users WHERE team_id = ?",
+      "SELECT id, username FROM users WHERE team_id = ? ORDER BY username ASC",
       [teamId]
     );
 
+    const timestamp = new Date().toISOString(); // Add timestamp for debugging
+
     return Response.json(
       {
         success: true,
         team,
         members,
+        refreshed: timestamp,
       },
-      { status: 200 }
+      {
+        status: 200,
+        headers: {
+          "Cache-Control": "no-store, max-age=0", // Prevent caching
+        },
+      }
     );
   } catch (error) {
     console.error("Team fetch error:", error);