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 */