more for the overhaul
This commit is contained in:
@@ -1,15 +1,17 @@
|
||||
import { Suspense, useMemo } from "react";
|
||||
import { Tournament } from "../../types";
|
||||
import { useAuth } from "@/contexts/auth-context";
|
||||
import { Box, Card, Divider, Group, Stack, Text, Title } from "@mantine/core";
|
||||
import { Box, Divider, Paper, SimpleGrid, Stack, Text } from "@mantine/core";
|
||||
import Countdown from "@/components/countdown";
|
||||
import ListLink from "@/components/list-link";
|
||||
import { TreeStructureIcon, UsersIcon } from "@phosphor-icons/react";
|
||||
import { useNavigate } from "@tanstack/react-router";
|
||||
import EnrollTeam from "./enroll-team";
|
||||
import EnrollFreeAgent from "./enroll-free-agent";
|
||||
import TeamListButton from "./team-list-button";
|
||||
import EnrolledPlayersListButton from "./enrolled-players-list-button";
|
||||
import Header from "./header";
|
||||
import Header from "../started-tournament/header";
|
||||
import SectionHeading from "../started-tournament/sections/section-heading";
|
||||
import { NavTile } from "../started-tournament/sections/nav-grid";
|
||||
import TeamCardSkeleton from "@/features/teams/components/team-card-skeleton";
|
||||
import TeamCard from "@/features/teams/components/team-card";
|
||||
import RegionalTeamCard from "@/features/teams/components/regional-team-card";
|
||||
@@ -24,6 +26,7 @@ const UpcomingTournament: React.FC<{ tournament: Tournament }> = ({
|
||||
tournament,
|
||||
}) => {
|
||||
const { user, roles } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const isAdmin = useMemo(() => roles.includes("Admin"), [roles]);
|
||||
const userTeam = useMemo(
|
||||
@@ -52,121 +55,109 @@ const UpcomingTournament: React.FC<{ tournament: Tournament }> = ({
|
||||
<Stack gap="lg">
|
||||
<Header tournament={tournament} />
|
||||
|
||||
<Stack px="xs">
|
||||
{tournament.desc && <Text px="md" ta="center" size="sm" style={{ whiteSpace: 'pre-wrap' }}>{tournament.desc}</Text>}
|
||||
{tournament.desc && (
|
||||
<Text px="md" size="sm" c="dimmed" style={{ whiteSpace: "pre-wrap" }}>
|
||||
{tournament.desc}
|
||||
</Text>
|
||||
)}
|
||||
|
||||
<Card
|
||||
withBorder
|
||||
p="lg"
|
||||
style={{
|
||||
borderRadius:
|
||||
"2px 2px var(--mantine-radius-lg) var(--mantine-radius-lg)",
|
||||
borderTop: "3px solid var(--mantine-primary-color-filled)",
|
||||
}}
|
||||
>
|
||||
<Stack gap="xs">
|
||||
<Group gap="xs" align="center">
|
||||
<UsersIcon size={16} />
|
||||
<Title mt={4} order={5}>
|
||||
Enrollment
|
||||
</Title>
|
||||
{isEnrollmentOpen && (
|
||||
<Box ml="auto">
|
||||
<Countdown
|
||||
date={enrollmentDeadline}
|
||||
label="Time left"
|
||||
color="yellow"
|
||||
/>
|
||||
</Box>
|
||||
<Box>
|
||||
<SectionHeading
|
||||
label="Enrollment"
|
||||
action={
|
||||
isEnrollmentOpen ? (
|
||||
<Countdown date={enrollmentDeadline} />
|
||||
) : undefined
|
||||
}
|
||||
/>
|
||||
<Box px="md">
|
||||
<Paper withBorder p="md">
|
||||
<Stack gap="sm">
|
||||
{!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 && (
|
||||
<>
|
||||
{!tournament.regional && (
|
||||
<>
|
||||
<EnrollTeam
|
||||
tournamentId={tournament.id}
|
||||
onSubmit={handleSubmit}
|
||||
/>
|
||||
<Divider my={0} label="or" />
|
||||
</>
|
||||
)}
|
||||
<EnrollFreeAgent
|
||||
tournamentId={tournament.id}
|
||||
isRegional={tournament.regional}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
{isUserEnrolled && (
|
||||
<>
|
||||
<Suspense fallback={<TeamCardSkeleton />}>
|
||||
{tournament.regional === true ? (
|
||||
<RegionalTeamCard teamId={userTeam.id} />
|
||||
) : (
|
||||
<TeamCard teamId={userTeam.id} />
|
||||
)}
|
||||
</Suspense>
|
||||
{tournament.regional !== true && (
|
||||
<>
|
||||
<UpdateTeam tournamentId={tournament.id} teamId={userTeam.id} />
|
||||
{isEnrollmentOpen && (
|
||||
<UnenrollTeam
|
||||
{!isUserEnrolled && isEnrollmentOpen && !isFreeAgent && (
|
||||
<>
|
||||
{!tournament.regional && (
|
||||
<>
|
||||
<EnrollTeam
|
||||
tournamentId={tournament.id}
|
||||
teamId={userTeam.id}
|
||||
onSubmit={handleSubmit}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
<Divider my={0} label="or" />
|
||||
</>
|
||||
)}
|
||||
<EnrollFreeAgent
|
||||
tournamentId={tournament.id}
|
||||
isRegional={tournament.regional}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
{
|
||||
isFreeAgent && isEnrollmentOpen && (
|
||||
{isUserEnrolled && (
|
||||
<>
|
||||
<Suspense fallback={<TeamCardSkeleton />}>
|
||||
{tournament.regional === true ? (
|
||||
<RegionalTeamCard teamId={userTeam.id} />
|
||||
) : (
|
||||
<TeamCard teamId={userTeam.id} />
|
||||
)}
|
||||
</Suspense>
|
||||
{tournament.regional !== true && (
|
||||
<>
|
||||
<UpdateTeam tournamentId={tournament.id} teamId={userTeam.id} />
|
||||
{isEnrollmentOpen && (
|
||||
<UnenrollTeam
|
||||
tournamentId={tournament.id}
|
||||
teamId={userTeam.id}
|
||||
onSubmit={handleSubmit}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{isFreeAgent && isEnrollmentOpen && (
|
||||
<EnrolledFreeAgent
|
||||
tournamentId={tournament.id}
|
||||
isRegional={tournament.regional}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
</Stack>
|
||||
</Card>
|
||||
</Stack>
|
||||
)}
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Divider />
|
||||
{isAdmin && (
|
||||
<ListLink
|
||||
label={`Manage ${tournament.name}`}
|
||||
to={`/admin/tournaments/${tournament.id}`}
|
||||
Icon={UsersIcon}
|
||||
/>
|
||||
)}
|
||||
<ListLink
|
||||
label={`View Bracket`}
|
||||
to={`/tournaments/${tournament.id}/bracket`}
|
||||
Icon={TreeStructureIcon}
|
||||
disabled
|
||||
/>
|
||||
{tournament.regional === true ? (
|
||||
(tournament.teams && tournament.teams.length > 0) ? (
|
||||
<TeamListButton teams={tournament.teams} isRegional={true} />
|
||||
) : (
|
||||
<EnrolledPlayersListButton tournamentId={tournament.id} />
|
||||
)
|
||||
) : (
|
||||
<TeamListButton teams={tournament.teams || []} isRegional={false} />
|
||||
)}
|
||||
<RulesListButton tournamentId={tournament.id} />
|
||||
<Divider mb="sm" />
|
||||
<Box px="md">
|
||||
<SimpleGrid cols={3} spacing="sm" verticalSpacing="sm">
|
||||
{isAdmin && (
|
||||
<NavTile
|
||||
label="Manage"
|
||||
Icon={UsersIcon}
|
||||
onClick={() =>
|
||||
navigate({ to: `/admin/tournaments/${tournament.id}` })
|
||||
}
|
||||
/>
|
||||
)}
|
||||
<NavTile label="Bracket" Icon={TreeStructureIcon} disabled />
|
||||
{tournament.regional === true ? (
|
||||
(tournament.teams && tournament.teams.length > 0) ? (
|
||||
<TeamListButton teams={tournament.teams} isRegional={true} />
|
||||
) : (
|
||||
<EnrolledPlayersListButton tournamentId={tournament.id} />
|
||||
)
|
||||
) : (
|
||||
<TeamListButton teams={tournament.teams || []} isRegional={false} />
|
||||
)}
|
||||
<RulesListButton tournamentId={tournament.id} />
|
||||
</SimpleGrid>
|
||||
</Box>
|
||||
</Box>
|
||||
</Stack>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user