Fixed join team issue

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

@@ -5,6 +5,9 @@ import { useRouter } from "next/navigation";
 import Link from "next/link";
 import { use } from "react"; // Add this import for React.use()
 import NavBar from "@/components/NavBar";
+import { getHuntTimer } from "@/utils/timerService";
+// Remove the CSS module import
+// import styles from "./teamId.module.css";
 
 export default function TeamPage({ params }) {
   const { status, data: session } = useSession();
@@ -13,6 +16,7 @@ export default function TeamPage({ params }) {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState("");
   const [huntActive, setHuntActive] = useState(false);
+  const [huntInProgress, setHuntInProgress] = useState(false);
   const router = useRouter();
 
   // Unwrap the params Promise using React.use()
@@ -133,6 +137,13 @@ export default function TeamPage({ params }) {
     }
   }, [teamId, status, fetchTeamData, router]);
 
+  // Check if hunt is already in progress on component mount
+  useEffect(() => {
+    // Get timer data and check if a hunt has already been started
+    const timerData = getHuntTimer();
+    setHuntInProgress(timerData && timerData.startTime);
+  }, []);
+
   if (status === "loading" || loading) {
     return (
       <div className="loading-container">
@@ -166,8 +177,13 @@ export default function TeamPage({ params }) {
     );
   }
 
+  const handleStartHunt = () => {
+    router.push("/map");
+  };
+
   return (
     <div className="team-page">
+      {/* Changed from styles.container to team-page */}
       <div className="team-banner">
         <div className="team-info">
           <h1 className="team-name">Team Name: {team.name}</h1>
@@ -235,45 +251,12 @@ export default function TeamPage({ params }) {
         </button>
 
         {/* New Start Hunt button with conditional behavior */}
-        {session?.user?.role !== "admin" && (
-          <button
-            className="action-button start-button"
-            onClick={async () => {
-              try {
-                setLoading(true);
-
-                // Use the dedicated start hunt API endpoint
-                const response = await fetch("/api/hunt/start", {
-                  method: "POST",
-                  headers: {
-                    "Content-Type": "application/json",
-                    "Cache-Control": "no-cache, no-store, must-revalidate",
-                  },
-                  credentials: "include",
-                });
-
-                const data = await response.json();
-
-                if (data.success && data.active) {
-                  // Redirect to map page using window.location for a clean reload
-                  window.location.href = data.redirectUrl || "/map";
-                } else if (!data.active) {
-                  // Hunt is not active
-                  router.push(`/hunt-not-started?teamId=${teamId}`);
-                } else {
-                  // Some other error
-                  throw new Error(data.error || "Failed to start hunt journey");
-                }
-              } catch (err) {
-                console.error("Error starting hunt:", err);
-                setError(`Failed to start hunt: ${err.message}`);
-                setLoading(false);
-              }
-            }}
-          >
-            Start Hunt
-          </button>
-        )}
+        <button
+          className="action-button start-button"
+          onClick={handleStartHunt}
+        >
+          {huntInProgress ? "Continue Hunt" : "Start Hunt"}
+        </button>
       </div>
 
       {/* Replace the outdated navbar with the correct one */}

app/(main)/[teamId]/teamId.module.css

@@ -0,0 +1,14 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  background-color: #f4f4f4;
+  font-family: Arial, sans-serif;
+  position: relative;
+  overflow-x: hidden;
+  width: 100%;
+  padding-bottom: 70px;
+}
+
+/* Note: Most styles are defined inline in the component, 
+   but we're creating this file to fix the build error */

app/(main)/map/page.js

@@ -375,11 +375,11 @@ export default function MapPage() {
                     )
                   }
                   style={{
-                    left: "230px", // Moved from 150px to 160px (10px right)
-                    top: "212px", // Moved from 200px to 203px (3px down)
+                    left: "230px",
+                    top: "212px",
                   }}
                 >
-                  Clue {firstClue.id}
+                  {/* Clue {firstClue.id} */}
                 </button>
               )}
 
@@ -394,11 +394,12 @@ export default function MapPage() {
                     )
                   }
                   style={{
-                    left: "320px", // 168px + 50px = 218px
-                    top: "290px", // 208px + 30px = 238px
+                    left: "320px",
+                    top: "285px",
                   }}
                 >
-                  Clue {clues[1].id}
+                  {/* Clue {clues[1].id} */}
+                  {/* If clues are to be named uncomment the line above */}
                 </button>
               )}
 
@@ -413,11 +414,11 @@ export default function MapPage() {
                     )
                   }
                   style={{
-                    left: "265px", // 168px + 50px = 218px
-                    top: "400px", // 208px + 30px = 238px
+                    left: "265px",
+                    top: "400px",
                   }}
                 >
-                  Clue {clues[2].id}
+                  {/* Clue {clues[2].id} */}
                 </button>
               )}
 

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

