Files
flxn-app/src/features/tournaments/components/manage-tournament.tsx
2025-09-17 09:02:20 -05:00

110 lines
2.7 KiB
TypeScript

import { useTournament } from "../queries";
import { List } from "@mantine/core";
import ListButton from "@/components/list-button";
import Sheet from "@/components/sheet/sheet";
import TournamentForm from "./tournament-form";
import {
HardDrivesIcon,
PencilLineIcon,
TreeStructureIcon,
UsersThreeIcon,
} from "@phosphor-icons/react";
import { useSheet } from "@/hooks/use-sheet";
import EditEnrolledTeams from "./edit-enrolled-teams";
import ListLink from "@/components/list-link";
import { RichTextEditor } from "@/components/rich-text-editor";
import React from "react";
interface ManageTournamentProps {
tournamentId: string;
}
const ManageTournament = ({ tournamentId }: ManageTournamentProps) => {
const { data: tournament } = useTournament(tournamentId);
if (!tournament) throw new Error("Tournament not found.");
const {
isOpen: editTournamentOpened,
open: openEditTournament,
close: closeEditTournament,
} = useSheet();
const {
isOpen: editRulesOpened,
open: openEditRules,
close: closeEditRules,
} = useSheet();
const {
isOpen: editTeamsOpened,
open: openEditTeams,
close: closeEditTeams,
} = useSheet();
const [v, setV] = React.useState("");
return (
<>
<List>
<ListButton
label="Edit Tournament"
Icon={HardDrivesIcon}
onClick={openEditTournament}
/>
<ListButton
label="Edit Rules"
Icon={PencilLineIcon}
onClick={openEditRules}
/>
<ListButton
label="Edit Enrolled Teams"
Icon={UsersThreeIcon}
onClick={openEditTeams}
/>
<ListLink
label="Run Tournament"
Icon={TreeStructureIcon}
to={`/admin/tournaments/run/${tournamentId}`}
/>
</List>
<Sheet
title="Edit Tournament"
opened={editTournamentOpened}
onChange={closeEditTournament}
>
<TournamentForm
tournamentId={tournament.id}
initialValues={{
name: tournament.name,
location: tournament.location,
desc: tournament.desc,
start_time: tournament.start_time,
enroll_time: tournament.enroll_time,
end_time: tournament.end_time,
}}
close={closeEditTournament}
/>
</Sheet>
<Sheet
title="Edit Rules"
opened={editRulesOpened}
onChange={closeEditRules}
>
<RichTextEditor value={v} onChange={setV} />
{v}
</Sheet>
<Sheet
title="Edit Enrolled Teams"
opened={editTeamsOpened}
onChange={closeEditTeams}
>
<EditEnrolledTeams tournamentId={tournamentId} />
</Sheet>
</>
);
};
export default ManageTournament;