fixed all issues regarding team's member list page where users couldn't leave properly or where they couldn't join properly. the team selection page will now directly communicate with the database to ensure everything stays up to date. The team member list page will also auto update every few seconds so the user will not have to manually update their page.

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

@@ -42,15 +42,37 @@ 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}`, {
+      // First check if the user is still part of this team by fetching current user data
+      const userResponse = await fetch("/api/user", {
         method: "GET",
         headers: {
           "Content-Type": "application/json",
         },
         credentials: "include",
-        // Add cache: 'no-store' to prevent caching of team data
+        cache: "no-store",
+      });
+
+      const userData = await userResponse.json();
+
+      // If the user is not in this team anymore, redirect to team selection
+      if (!userData.teamId || userData.teamId != teamId) {
+        console.log("User no longer in team, redirecting to team selection");
+        window.location.href = "/team-selection";
+        return;
+      }
+
+      console.log("Fetching team data for team ID:", teamId);
+
+      // Add timestamp to URL to ensure fresh data on every request
+      const timestamp = new Date().getTime();
+      const response = await fetch(`/api/teams/${teamId}?_t=${timestamp}`, {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json",
+          "Cache-Control": "no-cache, no-store, must-revalidate",
+          Pragma: "no-cache",
+        },
+        credentials: "include",
         cache: "no-store",
       });
 
@@ -99,8 +121,8 @@ export default function TeamPage({ params }) {
       console.log("Session authenticated, fetching team data");
       fetchTeamData();
 
-      // Set up an interval to refresh team data every 10 seconds
-      const refreshInterval = setInterval(fetchTeamData, 10000);
+      // Use a shorter interval (3 seconds) for more responsive updates
+      const refreshInterval = setInterval(fetchTeamData, 3000);
 
       // Clean up the interval when component unmounts
       return () => clearInterval(refreshInterval);
@@ -190,10 +212,18 @@ export default function TeamPage({ params }) {
                 });
 
                 if (response.ok) {
-                  router.push("/team-selection");
+                  // Immediately remove team data from all storage
+                  localStorage.removeItem("teamData");
+                  sessionStorage.removeItem("teamData");
+
+                  // Set a flag so we know the user has left this team
+                  localStorage.setItem("userLeftTeam", "true");
+
+                  // Force redirect to team selection
+                  window.location.href = "/team-selection";
                 } else {
-                  const error = await response.json();
-                  throw new Error(error.message || "Failed to leave team");
+                  const errorData = await response.json();
+                  throw new Error(errorData.error || "Failed to leave team");
                 }
               } catch (err) {
                 setError(err.message);

app/(main)/hunt-not-started/page.js

@@ -88,9 +88,12 @@ export default function HuntNotStarted() {
           color: white;
           border: none;
           border-radius: 4px;
-          padding: 10px 20px;
+          padding: 12px 30px; /* Increased padding */
           font-size: 16px;
           cursor: pointer;
+          min-width: 150px; /* Ensure minimum width */
+          display: inline-block; /* Proper box model */
+          text-align: center; /* Center text */
         }
 
         .back-button:hover {

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

@@ -12,14 +12,37 @@ export default function TeamSelection() {
   const router = useRouter();
 
   useEffect(() => {
+    // Clear any leftover team data cache from previous teams
+    localStorage.removeItem("teamData");
+    sessionStorage.removeItem("teamData");
+    localStorage.removeItem("userLeftTeam");
+
     if (status === "authenticated") {
-      if (session.user.teamId) {
-        window.location.href = `/${session.user.teamId}`;
-      } else {
-        setIsLoading(false);
-      }
+      // Always verify team status with a fresh API call to avoid stale session data
+      fetch(`/api/user?_t=${Date.now()}`, {
+        headers: {
+          "Cache-Control": "no-cache, no-store, must-revalidate",
+          Pragma: "no-cache",
+        },
+        credentials: "include",
+      })
+        .then((res) => res.json())
+        .then((userData) => {
+          if (userData.teamId) {
+            window.location.href = `/${userData.teamId}`;
+          } else {
+            setIsLoading(false);
+          }
+        })
+        .catch((error) => {
+          console.error("Failed to fetch user data:", error);
+          setIsLoading(false);
+        });
     } else if (status === "unauthenticated") {
       router.push("/login");
+    } else {
+      // Still loading session
+      setIsLoading(true);
     }
   }, [status, session, router]);
 

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

@@ -37,14 +37,38 @@ 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}`, {
+      // First check if the user is still part of this team by fetching current user data
+      const userResponse = await fetch("/api/user", {
         method: "GET",
         headers: {
           "Content-Type": "application/json",
         },
         credentials: "include",
+        cache: "no-store",
+      });
+
+      const userData = await userResponse.json();
+
+      // If the user is not in this team anymore, redirect to team selection
+      if (!userData.teamId || userData.teamId != teamId) {
+        console.log("User no longer in team, redirecting to team selection");
+        window.location.href = "/team-selection";
+        return;
+      }
+
+      console.log("Fetching team data for team ID:", teamId);
+
+      // Add timestamp to URL to ensure fresh data on every request
+      const timestamp = new Date().getTime();
+      const response = await fetch(`/api/teams/${teamId}?_t=${timestamp}`, {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json",
+          "Cache-Control": "no-cache, no-store, must-revalidate",
+          Pragma: "no-cache",
+        },
+        credentials: "include",
+        cache: "no-store",
       });
 
       if (!response.ok) {
@@ -90,6 +114,12 @@ export default function TeamPage({ params }) {
     if (status === "authenticated" && teamId) {
       console.log("Session authenticated, fetching team data");
       fetchTeamData();
+
+      // Use a shorter interval (3 seconds) for more responsive updates
+      const refreshInterval = setInterval(fetchTeamData, 3000);
+
+      // Clean up the interval when component unmounts
+      return () => clearInterval(refreshInterval);
     } else if (status === "unauthenticated") {
       console.log("User not authenticated, redirecting to login");
       router.push("/login");
@@ -174,10 +204,18 @@ export default function TeamPage({ params }) {
                 });
 
                 if (response.ok) {
-                  router.push("/team-selection");
+                  // Immediately remove team data from session state
+                  localStorage.removeItem("teamData");
+                  sessionStorage.removeItem("teamData");
+
+                  // Set a flag so we know the user has left this team
+                  localStorage.setItem("userLeftTeam", "true");
+
+                  // Force redirect to team selection
+                  window.location.href = "/team-selection";
                 } else {
-                  const error = await response.json();
-                  throw new Error(error.message || "Failed to leave team");
+                  const errorData = await response.json();
+                  throw new Error(errorData.error || "Failed to leave team");
                 }
               } catch (err) {
                 setError(err.message);
@@ -195,7 +233,6 @@ export default function TeamPage({ params }) {
             onClick={async () => {
               try {
                 setLoading(true);
-
                 if (!huntActive) {
                   // If hunt is not active, redirect to the "not started" page
                   router.push(`/hunt-not-started?teamId=${teamId}`);
@@ -318,6 +355,8 @@ export default function TeamPage({ params }) {
         .members-container {
           padding: 20px;
           flex: 1;
+          display: flex;
+          flex-direction: column;
         }
 
         .members-title {