free agents

src/features/tournaments/components/upcoming-tournament/enroll-free-agent.tsx

@@ -2,11 +2,23 @@ import Button from "@/components/button";
 import Sheet from "@/components/sheet/sheet";
 import { useAuth } from "@/contexts/auth-context";
 import { useSheet } from "@/hooks/use-sheet";
-import { Text } from "@mantine/core";
+import { Stack, Text } from "@mantine/core";
+import useEnrollFreeAgent from "../../hooks/use-enroll-free-agent";
 
-const EnrollFreeAgent = () => {
+const EnrollFreeAgent = ({ tournamentId }: {tournamentId: string} ) => {
   const { open, isOpen, toggle } = useSheet();
-  const { user } = useAuth();
+  const { user, phone } = useAuth();
+
+  const { mutate: enrollFreeAgent, isPending: isEnrolling } = useEnrollFreeAgent();
+  const handleEnroll = () => {
+    console.log('enrolling...')
+    enrollFreeAgent({ playerId: user!.id, tournamentId, phone }, {
+      onSuccess: () => {
+        toggle();
+      }
+    });
+  }
+
   return (
     <>
       <Button variant="subtle" size="sm" onClick={open}>
@@ -14,13 +26,19 @@ const EnrollFreeAgent = () => {
       </Button>
 
       <Sheet title="Free Agent Enrollment" opened={isOpen} onChange={toggle}>
-        <Text size="md" mb="md">
-          Enrolling as a free agent will enter you in a pool of players wanting to play but don't have a teammate yet.
-        </Text>
-        <Text size="sm" mb="md" c='dimmed'>
-          You will be automatically paired with a partner before the tournament starts, and you will be able to see your new team and set a walkout song in the app.
-        </Text>
-        <Button onClick={console.log}>Confirm</Button>
+        <Stack gap="xs">
+          <Text size="md">
+            Enrolling as a free agent will enter you in a pool of players wanting to play but don't have a teammate yet.
+          </Text>
+          <Text size="sm" c='dimmed'>
+            You will be able to see a list of other enrolled free agents, as well as their contact information for organizing your team and walkout song. By enrolling, your phone number will be visible to other free agents. 
+          </Text>
+          <Text size="xs" c="dimmed">
+            Note: this does not guarantee you a spot in the tournament. One person from your team must enroll in the app and choose a walkout song in order to secure a spot.
+          </Text>
+          <Button onClick={handleEnroll}>Confirm</Button>
+          <Button variant="subtle" color="red" onClick={toggle}>Cancel</Button>
+        </Stack>
       </Sheet>
     </>
   );

src/features/tournaments/components/upcoming-tournament/enrolled-free-agent.tsx

@@ -0,0 +1,95 @@
+import { Group, Stack, Text, Card, Badge, Box, ActionIcon } from "@mantine/core";
+import { UserIcon, PhoneIcon } from "@phosphor-icons/react";
+import { useFreeAgents } from "../../queries";
+import UnenrollFreeAgent from "./unenroll-free-agent";
+import toast from "@/lib/sonner";
+
+const EnrolledFreeAgent: React.FC<{ tournamentId: string }> = ({
+  tournamentId
+}) => {
+  const { data: freeAgents } = useFreeAgents(tournamentId);
+
+  const copyToClipboard = async (phone: string) => {
+    try {
+      await navigator.clipboard.writeText(phone);
+      toast.success("Phone number copied!");
+    } catch (err) {
+      toast.success("Failed to copy");
+    }
+  };
+
+  return (
+    <Stack gap="md">
+      <Group justify="space-between" align="center">
+        <Group gap="xs" align="center">
+          <UserIcon size={16} />
+          <Text size="sm" fw={500}>
+            Enrolled as Free Agent
+          </Text>
+        </Group>
+      </Group>
+
+      <Text size="xs" c="dimmed">
+        You're on the free agent list. Other free agents looking for teams:
+      </Text>
+
+      {freeAgents.length > 1 ? (
+        <Card withBorder radius="md" p="sm">
+          <Stack gap="xs">
+            {freeAgents
+              .filter(agent => agent.player)
+              .map((agent) => (
+                <Group key={agent.id} justify="space-between" align="center" wrap="nowrap">
+                  <Box style={{ flex: 1, minWidth: 0 }}>
+                    <Text size="sm" fw={500} truncate>
+                      {agent.player?.first_name} {agent.player?.last_name}
+                    </Text>
+                  </Box>
+                  {agent.phone && (
+                    <Group gap={4} align="center" style={{ flexShrink: 0 }}>
+                      <ActionIcon
+                        variant="subtle"
+                        size="sm"
+                        onClick={() => copyToClipboard(agent.phone!)}
+                        style={{ cursor: 'pointer' }}
+                      >
+                        <PhoneIcon size={12} />
+                      </ActionIcon>
+                      <Text
+                        size="xs"
+                        c="dimmed"
+                        style={{ cursor: 'pointer' }}
+                        onClick={() => copyToClipboard(agent.phone!)}
+                      >
+                        {agent.phone}
+                      </Text>
+                    </Group>
+                  )}
+                </Group>
+              ))}
+
+            {freeAgents.length > 1 && (
+              <Badge
+                variant="light"
+                size="xs"
+                color="blue"
+                style={{ alignSelf: 'flex-start', marginTop: '4px' }}
+              >
+                {freeAgents.length} free agents total
+              </Badge>
+            )}
+          </Stack>
+        </Card>
+      ) : (
+        <Card withBorder radius="md" p="sm">
+          <Text size="sm" c="dimmed" ta="center">
+            You're the only free agent so far
+          </Text>
+        </Card>
+      )}
+      <UnenrollFreeAgent tournamentId={tournamentId} />
+    </Stack>
+  );
+};
+
+export default EnrolledFreeAgent;

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

@@ -14,10 +14,6 @@ const Header = ({ tournament }: { tournament: Tournament }) => {
     () => new Date(tournament.start_time),
     [tournament.start_time]
   );
-  const teamCount = useMemo(
-    () => tournament.teams?.length || 0,
-    [tournament.teams]
-  );
 
   return (
     <Stack align="center" gap={0}>

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

@@ -15,8 +15,9 @@ 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";
+import { tournamentKeys, useFreeAgents } from "../../queries";
 import RulesListButton from "./rules-list-button";
+import EnrolledFreeAgent from "./enrolled-free-agent";
 
 const UpcomingTournament: React.FC<{ tournament: Tournament }> = ({
   tournament,
@@ -40,57 +41,79 @@ const UpcomingTournament: React.FC<{ tournament: Tournament }> = ({
 
   const queryClient = useQueryClient();
   const handleSubmit = () => {
-    queryClient.invalidateQueries({ queryKey: tournamentKeys.current })
-  }
+    queryClient.invalidateQueries({ queryKey: tournamentKeys.current });
+  };
+
+  const { data: free_agents } = useFreeAgents(tournament.id);
+  const isFreeAgent = useMemo(() => !isUserEnrolled && free_agents.find(a => a.player?.id === user?.id), [free_agents, isUserEnrolled]);
 
   return (
     <Stack gap="lg">
       <Header tournament={tournament} />
-      {tournament.desc && <Text size="sm">{tournament.desc}</Text>}
 
-      <Card withBorder radius="lg" p="lg">
-        <Stack gap="xs">
-          <Group mb="sm" gap="xs" align="center">
-            <UsersIcon size={16} />
-            <Text size="sm" fw={500}>
-              Enrollment
-            </Text>
-            {isEnrollmentOpen && (
-              <Box ml="auto">
-                <Countdown
-                  date={enrollmentDeadline}
-                  label="Time left"
-                  color="yellow"
-                />
-              </Box>
+      <Stack px="md">
+        {tournament.desc && <Text size="sm">{tournament.desc}</Text>}
+
+        <Card withBorder radius="lg" p="lg">
+          <Stack gap="xs">
+            <Group mb="sm" gap="xs" align="center">
+              <UsersIcon size={16} />
+              <Text size="sm" fw={500}>
+                Enrollment
+              </Text>
+              {isEnrollmentOpen && (
+                <Box ml="auto">
+                  <Countdown
+                    date={enrollmentDeadline}
+                    label="Time left"
+                    color="yellow"
+                  />
+                </Box>
+              )}
+            </Group>
+
+            {!isUserEnrolled && !isEnrollmentOpen && (
+              <Text fw={600} c="dimmed" size="sm">
+                Enrollment has been closed for this tournament.
+              </Text>
             )}
-          </Group>
 
-          {!isUserEnrolled &&!isEnrollmentOpen && (
-            <Text fw={600} c="dimmed" size="sm">
-              Enrollment has been closed for this tournament.
-            </Text>
-          )}
+            {!isUserEnrolled && isEnrollmentOpen && !isFreeAgent && (
+              <>
+                <EnrollTeam
+                  tournamentId={tournament.id}
+                  onSubmit={handleSubmit}
+                />
+                <Divider my={0} label="or" />
+                <EnrollFreeAgent tournamentId={tournament.id} />
+              </>
+            )}
 
-          {!isUserEnrolled &&isEnrollmentOpen && (
-            <>
-              <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}
+                  />
+                )}
+              </>
+            )}
 
-          {
-            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>
+            {
+              isFreeAgent && isEnrollmentOpen && (
+                <EnrolledFreeAgent tournamentId={tournament.id} />
+              )
+            }
+
+          </Stack>
+        </Card>
+      </Stack>
 
       <Box>
         <Divider />
@@ -102,10 +125,10 @@ const UpcomingTournament: React.FC<{ tournament: Tournament }> = ({
           />
         )}
         <ListLink
-            label={`View Bracket`}
-            to={`/tournaments/${tournament.id}/bracket`}
-            Icon={TreeStructureIcon}
-          />
+          label={`View Bracket`}
+          to={`/tournaments/${tournament.id}/bracket`}
+          Icon={TreeStructureIcon}
+        />
         <RulesListButton tournamentId={tournament.id} />
         <TeamListButton teams={tournament.teams || []} />
       </Box>

src/features/tournaments/components/upcoming-tournament/rules-list-button.tsx

@@ -20,6 +20,7 @@ const RulesListButton: React.FC<RulesListButtonProps> = ({ tournamentId }) => {
     extensions: [StarterKit],
     content: tournament?.rules || '',
     editable: false,
+    immediatelyRender: false,
   });
 
   return (

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

@@ -0,0 +1,42 @@
+import { Box, Card, Divider, Flex, Group, Skeleton, Stack } from "@mantine/core";
+
+const UpcomingTournamentSkeleton = () => {
+  return (
+    <Stack gap="lg">
+      <Flex px="md" justify="center" w="100%">
+        <Skeleton height={240} width={240} radius="md" />
+        <Stack justify="space-between" align="flex-start">
+          <Box style={{ flex: 1 }}>
+            <Skeleton height={32}  mb="xs" />
+            <Skeleton height={16} />
+          </Box>
+        </Stack>
+      </Flex>
+
+      <Stack px="md">
+        <Skeleton height={14} width="80%" />
+
+        <Card withBorder radius="lg" p="lg">
+          <Group mb="sm" gap="xs" align="center">
+            <Skeleton height={16} width={16} />
+            <Skeleton height={14} width="20%" />
+            <Box ml="auto">
+              <Skeleton height={20} width={80} radius="sm" />
+            </Box>
+          </Group>
+        </Card>
+      </Stack>
+
+      <Box>
+        <Divider />
+        <Stack gap={0}>
+          <Skeleton height={48} width="100%" />
+          <Skeleton height={48} width="100%" />
+          <Skeleton height={48} width="100%" />
+        </Stack>
+      </Box>
+    </Stack>
+  );
+};
+
+export default UpcomingTournamentSkeleton;

src/features/tournaments/components/upcoming-tournament/unenroll-free-agent.tsx

@@ -0,0 +1,40 @@
+import Button from "@/components/button";
+import Sheet from "@/components/sheet/sheet";
+import { useAuth } from "@/contexts/auth-context";
+import { useSheet } from "@/hooks/use-sheet";
+import { Stack, Text } from "@mantine/core";
+import useUnenrollFreeAgent from "../../hooks/use-unenroll-free-agent";
+
+const UnenrollFreeAgent = ({ tournamentId }: {tournamentId: string} ) => {
+  const { open, isOpen, toggle } = useSheet();
+  const { user } = useAuth();
+
+  const { mutate: unenrollFreeAgent, isPending: isEnrolling } = useUnenrollFreeAgent();
+  const handleUnenroll = () => {
+    unenrollFreeAgent({ playerId: user!.id, tournamentId }, {
+      onSuccess: () => {
+        toggle();
+      }
+    });
+  }
+
+  return (
+    <>
+      <Button variant="subtle" size="sm" onClick={open}>
+        Unenroll
+      </Button>
+
+      <Sheet title="Are you sure?" opened={isOpen} onChange={toggle}>
+        <Stack gap="xs">
+          <Text size="md">
+            This will remove you from the free agent list.
+          </Text>
+          <Button onClick={handleUnenroll}>Confirm</Button>
+          <Button variant="subtle" color="red" onClick={toggle}>Cancel</Button>
+        </Stack>
+      </Sheet>
+    </>
+  );
+};
+
+export default UnenrollFreeAgent;