tournament logo upload via api

src/features/admin/components/create-tournament.tsx

@@ -1,4 +1,4 @@
-import { Stack, TextInput, Textarea } from "@mantine/core";
+import { FileInput, Stack, TextInput, Textarea } from "@mantine/core";
 import { useForm, UseFormInput } from "@mantine/form";
 import { LinkIcon } from "@phosphor-icons/react";
 import SlidePanel, { SlidePanelField } from "@/components/sheet/slide-panel";
@@ -6,6 +6,10 @@ import { TournamentFormInput } from "@/features/tournaments/types";
 import { DateTimePicker } from "./date-time-picker";
 import { isNotEmpty } from "@mantine/form";
 import useCreateTournament from "../hooks/use-create-tournament";
+import toast from '@/lib/sonner';
+import { logger } from "..";
+import { useQueryClient } from "@tanstack/react-query";
+import { tournamentQueries } from "@/features/tournaments/queries";
 
 const CreateTournament = ({ close }: { close: () => void }) => {
 
@@ -14,7 +18,6 @@ const CreateTournament = ({ close }: { close: () => void }) => {
       name: 'Test Tournament',
       location: 'Test Location',
       desc: 'Test Description',
-      logo_url: 'https://en.wikipedia.org/wiki/Trophy#/media/File:1934_Melbourne_Cup,_National_Museum_of_Australia.jpg',
       start_time: '2025-01-01T00:00:00Z',
       enroll_time: '2025-01-01T00:00:00Z',
     },
@@ -28,12 +31,45 @@ const CreateTournament = ({ close }: { close: () => void }) => {
   }
 
   const form = useForm(config);
+  const queryClient = useQueryClient();
 
   const { mutate: createTournament, isPending } = useCreateTournament();
 
   const handleSubmit = async (values: TournamentFormInput) => {
-    createTournament(values, {
-      onSuccess: () => {
+    const { logo, ...tournamentData } = values;
+    
+    createTournament(tournamentData, {
+      onSuccess: async (tournament) => {        
+        if (logo && tournament) {
+          try {
+            const formData = new FormData();
+            formData.append('tournamentId', tournament.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.invalidateQueries({ queryKey: tournamentQueries.list().queryKey });
+            queryClient.setQueryData(
+              tournamentQueries.details(result.tournament!.id).queryKey,
+              result.tournament
+            );
+            
+            toast.success('Tournament created successfully!');
+          } catch (error: any) {
+            toast.error(`Tournament created but logo upload failed: ${error.message}`);
+            logger.error('Tournament logo upload error', error);
+          }
+        }
         close();
       }
     });
@@ -67,12 +103,12 @@ const CreateTournament = ({ close }: { close: () => void }) => {
           {...form.getInputProps('desc')}
         />
 
-        <TextInput
-          key={form.key('logo_url')}
-          accept="image/*"
+        <FileInput
+          key={form.key('logo')}
+          accept="image/png,image/jpeg,image/gif,image/jpg"
           label="Logo"
           leftSection={<LinkIcon size={16} />}
-          {...form.getInputProps('logo_url')}
+          {...form.getInputProps('logo')}
         />
 
         <SlidePanelField

src/features/admin/hooks/use-create-tournament.ts

@@ -18,7 +18,6 @@ const useCreateTournament = () => {
         toast.error('There was an issue creating your tournament. Please try again later.');
         logger.error('Error creating tournament', data);
       } else {
-        toast.success('Tournament created successfully!');
         logger.info('Tournament created successfully', data);
         navigate({ to: '/tournaments' });
       }