fixed a bit

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

@@ -1,41 +1,26 @@
-"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";
 import Link from "next/link";
-import { joinTeam } from "../../actions/auth";
-
-// Add CSS to fix the navbar at the bottom
-const styles = {
-  navbar: {
-    position: "fixed",
-    bottom: 0,
-    width: "100%",
-    backgroundColor: "#fff",
-    borderTop: "1px solid #ccc",
-    padding: "10px 0",
-    textAlign: "center",
-  },
-};
 
 export default function TeamSelection() {
   const { data: session, status } = useSession();
   const [teamCode, setTeamCode] = useState("");
   const [error, setError] = useState("");
-  const [isLoading, setIsLoading] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
   const router = useRouter();
 
-  // Use useEffect for navigation instead of doing it in render
   useEffect(() => {
-    // Redirect if not authenticated
-    if (status === "unauthenticated") {
+    if (status === "authenticated") {
+      if (session.user.teamId) {
+        router.push(`/team/${session.user.teamId}`);
+      } else {
+        setIsLoading(false);
+      }
+    } else if (status === "unauthenticated") {
       router.push("/login");
     }
-
-    // Redirect if user is admin
-    if (status === "authenticated" && session?.user?.role === "admin") {
-      router.push("/admin");
-    }
   }, [status, session, router]);
 
   const handleJoinTeam = async (e) => {
@@ -44,33 +29,29 @@ export default function TeamSelection() {
     setError("");
 
     try {
-      const result = await joinTeam(session.user.id, teamCode);
+      const response = await fetch("/api/join-team", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ teamCode }),
+      });
 
-      if (result.success) {
-        router.push(`/team/${result.teamId}`);
-      } else {
-        setError(result.error || "Team not found");
+      const data = await response.json();
+
+      if (!response.ok) {
+        throw new Error(data.error || "Failed to join team");
       }
+
+      router.push(`/team/${data.teamId}`);
     } catch (err) {
-      setError("An unexpected error occurred");
-      console.error(err);
-    } finally {
+      setError(err.message);
       setIsLoading(false);
     }
   };
 
-  if (status === "loading") {
+  if (isLoading) {
     return <div className="loading">Loading...</div>;
   }
 
-  // Don't render anything if redirecting
-  if (
-    status === "unauthenticated" ||
-    (status === "authenticated" && session?.user?.role === "admin")
-  ) {
-    return null;
-  }
-
   return (
     <div className="auth-page">
       <div className="page-header">
@@ -81,7 +62,7 @@ export default function TeamSelection() {
 
       <div className="auth-container">
         <div className="auth-card">
-          <h1>Team Selection</h1>
+          <h1>Join a Team</h1>
           <form onSubmit={handleJoinTeam}>
             <div className="form-group">
               <input
@@ -106,7 +87,7 @@ export default function TeamSelection() {
         </div>
       </div>
 
-      <div className="nav-bar" style={styles.navbar}>
+      <div className="nav-bar">
         <div className="nav-item">
           <div className="nav-icon">🏠</div>
         </div>