di usage in website

apps/website/components/leagues/CreateLeagueForm.tsx

@@ -4,8 +4,10 @@ import { useState, FormEvent } from 'react';
 import { useRouter } from 'next/navigation';
 import Input from '../ui/Input';
 import Button from '../ui/Button';
-import { useServices } from '@/lib/services/ServiceProvider';
+import { useCreateLeague } from '@/hooks/league/useCreateLeague';
 import { useAuth } from '@/lib/auth/AuthContext';
+import { useInject } from '@/lib/di/hooks/useInject';
+import { DRIVER_SERVICE_TOKEN } from '@/lib/di/tokens';
 
 interface FormErrors {
   name?: string;
@@ -17,7 +19,6 @@ interface FormErrors {
 
 export default function CreateLeagueForm() {
   const router = useRouter();
-  const [loading, setLoading] = useState(false);
   const [errors, setErrors] = useState<FormErrors>({});
   
   const [formData, setFormData] = useState({
@@ -51,12 +52,13 @@ export default function CreateLeagueForm() {
   };
 
   const { session } = useAuth();
-  const { driverService, leagueService } = useServices();
+  const driverService = useInject(DRIVER_SERVICE_TOKEN);
+  const createLeagueMutation = useCreateLeague();
 
   const handleSubmit = async (e: FormEvent) => {
     e.preventDefault();
     
-    if (loading) return;
+    if (createLeagueMutation.isPending) return;
     
     if (!validateForm()) return;
     
@@ -65,15 +67,12 @@ export default function CreateLeagueForm() {
       return;
     }
     
-    setLoading(true);
-    
     try {
       // Get current driver
       const currentDriver = await driverService.getDriverProfile(session.user.userId);
       
       if (!currentDriver) {
         setErrors({ submit: 'No driver profile found. Please create a profile first.' });
-        setLoading(false);
         return;
       }
       
@@ -85,14 +84,13 @@ export default function CreateLeagueForm() {
         ownerId: session.user.userId,
       };
       
-      const result = await leagueService.createLeague(input);
+      const result = await createLeagueMutation.mutateAsync(input);
       router.push(`/leagues/${result.leagueId}`);
       router.refresh();
     } catch (error) {
       setErrors({
         submit: error instanceof Error ? error.message : 'Failed to create league'
       });
-      setLoading(false);
     }
   };
 
@@ -112,7 +110,7 @@ export default function CreateLeagueForm() {
           errorMessage={errors.name}
           placeholder="European GT Championship"
           maxLength={100}
-          disabled={loading}
+          disabled={createLeagueMutation.isPending}
         />
         <p className="mt-1 text-xs text-gray-500 text-right">
           {formData.name.length}/100
@@ -130,7 +128,7 @@ export default function CreateLeagueForm() {
           placeholder="Weekly GT3 racing with professional drivers"
           maxLength={500}
           rows={4}
-          disabled={loading}
+          disabled={createLeagueMutation.isPending}
           className="block w-full rounded-md border-0 px-4 py-3 bg-iron-gray text-white shadow-sm ring-1 ring-inset ring-charcoal-outline placeholder:text-gray-500 focus:ring-2 focus:ring-inset focus:ring-primary-blue transition-all duration-150 sm:text-sm sm:leading-6 resize-none"
         />
         <p className="mt-1 text-xs text-gray-500 text-right">
@@ -149,7 +147,7 @@ export default function CreateLeagueForm() {
           id="pointsSystem"
           value={formData.pointsSystem}
           onChange={(e) => setFormData({ ...formData, pointsSystem: e.target.value as 'f1-2024' | 'indycar' })}
-          disabled={loading}
+          disabled={createLeagueMutation.isPending}
           className="block w-full rounded-md border-0 px-4 py-3 bg-iron-gray text-white shadow-sm ring-1 ring-inset ring-charcoal-outline focus:ring-2 focus:ring-inset focus:ring-primary-blue transition-all duration-150 sm:text-sm sm:leading-6"
         >
           <option value="f1-2024">F1 2024</option>
@@ -170,7 +168,7 @@ export default function CreateLeagueForm() {
           errorMessage={errors.sessionDuration}
           min={1}
           max={240}
-          disabled={loading}
+          disabled={createLeagueMutation.isPending}
         />
       </div>
 
@@ -183,10 +181,10 @@ export default function CreateLeagueForm() {
       <Button
         type="submit"
         variant="primary"
-        disabled={loading}
+        disabled={createLeagueMutation.isPending}
         className="w-full"
       >
-        {loading ? 'Creating League...' : 'Create League'}
+        {createLeagueMutation.isPending ? 'Creating League...' : 'Create League'}
         </Button>
       </form>
     </>