enroll team polish?

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

@@ -1,27 +1,21 @@
-import { useMemo } from "react";
+import { Suspense, useCallback, useMemo } from "react";
 import { Tournament } from "../../types";
 import { useAuth } from "@/contexts/auth-context";
-import {
-  Box,
-  Card,
-  Divider,
-  Group,
-  Stack,
-  Text,
-} from "@mantine/core";
+import { Box, Button, Card, Divider, Group, Stack, Text } from "@mantine/core";
 import Countdown from "@/components/countdown";
 import ListLink from "@/components/list-link";
 import ListButton from "@/components/list-button";
-import {
-  UsersIcon,
-  ListIcon,
-} from "@phosphor-icons/react";
+import { UsersIcon, ListIcon } from "@phosphor-icons/react";
 import EnrollTeam from "./enroll-team";
 import EnrollFreeAgent from "./enroll-free-agent";
 import TeamListButton from "./team-list-button";
 import Header from "./header";
-import EmojiPicker from "@/features/reactions/components/emoji-picker";
-import EmojiBar from "@/features/reactions/components/emoji-bar";
+import TeamCardSkeleton from "@/features/teams/components/team-card-skeleton";
+import TeamCard from "@/features/teams/components/team-card";
+import UpdateTeam from "./update-team";
+import UnenrollTeam from "./unenroll-team";
+import { useQueryClient } from "@tanstack/react-query";
+import { tournamentKeys } from "../../queries";
 
 const UpcomingTournament: React.FC<{ tournament: Tournament }> = ({
   tournament,
@@ -43,18 +37,21 @@ const UpcomingTournament: React.FC<{ tournament: Tournament }> = ({
     : new Date(tournament.start_time);
   const isEnrollmentOpen = enrollmentDeadline > new Date();
 
+  const queryClient = useQueryClient();
+  const handleSubmit = () => {
+    queryClient.invalidateQueries({ queryKey: tournamentKeys.current })
+  }
+
+  console.log(userTeam)
+
   return (
     <Stack gap="lg">
-      
       <Header tournament={tournament} />
-
-      <EmojiBar />
-
       {tournament.desc && <Text size="sm">{tournament.desc}</Text>}
 
-      <Card withBorder radius="md" p="lg">
+      <Card withBorder radius="lg" p="lg">
         <Stack gap="xs">
-          <Group mb='sm' gap="xs" align="center">
+          <Group mb="sm" gap="xs" align="center">
             <UsersIcon size={16} />
             <Text size="sm" fw={500}>
               Enrollment
@@ -70,17 +67,29 @@ const UpcomingTournament: React.FC<{ tournament: Tournament }> = ({
             )}
           </Group>
 
-          {!isEnrollmentOpen && !isUserEnrolled && (
-            <Text fw={600} c="dimmed" size="sm">Enrollment has been closed for this tournament.</Text>
+          {!isUserEnrolled &&!isEnrollmentOpen && (
+            <Text fw={600} c="dimmed" size="sm">
+              Enrollment has been closed for this tournament.
+            </Text>
           )}
 
-          {!isUserEnrolled && isEnrollmentOpen && (
+          {!isUserEnrolled &&isEnrollmentOpen && (
             <>
-              <EnrollTeam tournamentId={tournament.id} />
+              <EnrollTeam tournamentId={tournament.id} onSubmit={handleSubmit} />
               <Divider my={0} label="or" />
               <EnrollFreeAgent />
             </>
           )}
+
+          {
+            isUserEnrolled && <>
+              <Suspense fallback={<TeamCardSkeleton />}>
+                <TeamCard teamId={userTeam.id} />
+              </Suspense>
+              <UpdateTeam tournamentId={tournament.id} teamId={userTeam.id} />
+              { isEnrollmentOpen && <UnenrollTeam tournamentId={tournament.id} teamId={userTeam.id} onSubmit={handleSubmit} />}
+            </>
+          }
         </Stack>
       </Card>