work on team enrollment

2025-09-16 09:24:21 -05:00
parent 9a105b30c6
commit cde74a04d5
45 changed files with 1244 additions and 457 deletions
@@ -0,0 +1,61 @@
+import Button from "@/components/button";
+import Sheet from "@/components/sheet/sheet";
+import { useAuth } from "@/contexts/auth-context";
+import { useSheet } from "@/hooks/use-sheet";
+import { useMemo, useState, useCallback } from "react";
+import TeamSelectionView from "./team-selection-view";
+import TeamForm from "@/features/teams/components/team-form";
+
+interface EnrollTeamProps {
+  tournamentId: string;
+}
+
+const EnrollTeam = ({ tournamentId }: EnrollTeamProps) => {
+  const { open, isOpen, toggle } = useSheet();
+  const { user } = useAuth();
+  
+  const hasTeams = useMemo(() => !!user?.teams?.length, [user?.teams]);
+  const [selectedTeamId, setSelectedTeamId] = useState<string>();
+  const [showTeamForm, setShowTeamForm] = useState<boolean>(!!hasTeams);
+
+  const teamOptions = useMemo(() => 
+    user?.teams?.map(team => ({
+      value: team.id,
+      label: team.name
+    })) || [],
+    [user?.teams]
+  );
+
+  const handleSelect = useCallback((teamId: string | undefined) => {
+    setSelectedTeamId(teamId);
+    setShowTeamForm(true);
+  }, []);
+
+
+  return (
+    <>
+      <Button size="sm" onClick={open}>
+        Enroll Your Team
+      </Button>
+
+      <Sheet title={showTeamForm ? "Team Details" : "Enroll Team"} opened={!isOpen} onChange={toggle}>
+        {showTeamForm ? (
+          <TeamForm close={console.log} tournamentId={tournamentId} />
+        ) : (
+          <>
+            <TeamSelectionView
+              options={teamOptions}
+              onSelect={handleSelect}
+            />
+            <Button mt='sm' variant="subtle" color='red' size="sm" onClick={toggle}>
+              Cancel
+            </Button>
+          </>
+        )}
+        
+      </Sheet>
+    </>
+  );
+};
+
+export default EnrollTeam;