124 lines
3.6 KiB
TypeScript
124 lines
3.6 KiB
TypeScript
import Button from "@/components/button";
|
|
import Sheet from "@/components/sheet/sheet";
|
|
import { useAuth } from "@/contexts/auth-context";
|
|
import { useSheet } from "@/hooks/use-sheet";
|
|
import { useMemo, useState, useCallback, useEffect } from "react";
|
|
import TeamSelectionView from "./team-selection-view";
|
|
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";
|
|
import { Trans, useLingui } from "@lingui/react/macro";
|
|
|
|
interface EnrollTeamProps {
|
|
tournamentId: string;
|
|
onSubmit: () => void;
|
|
}
|
|
|
|
const EnrollTeam = ({ tournamentId, onSubmit }: EnrollTeamProps) => {
|
|
const { open, isOpen, toggle } = useSheet();
|
|
const { user } = useAuth();
|
|
const { t } = useLingui();
|
|
|
|
const hasTeams = useMemo(() => !!user?.teams?.length, [user?.teams]);
|
|
const [selectedTeamId, setSelectedTeamId] = useState<string>();
|
|
const [showTeamForm, setShowTeamForm] = useState<boolean>(!hasTeams);
|
|
const [selectedTeam, setSelectedTeam] = useState<Team | null>(null);
|
|
|
|
const { data: teamData } = useServerQuery({
|
|
...teamQueries.details(selectedTeamId || ''),
|
|
options: { enabled: !!selectedTeamId }
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (teamData) {
|
|
setSelectedTeam(teamData);
|
|
setShowTeamForm(true);
|
|
}
|
|
}, [teamData]);
|
|
|
|
const teamOptions = useMemo(() =>
|
|
user?.teams?.map(team => ({
|
|
value: team.id,
|
|
label: team.name
|
|
})) || [],
|
|
[user?.teams]
|
|
);
|
|
|
|
const handleBack = useCallback(() => {
|
|
setSelectedTeamId(undefined);
|
|
setSelectedTeam(null);
|
|
setShowTeamForm(false);
|
|
}, []);
|
|
|
|
const handleSelect = useCallback((teamId: string | undefined) => {
|
|
setSelectedTeamId(teamId);
|
|
if (!teamId) {
|
|
setShowTeamForm(true);
|
|
}
|
|
}, []);
|
|
|
|
const initialValues = useMemo(() => {
|
|
if (!selectedTeam) return undefined;
|
|
|
|
return {
|
|
name: selectedTeam.name,
|
|
song_id: selectedTeam.song_id,
|
|
song_name: selectedTeam.song_name,
|
|
song_artist: selectedTeam.song_artist,
|
|
song_album: selectedTeam.song_album,
|
|
song_start: selectedTeam.song_start,
|
|
song_end: selectedTeam.song_end,
|
|
song_image_url: selectedTeam.song_image_url,
|
|
players: selectedTeam.players.map(player => player.id),
|
|
};
|
|
}, [selectedTeam]);
|
|
|
|
const { mutate: enrollTeam, isPending: isEnrolling } = useEnrollTeam();
|
|
const handleEnrollTeam = (teamId: string) => {
|
|
enrollTeam({ tournamentId, teamId }, {
|
|
onSuccess: () => {
|
|
toggle();
|
|
onSubmit();
|
|
}
|
|
});
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Button size="sm" onClick={open}>
|
|
<Trans>Enroll Your Team</Trans>
|
|
</Button>
|
|
|
|
<Sheet title={showTeamForm ? t`Team Details` : t`Enroll Team`} opened={isOpen} onChange={toggle}>
|
|
{ isEnrolling && <Loader size="lg" /> }
|
|
{showTeamForm && !isEnrolling ? (
|
|
<TeamForm
|
|
close={handleBack}
|
|
tournamentId={tournamentId}
|
|
initialValues={initialValues}
|
|
teamId={selectedTeamId}
|
|
onSubmit={handleEnrollTeam}
|
|
/>
|
|
) : (
|
|
<>
|
|
<TeamSelectionView
|
|
options={teamOptions}
|
|
onSelect={handleSelect}
|
|
/>
|
|
<Button mt='sm' variant="subtle" color='red' size="sm" onClick={toggle}>
|
|
<Trans>Cancel</Trans>
|
|
</Button>
|
|
</>
|
|
)}
|
|
|
|
</Sheet>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default EnrollTeam;
|