enroll team polish?

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

@@ -8,12 +8,16 @@ 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";
+import { Loader } from "@mantine/core";
+import useEnrollTeam from "@/features/tournaments/hooks/use-enroll-team";
+import { useServerQuery } from "@/lib/tanstack-query/hooks";
 
 interface EnrollTeamProps {
   tournamentId: string;
+  onSubmit: () => void;
 }
 
-const EnrollTeam = ({ tournamentId }: EnrollTeamProps) => {
+const EnrollTeam = ({ tournamentId, onSubmit }: EnrollTeamProps) => {
   const { open, isOpen, toggle } = useSheet();
   const { user } = useAuth();
 
@@ -22,14 +26,14 @@ const EnrollTeam = ({ tournamentId }: EnrollTeamProps) => {
   const [showTeamForm, setShowTeamForm] = useState<boolean>(!hasTeams);
   const [selectedTeam, setSelectedTeam] = useState<Team | null>(null);
 
-  const { data: teamData } = useQuery({
+  const { data: teamData } = useServerQuery({
     ...teamQueries.details(selectedTeamId!),
-    enabled: !!selectedTeamId,
+    options: { enabled: !!selectedTeamId }
   });
 
   useEffect(() => {
-    if (teamData?.success) {
-      setSelectedTeam(teamData.data);
+    if (teamData) {
+      setSelectedTeam(teamData);
       setShowTeamForm(true);
     }
   }, [teamData]);
@@ -71,6 +75,16 @@ const EnrollTeam = ({ tournamentId }: EnrollTeamProps) => {
     };
   }, [selectedTeam]);
 
+  const { mutate: enrollTeam, isPending: isEnrolling } = useEnrollTeam();
+  const handleEnrollTeam = (teamId: string) => {
+    enrollTeam({ tournamentId, teamId }, {
+      onSuccess: () => {
+        toggle();
+        onSubmit();
+      }
+    });
+  }
+
   return (
     <>
       <Button size="sm" onClick={open}>
@@ -78,12 +92,14 @@ const EnrollTeam = ({ tournamentId }: EnrollTeamProps) => {
       </Button>
 
       <Sheet title={showTeamForm ? "Team Details" : "Enroll Team"} opened={isOpen} onChange={toggle}>
-        {showTeamForm ? (
+        { isEnrolling && <Loader size="lg" /> }
+        {showTeamForm && !isEnrolling ? (
           <TeamForm
             close={handleBack}
             tournamentId={tournamentId}
             initialValues={initialValues}
             teamId={selectedTeamId}
+            onSubmit={handleEnrollTeam}
           />
         ) : (
           <>