back to square 1. Now convert the json format info into readable webpage info

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

@@ -43,7 +43,10 @@ export default function CreateTeam() {
     try {
       const response = await fetch("/api/teams", {
         method: "POST",
-        headers: { "Content-Type": "application/json" },
+        headers: {
+          "Content-Type": "application/json",
+        },
+        credentials: "include", // Important for cookies
         body: JSON.stringify({ name: teamName }),
       });
 
@@ -53,7 +56,24 @@ export default function CreateTeam() {
         throw new Error(data.error || "Failed to create team");
       }
 
+      // Force a session update to get the new teamId
+      try {
+        // Update the client-side session data with the new teamId
+        if (session && session.user) {
+          session.user.teamId = data.teamId;
+        }
+        
+        console.log("Team created successfully, redirecting to:", `/team/${data.teamId}`);
+        
+        // Add a small delay to allow session update
+        setTimeout(() => {
           router.push(`/team/${data.teamId}`);
+        }, 100);
+      } catch (navError) {
+        console.error("Navigation error:", navError);
+        // Fallback to direct navigation
+        window.location.href = `/team/${data.teamId}`;
+      }
     } catch (err) {
       setError(err.message);
       setIsLoading(false);

app/(main)/team/[teamId]/page.js

@@ -19,6 +19,8 @@ export default function TeamPage({ params }) {
         throw new Error("Invalid team ID");
       }
 
+      console.log("Fetching team data for team ID:", teamId);
+      
       const response = await fetch(`/api/teams/${teamId}`, {
         method: "GET",
         headers: {
@@ -46,6 +48,7 @@ export default function TeamPage({ params }) {
         throw new Error("Team not found");
       }
 
+      console.log("Team data fetched successfully:", data);
       setTeam(data.team);
       setTeamMembers(data.members || []);
       setError("");
@@ -62,12 +65,17 @@ export default function TeamPage({ params }) {
   }, [teamId, router]);
 
   useEffect(() => {
+    // Only attempt to fetch data when session is ready and we have a teamId
     if (status === "authenticated" && teamId) {
+      console.log("Session authenticated, fetching team data");
       fetchTeamData();
       const interval = setInterval(fetchTeamData, 5000); // Refresh every 5 seconds
       return () => clearInterval(interval);
     } else if (status === "unauthenticated") {
+      console.log("User not authenticated, redirecting to login");
       router.push("/login");
+    } else {
+      console.log("Waiting for session...", status);
     }
   }, [teamId, status, fetchTeamData, router]);
 

app/(main)/team/[teamId]/route.js

@@ -1,16 +1,23 @@
 import { redirect } from "next/navigation";
-import { getServerSession } from "next-auth/next";
+import { query, queryOne } from "@/lib/db";
-import { authOptions } from "@/app/api/auth/[...nextauth]/route";
+import { cookies } from "next/headers";
-import { queryOne, query } from "@/lib/db";
+import { verifyToken } from "@/app/api/auth/[...nextauth]/route";
 
 export async function GET(_, context) {
-  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) {
+    if (!sessionToken) {
+      return redirect("/login");
+    }
+
+    const userData = verifyToken(sessionToken);
+    if (!userData) {
       return redirect("/login");
     }
 
-  try {
     const params = await context.params;
     const teamId = params.teamId;
 

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

@@ -1,16 +1,22 @@
 import { query, queryOne } from "@/lib/db";
-import { getServerSession } from "next-auth/next";
+import { cookies } from "next/headers";
-import { authOptions } from "../../auth/[...nextauth]/route";
+import { verifyToken } from "@/app/api/auth/[...nextauth]/route";
 
-export async function GET(_, context) {
+export async function GET(request, context) {
-  // Changed 'request' to '_' to indicate unused parameter
+  try {
-  const session = await getServerSession(authOptions);
+    // Use our custom token verification
+    const cookieStore = await cookies();
+    const sessionToken = cookieStore.get("next-auth.session-token")?.value;
 
-  if (!session) {
+    if (!sessionToken) {
       return Response.json({ error: "Unauthorized" }, { status: 401 });
     }
 
-  try {
+    const userData = verifyToken(sessionToken);
+    if (!userData) {
+      return Response.json({ error: "Invalid session" }, { status: 401 });
+    }
+
     const teamId = context.params.teamId;
 
     // Validate teamId

app/api/teams/route.js

@@ -1,49 +1,70 @@
-import { queryOne } from "@/lib/db";
+import { queryOne, run } from "@/lib/db";
-import { getServerSession } from "next-auth/next";
+import { cookies } from "next/headers";
-import { authOptions } from "@/app/api/auth/[...nextauth]/route";
+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) {
+    if (!sessionToken) {
-    return new Response(JSON.stringify({ error: "Unauthorized" }), {
+      return Response.json({ error: "Unauthorized" }, { status: 401 });
-      status: 401,
-    });
     }
 
-  try {
+    const userData = verifyToken(sessionToken);
+    if (!userData) {
+      return Response.json({ error: "Invalid session" }, { status: 401 });
+    }
+
+    // Now we have valid user data from our custom token
     const { name } = await request.json();
     if (!name) {
-      return new Response(JSON.stringify({ error: "Team name is required" }), {
+      return Response.json({ error: "Team name is required" }, { status: 400 });
-        status: 400,
-      });
     }
 
-    const result = await queryOne(
+    // Generate a team code (6 uppercase alphanumeric characters)
+    const teamCode = generateTeamCode();
+
+    // Insert the new team
+    const teamResult = await run(
       "INSERT INTO teams (name, code) VALUES (?, ?)",
-      [name, generateTeamCode()]
+      [name, teamCode]
     );
 
-    if (!result.insertId) {
+    if (!teamResult.lastID) {
       throw new Error("Failed to create team");
     }
 
-    await queryOne("UPDATE users SET team_id = ? WHERE id = ?", [
+    // Update the user's team_id
-      result.insertId,
+    await run("UPDATE users SET team_id = ? WHERE id = ?", [
-      session.user.id,
+      teamResult.lastID,
+      userData.id,
     ]);
 
-    return new Response(JSON.stringify({ teamId: result.insertId }), {
+    // Return success with the team ID for redirection
-      status: 201,
+    return Response.json(
-    });
+      {
+        teamId: teamResult.lastID,
+        teamCode: teamCode,
+        teamName: name,
+      },
+      { status: 201 }
+    );
   } catch (error) {
     console.error("Team creation error:", error);
-    return new Response(JSON.stringify({ error: "Failed to create team" }), {
+    return Response.json(
-      status: 500,
+      { error: "Failed to create team: " + error.message },
-    });
+      { status: 500 }
+    );
   }
 }
 
 function generateTeamCode() {
-  return Math.random().toString(36).substring(2, 8).toUpperCase();
+  const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
+  let result = "";
+  for (let i = 0; i < 6; i++) {
+    result += characters.charAt(Math.floor(Math.random() * characters.length));
+  }
+  return result;
 }