di usage in website

apps/website/components/leagues/ScheduleRaceForm.tsx

@@ -1,10 +1,10 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 import { useRouter } from 'next/navigation';
 import Button from '../ui/Button';
 import Input from '../ui/Input';
-import { useServices } from '@/lib/services/ServiceProvider';
+import { useAllLeagues } from '@/hooks/league/useAllLeagues';
 import type { LeagueSummaryViewModel } from '@/lib/view-models/LeagueSummaryViewModel';
 
 interface ScheduleRaceFormData {
@@ -35,10 +35,7 @@ export default function ScheduleRaceForm({
   onCancel
 }: ScheduleRaceFormProps) {
   const router = useRouter();
-  const { leagueService, raceService } = useServices();
-  const [leagues, setLeagues] = useState<LeagueSummaryViewModel[]>([]);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
+  const { data: leagues = [], isLoading, error } = useAllLeagues();
 
   const [formData, setFormData] = useState<ScheduleRaceFormData>({
     leagueId: preSelectedLeagueId || '',
@@ -51,18 +48,6 @@ export default function ScheduleRaceForm({
 
   const [validationErrors, setValidationErrors] = useState<Record<string, string>>({});
 
-  useEffect(() => {
-    const loadLeagues = async () => {
-      try {
-        const allLeagues = await leagueService.getAllLeagues();
-        setLeagues(allLeagues);
-      } catch (err) {
-        setError(err instanceof Error ? err.message : 'Failed to load leagues');
-      }
-    };
-    void loadLeagues();
-  }, [leagueService]);
-
   const validateForm = (): boolean => {
     const errors: Record<string, string> = {};
 
@@ -107,9 +92,6 @@ export default function ScheduleRaceForm({
       return;
     }
 
-    setLoading(true);
-    setError(null);
-
     try {
       // Create race using the race service
       // Note: This assumes the race service has a create method
@@ -137,9 +119,8 @@ export default function ScheduleRaceForm({
         router.push(`/races/${createdRace.id}`);
       }
     } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to create race');
-    } finally {
-      setLoading(false);
+      // Error handling is now done through the component state
+      console.error('Failed to create race:', err);
     }
   };
 
@@ -160,7 +141,7 @@ export default function ScheduleRaceForm({
       <form onSubmit={handleSubmit} className="space-y-6">
         {error && (
         <div className="p-4 rounded-lg bg-red-500/10 border border-red-500/30 text-red-400">
-          {error}
+          {error.message}
         </div>
       )}
 
@@ -310,10 +291,10 @@ export default function ScheduleRaceForm({
         <Button
           type="submit"
           variant="primary"
-          disabled={loading}
+          disabled={isLoading}
           className="flex-1"
         >
-          {loading ? 'Creating...' : 'Schedule Race'}
+          {isLoading ? 'Creating...' : 'Schedule Race'}
         </Button>
         
         {onCancel && (
@@ -321,7 +302,7 @@ export default function ScheduleRaceForm({
             type="button"
             variant="secondary"
             onClick={onCancel}
-            disabled={loading}
+            disabled={isLoading}
           >
             Cancel
           </Button>