working team update/create (still need enroll)

src/features/tournaments/components/upcoming-tournament/enroll-team/index.tsx

@@ -2,9 +2,12 @@ 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 { useMemo, useState, useCallback, useEffect } from "react";
 import TeamSelectionView from "./team-selection-view";
 import TeamForm from "@/features/teams/components/team-form";
+import { teamQueries } from "@/features/teams/queries";
+import { Team } from "@/features/teams/types";
+import { useQuery } from "@tanstack/react-query";
 
 interface EnrollTeamProps {
   tournamentId: string;
@@ -13,12 +16,25 @@ interface EnrollTeamProps {
 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 [showTeamForm, setShowTeamForm] = useState<boolean>(!hasTeams);
+  const [selectedTeam, setSelectedTeam] = useState<Team | null>(null);
 
-  const teamOptions = useMemo(() => 
+  const { data: teamData } = useQuery({
+    ...teamQueries.details(selectedTeamId!),
+    enabled: !!selectedTeamId,
+  });
+
+  useEffect(() => {
+    if (teamData?.success) {
+      setSelectedTeam(teamData.data);
+      setShowTeamForm(true);
+    }
+  }, [teamData]);
+
+  const teamOptions = useMemo(() =>
     user?.teams?.map(team => ({
       value: team.id,
       label: team.name
@@ -26,11 +42,34 @@ const EnrollTeam = ({ tournamentId }: EnrollTeamProps) => {
     [user?.teams]
   );
 
-  const handleSelect = useCallback((teamId: string | undefined) => {
-    setSelectedTeamId(teamId);
-    setShowTeamForm(true);
+  const handleBack = useCallback(() => {
+    setSelectedTeamId(undefined);
+    setSelectedTeam(null);
+    setShowTeamForm(false);
   }, []);
 
+  const handleSelect = useCallback((teamId: string | undefined) => {
+    setSelectedTeamId(teamId);
+    if (!teamId) {
+      setShowTeamForm(true);
+    }
+  }, []);
+
+  const initialValues = useMemo(() => {
+    if (!selectedTeam) return undefined;
+
+    return {
+      name: selectedTeam.name,
+      song_id: selectedTeam.song_id,
+      song_name: selectedTeam.song_name,
+      song_artist: selectedTeam.song_artist,
+      song_album: selectedTeam.song_album,
+      song_start: selectedTeam.song_start,
+      song_end: selectedTeam.song_end,
+      song_image_url: selectedTeam.song_image_url,
+      players: selectedTeam.players.map(player => player.id),
+    };
+  }, [selectedTeam]);
 
   return (
     <>
@@ -38,9 +77,14 @@ const EnrollTeam = ({ tournamentId }: EnrollTeamProps) => {
         Enroll Your Team
       </Button>
 
-      <Sheet title={showTeamForm ? "Team Details" : "Enroll Team"} opened={!isOpen} onChange={toggle}>
+      <Sheet title={showTeamForm ? "Team Details" : "Enroll Team"} opened={isOpen} onChange={toggle}>
         {showTeamForm ? (
-          <TeamForm close={console.log} tournamentId={tournamentId} />
+          <TeamForm
+            close={handleBack}
+            tournamentId={tournamentId}
+            initialValues={initialValues}
+            teamId={selectedTeamId}
+          />
         ) : (
           <>
             <TeamSelectionView

src/features/tournaments/components/upcoming-tournament/enroll-team/team-selection-view.tsx

@@ -11,9 +11,8 @@ const TeamSelectionView: React.FC<TeamSelectionViewProps> = React.memo(({
   options,
   onSelect
 }) => {
-  const [value, setValue] = useState<string>();
-  const selectedOption = useMemo(() => options.find(option => option.label === value), [value])
-
+  const [value, setValue] = useState<string>('');
+  const selectedOption = useMemo(() => options.find(option => option.label === value), [value, options])
 
   const handleCreateNewTeamClicked = () => onSelect(undefined);
   const handleSelectExistingTeam = () => onSelect(selectedOption?.value)
@@ -28,19 +27,19 @@ const TeamSelectionView: React.FC<TeamSelectionViewProps> = React.memo(({
       >
         Create New Team
       </Button>
-      
+
       <Divider my="sm" label="or" />
-      
+
       <Stack gap="sm">
         <Autocomplete
           placeholder="Select one of your existing teams"
-          value={selectedOption?.label || ''}
+          value={value}
           onChange={setValue}
           data={options.map(option => option.label)}
           comboboxProps={{ withinPortal: false }}
         />
-        
-        <Button 
+
+        <Button
           onClick={handleSelectExistingTeam}
           disabled={!selectedOption}
           fullWidth