@@ -1,11 +1,11 @@
 "use client";
 import { useState, useEffect } from "react";
-import { useSession } from "next-auth/react";
+import { useSession, signOut } from "next-auth/react";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
 
 export default function TeamSelection() {
-  const { data: session, status } = useSession();
+  const { data: session, status, update: updateSession } = useSession();
   const [teamCode, setTeamCode] = useState("");
   const [error, setError] = useState("");
   const [isLoading, setIsLoading] = useState(true);
@@ -53,28 +53,110 @@ export default function TeamSelection() {
     setIsLoading(true);
     setError("");
 
+    // Validate team code before submitting
+    if (!teamCode || teamCode.trim() === "") {
+      setError("Please enter a team code");
+      setIsLoading(false);
+      return;
+    }
+
+    // Clean the team code of any whitespace
+    const cleanedTeamCode = teamCode.trim().toUpperCase();
+    console.log("Joining team with code:", cleanedTeamCode);
+
     try {
-      const response = await fetch("/api/join-team", {
+      // First check if we have a valid session
+      if (status !== "authenticated" || !session?.user) {
+        console.log("Session not authenticated, refreshing session...");
+        await updateSession();
+
+        // If still not authenticated after refresh, redirect to login
+        if (status !== "authenticated") {
+          throw new Error(
+            "Your session appears to be invalid. Please log in again."
+          );
+        }
+      }
+
+      // Now attempt to join the team
+      const response = await fetch("/api/teams/join", {
         method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ teamCode }),
+        headers: {
+          "Content-Type": "application/json",
+          "Cache-Control": "no-cache, no-store, must-revalidate",
+        },
+        body: JSON.stringify({ teamCode: cleanedTeamCode }),
+        credentials: "include",
       });
 
-      const data = await response.json();
+      // Improved error handling for response
+      let data;
+      try {
+        // First try to parse as JSON
+        const contentType = response.headers.get("content-type");
+        if (contentType && contentType.includes("application/json")) {
+          data = await response.json();
+        } else {
+          // If not JSON, get as text
+          const text = await response.text();
+          console.log("Non-JSON response:", text);
+          throw new Error(
+            `Unexpected response format: ${text.substring(0, 100)}...`
+          );
+        }
+      } catch (parseError) {
+        console.error("Error parsing response:", parseError);
+        throw new Error(
+          "Failed to parse server response: " + parseError.message
+        );
+      }
 
+      // Now check if the response was successful
       if (!response.ok) {
-        throw new Error(data.error || "Failed to join team");
+        console.error("Join team failed:", data);
+        throw new Error(
+          data.error || `Failed to join team (Status: ${response.status})`
+        );
       }
 
       // Add validation before constructing the URL
       if (!data.teamId || isNaN(parseInt(data.teamId))) {
-        throw new Error("Invalid team ID received");
+        throw new Error("Invalid team ID received from server");
       }
 
-      // Navigate to the team page using the correct URL format
-      window.location.href = `/${data.teamId}`;
+      console.log("Join team successful:", data);
+
+      // Update the session with new team info
+      if (data.token) {
+        try {
+          await updateSession();
+          console.log("Session updated successfully");
+        } catch (sessionErr) {
+          console.warn("Session update failed:", sessionErr);
+        }
+      }
+
+      // Navigate to the team page
+      router.push(`/${data.teamId}`);
     } catch (err) {
-      setError(err.message);
+      console.error("Join team error:", err);
+
+      // If it's an "Invalid session" error, suggest reauthentication
+      if (
+        err.message.includes("session") ||
+        err.message.includes("unauthorized") ||
+        err.message.includes("Unauthorized")
+      ) {
+        setError("Your session has expired. Please log in again.");
+        // Attempt to sign out and redirect to login
+        await signOut({ redirect: false });
+        setTimeout(() => {
+          router.push("/login?error=session_expired");
+        }, 2000);
+      } else {
+        setError(err.message);
+      }
+
       setIsLoading(false);
     }
   };
@@ -100,7 +182,7 @@ export default function TeamSelection() {
                 type="text"
                 placeholder="Team Code"
                 value={teamCode}
-                onChange={(e) => setTeamCode(e.target.value)}
+                onChange={(e) => setTeamCode(e.target.value.toUpperCase())}
                 required
                 className="auth-input"
               />
@@ -118,8 +200,6 @@ export default function TeamSelection() {
         </div>
       </div>
 
-      {/* Navbar removed from here */}
-
       <style jsx>{`
         .auth-page {
           display: flex;
@@ -154,6 +234,7 @@ export default function TeamSelection() {
           padding: 10px;
           border: 1px solid #ccc;
           border-radius: 4px;
+          text-transform: uppercase;
         }
         .auth-button {
           width: 100%;
@@ -170,7 +251,6 @@ export default function TeamSelection() {
           color: red;
           margin-top: 10px;
         }
-        /* Navbar styles removed from here */
       `}</style>
     </div>
   );