enroll team polish?

src/features/tournaments/components/upcoming-tournament/update-team.tsx

@@ -0,0 +1,59 @@
+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, useEffect } from "react";
+import TeamSelectionView from "./enroll-team/team-selection-view";
+import TeamForm from "@/features/teams/components/team-form";
+import { teamQueries, useTeam } from "@/features/teams/queries";
+import { Team } from "@/features/teams/types";
+import { useQuery } from "@tanstack/react-query";
+import { Loader } from "@mantine/core";
+import useEnrollTeam from "@/features/tournaments/hooks/use-enroll-team";
+
+interface UpdateTeamProps {
+  tournamentId: string;
+  teamId: string
+}
+
+const UpdateTeam = ({ tournamentId, teamId }: UpdateTeamProps) => {
+  const { open, isOpen, toggle } = useSheet();
+
+  const { data: team } = useTeam(teamId);
+
+  const initialValues = useMemo(() => {
+    if (!team) return undefined;
+
+    return {
+      name: team.name,
+      song_id: team.song_id,
+      song_name: team.song_name,
+      song_artist: team.song_artist,
+      song_album: team.song_album,
+      song_start: team.song_start,
+      song_end: team.song_end,
+      song_image_url: team.song_image_url,
+      players: team.players?.map(player => player.id),
+    };
+  }, [team]);
+
+  return (
+    <>
+      <Button size="sm" onClick={open}>
+        Update Team
+      </Button>
+
+      <Sheet title={"Update Team"} opened={isOpen} onChange={toggle}>
+        <TeamForm
+          close={toggle}
+          tournamentId={tournamentId}
+          initialValues={initialValues}
+          teamId={teamId}
+          onSubmit={(_) => close()}
+        />
+      </Sheet>
+    </>
+  );
+};
+
+export default UpdateTeam;