fixed a bit

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

@@ -1,4 +1,4 @@
-"use client"; // Mark as a Client Component
+"use client";
 import { useState, useEffect } from "react";
 import { useSession } from "next-auth/react";
 import { useRouter } from "next/navigation";
@@ -10,43 +10,36 @@ export default function TeamPage({ params }) {
   const [teamMembers, setTeamMembers] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState("");
-  const [huntActive, setHuntActive] = useState(false);
   const router = useRouter();
   const { teamId } = params;
 
-  // Fetch team data
   useEffect(() => {
     async function fetchTeamData() {
       try {
-        if (!teamId) {
-          throw new Error("No team ID provided");
+        if (!teamId || isNaN(parseInt(teamId, 10))) {
+          throw new Error("Invalid team ID");
         }
 
-        // Fetch team details
-        const teamResponse = await fetch(`/api/teams/${teamId}`);
-        if (!teamResponse.ok) {
-          const errorData = await teamResponse.json();
+        const response = await fetch(`/api/teams/${teamId}`, {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          credentials: "include", // Important for auth
+        });
+
+        if (!response.ok) {
+          const errorData = await response.json();
           throw new Error(errorData.error || "Failed to fetch team data");
         }
-        const teamData = await teamResponse.json();
-        setTeam(teamData);
 
-        // Fetch team members
-        const membersResponse = await fetch(`/api/teams/${teamId}/members`);
-        if (!membersResponse.ok) {
-          // Don't throw here, just log the error
-          console.error("Failed to fetch team members");
-        } else {
-          const membersData = await membersResponse.json();
-          setTeamMembers(membersData);
+        const data = await response.json();
+        if (!data.team) {
+          throw new Error("Team not found");
         }
 
-        // Fetch hunt status
-        const huntStatusResponse = await fetch("/api/hunt-status");
-        if (huntStatusResponse.ok) {
-          const huntStatusData = await huntStatusResponse.json();
-          setHuntActive(huntStatusData.active);
-        }
+        setTeam(data.team);
+        setTeamMembers(data.members || []);
       } catch (err) {
         console.error("Team page error:", err);
         setError(err.message);
@@ -57,10 +50,11 @@ export default function TeamPage({ params }) {
 
     if (status === "authenticated" && teamId) {
       fetchTeamData();
+      const interval = setInterval(fetchTeamData, 5000); // Refresh every 5 seconds
+      return () => clearInterval(interval);
     }
   }, [teamId, status]);
 
-  // Handle authentication
   useEffect(() => {
     if (status === "unauthenticated") {
       router.push("/login");
@@ -81,59 +75,79 @@ export default function TeamPage({ params }) {
 
   return (
     <div className="team-page-container">
-      <div className="page-header">
-        <Link href="/team-selection" className="back-button">
-          ←
-        </Link>
-        <div className="page-title">Team Details</div>
-        <div className="placeholder"></div>
-      </div>
-
-      <div className="team-details-card">
-        <h1>{team.name}</h1>
-
-        <div className="team-code-container">
-          <h2>Team Code</h2>
-          <div className="team-code">{team.code}</div>
-          <p>Share this code with others to join your team</p>
-        </div>
-
-        <div className="team-members-container">
-          <h2>Team Members</h2>
-          {teamMembers.length === 0 ? (
-            <p>No members have joined yet</p>
-          ) : (
-            <ul className="team-members-list">
-              {teamMembers.map((member) => (
-                <li key={member.id} className="team-member">
-                  {member.username}
-                </li>
-              ))}
-            </ul>
-          )}
-        </div>
-
-        <div className="team-actions">
-          <button className="team-button" disabled={!huntActive}>
-            Start Hunt
-          </button>
+      <div className="navbar">
+        <div className="team-info">
+          <div className="team-name">Team Name: {team.name}</div>
+          <div className="team-code">Team Join Code: {team.code}</div>
         </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 className="team-members">
+        {teamMembers.map((member) => (
+          <div
+            key={member.id}
+            className={`member-card ${
+              member.id === session?.user?.id ? "current-user" : ""
+            }`}
+          >
+            {member.username}
+          </div>
+        ))}
       </div>
+
+      <style jsx>{`
+        .team-page-container {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          padding: 20px;
+        }
+        .navbar {
+          position: sticky;
+          top: 0;
+          width: 100%;
+          background-color: #fff;
+          border-bottom: 1px solid #ccc;
+          padding: 10px 0;
+          text-align: center;
+          z-index: 1000;
+        }
+        .team-info {
+          display: flex;
+          justify-content: space-between;
+          width: 100%;
+          max-width: 600px;
+          padding: 0 20px;
+        }
+        .team-name {
+          font-size: 24px;
+          font-weight: bold;
+        }
+        .team-code {
+          font-size: 18px;
+          color: #555;
+        }
+        .team-members {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          width: 100%;
+          max-width: 600px;
+          margin-top: 20px;
+        }
+        .member-card {
+          width: 100%;
+          padding: 10px;
+          margin: 5px 0;
+          border: 1px solid #ccc;
+          border-radius: 4px;
+          background-color: #f9f9f9;
+          text-align: center;
+        }
+        .member-card.current-user {
+          background-color: #d3d3d3;
+        }
+      `}</style>
     </div>
   );
 }

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

@@ -1,5 +1,5 @@
 // app/api/teams/[teamId]/route.js
-import { queryOne } from "../../../../lib/db";
+import { queryOne, query } from "../../../../lib/db";
 import { getServerSession } from "next-auth/next";
 import { authOptions } from "../../../api/auth/[...nextauth]/route";
 
@@ -32,9 +32,10 @@ export async function GET(request, context) {
       );
     }
 
-    const team = await queryOne("SELECT * FROM teams WHERE id = ?", [
-      requestedTeamId,
-    ]);
+    const team = await queryOne(
+      "SELECT id, name, code FROM teams WHERE id = ?",
+      [requestedTeamId]
+    );
 
     if (!team) {
       return new Response(JSON.stringify({ error: "Team not found" }), {
@@ -42,9 +43,13 @@ export async function GET(request, context) {
       });
     }
 
-    return new Response(JSON.stringify(team), { status: 200 });
+    const members = await query(
+      "SELECT id, username FROM users WHERE team_id = ?",
+      [requestedTeamId]
+    );
+
+    return new Response(JSON.stringify({ team, members }), { status: 200 });
   } catch (error) {
-    console.error("Team fetch error:", error);
     return new Response(
       JSON.stringify({ error: "Failed to fetch team details" }),
       { status: 500 }