various improvements, edit tournament, etc
This commit is contained in:
yohlo
193
src/features/admin/components/edit-tournament.tsx
Normal file
193
src/features/admin/components/edit-tournament.tsx
Normal file
@@ -0,0 +1,193 @@
|
||||
import { Box, FileInput, Group, Stack, TextInput, Textarea, Title } from "@mantine/core";
|
||||
import { useForm, UseFormInput } from "@mantine/form";
|
||||
import { LinkIcon } from "@phosphor-icons/react";
|
||||
import { Tournament, TournamentFormInput } from "@/features/tournaments/types";
|
||||
import { DateInputSheet } from "../../../components/date-input";
|
||||
import { isNotEmpty } from "@mantine/form";
|
||||
import toast from '@/lib/sonner';
|
||||
import { logger } from "..";
|
||||
import { useQueryClient, useMutation } from "@tanstack/react-query";
|
||||
import { tournamentQueries } from "@/features/tournaments/queries";
|
||||
import { updateTournament } from "@/features/tournaments/server";
|
||||
import { useRouter } from "@tanstack/react-router";
|
||||
import Button from "@/components/button";
|
||||
|
||||
interface EditTournamentProps {
|
||||
tournament: Tournament;
|
||||
}
|
||||
|
||||
const EditTournament = ({ tournament }: EditTournamentProps) => {
|
||||
const router = useRouter();
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const config: UseFormInput<TournamentFormInput> = {
|
||||
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 || '',
|
||||
rules: tournament.rules || '',
|
||||
logo: undefined, // Always start with no file selected
|
||||
},
|
||||
onSubmitPreventDefault: 'always',
|
||||
validate: {
|
||||
name: isNotEmpty('Name is required'),
|
||||
location: isNotEmpty('Location is required'),
|
||||
start_time: isNotEmpty('Start time is required'),
|
||||
enroll_time: isNotEmpty('Enrollment time is required'),
|
||||
}
|
||||
};
|
||||
|
||||
const form = useForm(config);
|
||||
|
||||
const { mutate: editTournament, isPending } = useMutation({
|
||||
mutationFn: (data: Partial<TournamentFormInput>) =>
|
||||
updateTournament({ data: { id: tournament.id, updates: data } }),
|
||||
onSuccess: (updatedTournament) => {
|
||||
if (updatedTournament) {
|
||||
queryClient.invalidateQueries({ queryKey: tournamentQueries.list().queryKey });
|
||||
queryClient.setQueryData(
|
||||
tournamentQueries.details(updatedTournament.id).queryKey,
|
||||
updatedTournament
|
||||
);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const handleSubmit = async (values: TournamentFormInput) => {
|
||||
const { logo, ...tournamentData } = values;
|
||||
|
||||
editTournament(tournamentData, {
|
||||
onSuccess: async (updatedTournament) => {
|
||||
if (logo && updatedTournament) {
|
||||
try {
|
||||
const formData = new FormData();
|
||||
formData.append('tournamentId', updatedTournament.id);
|
||||
formData.append('logo', logo);
|
||||
|
||||
const response = await fetch('/api/tournaments/upload-logo', {
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const error = await response.json();
|
||||
throw new Error(error.error || 'Failed to upload logo');
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
queryClient.setQueryData(
|
||||
tournamentQueries.details(result.tournament!.id).queryKey,
|
||||
result.tournament
|
||||
);
|
||||
|
||||
toast.success('Tournament updated successfully!');
|
||||
} catch (error: any) {
|
||||
toast.error(`Tournament updated but logo upload failed: ${error.message}`);
|
||||
logger.error('Tournament logo upload error', error);
|
||||
}
|
||||
} else {
|
||||
toast.success('Tournament updated successfully!');
|
||||
}
|
||||
|
||||
router.history.back();
|
||||
},
|
||||
onError: (error: any) => {
|
||||
toast.error(`Failed to update tournament: ${error.message}`);
|
||||
logger.error('Tournament update error', error);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Box w="100%" maw={600} mx="auto" p="lg">
|
||||
<Stack gap="lg">
|
||||
<Title order={2}>Edit Tournament</Title>
|
||||
|
||||
<form onSubmit={form.onSubmit(handleSubmit)}>
|
||||
<Stack gap="md">
|
||||
<TextInput
|
||||
label="Name"
|
||||
withAsterisk
|
||||
key={form.key('name')}
|
||||
{...form.getInputProps('name')}
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
label="Location"
|
||||
withAsterisk
|
||||
key={form.key('location')}
|
||||
{...form.getInputProps('location')}
|
||||
/>
|
||||
|
||||
<Textarea
|
||||
label="Description"
|
||||
key={form.key('desc')}
|
||||
{...form.getInputProps('desc')}
|
||||
minRows={3}
|
||||
/>
|
||||
|
||||
<Textarea
|
||||
label="Rules"
|
||||
key={form.key('rules')}
|
||||
{...form.getInputProps('rules')}
|
||||
minRows={4}
|
||||
/>
|
||||
|
||||
<FileInput
|
||||
key={form.key('logo')}
|
||||
accept="image/png,image/jpeg,image/gif,image/jpg"
|
||||
label="Change Logo"
|
||||
leftSection={<LinkIcon size={16} />}
|
||||
{...form.getInputProps('logo')}
|
||||
/>
|
||||
|
||||
<DateInputSheet
|
||||
label="Start Date"
|
||||
withAsterisk
|
||||
value={form.values.start_time}
|
||||
onChange={(value) => form.setFieldValue('start_time', value)}
|
||||
error={form.errors.start_time}
|
||||
/>
|
||||
|
||||
<DateInputSheet
|
||||
label="Enrollment Due"
|
||||
withAsterisk
|
||||
value={form.values.enroll_time}
|
||||
onChange={(value) => form.setFieldValue('enroll_time', value)}
|
||||
error={form.errors.enroll_time}
|
||||
/>
|
||||
|
||||
<DateInputSheet
|
||||
label="End Date (Optional)"
|
||||
value={form.values.end_time || ''}
|
||||
onChange={(value) => form.setFieldValue('end_time', value)}
|
||||
error={form.errors.end_time}
|
||||
/>
|
||||
|
||||
<Group justify="flex-end" mt="lg">
|
||||
<Button
|
||||
variant="light"
|
||||
onClick={() => router.history.back()}
|
||||
disabled={isPending}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
loading={isPending}
|
||||
>
|
||||
Update Tournament
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</form>
|
||||
</Stack>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default EditTournament;
|
||||
Reference in New Issue
Block a user