diff --git a/src/components/MatchResultForm/components/TournamentPlayerFields/TournamentPlayerFields.tsx b/src/components/MatchResultForm/components/TournamentPlayerFields/TournamentPlayerFields.tsx index 9159947f..ea0ae6cf 100644 --- a/src/components/MatchResultForm/components/TournamentPlayerFields/TournamentPlayerFields.tsx +++ b/src/components/MatchResultForm/components/TournamentPlayerFields/TournamentPlayerFields.tsx @@ -20,33 +20,35 @@ export const TournamentPlayerFields = ({ tournament, }: TournamentPlayerFieldsProps): JSX.Element => { const { setValue, watch } = useFormContext(); - const player0UserId = watch('player0UserId'); - const player1UserId = watch('player1UserId'); - const player0Faction = watch('details.player0Faction'); - const player1Faction = watch('details.player1Faction'); const { data: selectedPairing } = useGetTournamentPairing({ id: tournamentPairingId }); + // Player 1 + const player0UserId = watch('player0UserId'); + const player0Faction = watch('details.player0Faction'); const player0Label = tournament?.useTeams && selectedPairing?.tournamentCompetitor0 ? `${selectedPairing.tournamentCompetitor0.displayName} Player` : 'Player 1'; - const player1Label = tournament?.useTeams && selectedPairing?.tournamentCompetitor1 ? `${selectedPairing.tournamentCompetitor1.displayName} Player` : 'Player 2'; - - const player0Options = getCompetitorPlayerOptions(selectedPairing?.tournamentCompetitor0); - const player1Options = getCompetitorPlayerOptions(selectedPairing?.tournamentCompetitor1); - + const player0Options = useMemo(() => ( + getCompetitorPlayerOptions(selectedPairing?.tournamentCompetitor0) + ), [selectedPairing?.tournamentCompetitor0]); const player0Registration = useMemo(() => ( selectedPairing?.tournamentCompetitor0?.registrations.find((r) => r.userId === player0UserId) ), [selectedPairing?.tournamentCompetitor0, player0UserId]); - const player1Registration = useMemo(() => ( - selectedPairing?.tournamentCompetitor1?.registrations.find((r) => r.userId === player1UserId) - ), [selectedPairing?.tournamentCompetitor1, player1UserId]); + const player0IsBye = selectedPairing?.tournamentCompetitor0 === null; - // Automatically set "Player 1" if possible + // Automatically set "Player 1" user ID if possible useEffect(() => { if (player0Options && player0Options.length === 1 && player0UserId !== player0Options[0].value) { setValue('player0UserId', player0Options[0].value); } }, [player0Options, player0UserId, setValue]); + // Automatically set "Player 1" placeholder if possible + useEffect(() => { + if (player0IsBye) { + setValue('player0Placeholder', 'Bye'); + } + }, [player0IsBye, setValue]); + // Automatically set "Player 1" faction if possible useEffect(() => { if (player0Registration && player0Registration.factions.length > 0 && !player0Faction) { @@ -54,13 +56,32 @@ export const TournamentPlayerFields = ({ } }, [player0Registration, player0Faction, setValue]); - // Automatically set "Player 2" if possible + // Player 2 + const player1UserId = watch('player1UserId'); + const player1Faction = watch('details.player1Faction'); + const player1Label = tournament?.useTeams && selectedPairing?.tournamentCompetitor1 ? `${selectedPairing.tournamentCompetitor1.displayName} Player` : 'Player 2'; + const player1Options = useMemo(() => ( + getCompetitorPlayerOptions(selectedPairing?.tournamentCompetitor1) + ), [selectedPairing?.tournamentCompetitor1]); + const player1Registration = useMemo(() => ( + selectedPairing?.tournamentCompetitor1?.registrations.find((r) => r.userId === player1UserId) + ), [selectedPairing?.tournamentCompetitor1, player1UserId]); + const player1IsBye = selectedPairing?.tournamentCompetitor1 === null; + + // Automatically set "Player 2" user ID if possible useEffect(() => { if (player1Options && player1Options.length === 1 && player1UserId !== player1Options[0].value) { setValue('player1UserId', player1Options[0].value); } }, [player1Options, player1UserId, setValue]); + // Automatically set "Player 2" placeholder if possible + useEffect(() => { + if (player1IsBye) { + setValue('player1Placeholder', 'Bye'); + } + }, [player1IsBye, setValue]); + // Automatically set "Player 2" faction if possible useEffect(() => { if (player1Registration && player1Registration.factions.length > 0 && !player1Faction) { @@ -75,12 +96,26 @@ export const TournamentPlayerFields = ({ return (
- - - + {player0IsBye ? ( + + + + ) : player0Options.length ? ( + + + + ) : ( + + + + )}
- {player1Options.length ? ( + {player1IsBye ? ( + + + + ) : player1Options.length ? (