di usage in website

apps/website/components/teams/CreateTeamForm.tsx

@@ -3,7 +3,7 @@
 import Button from '@/components/ui/Button';
 import Input from '@/components/ui/Input';
 import { useEffectiveDriverId } from '@/hooks/useEffectiveDriverId';
-import { useServices } from '@/lib/services/ServiceProvider';
+import { useCreateTeam } from '@/hooks/team';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 
@@ -14,14 +14,13 @@ interface CreateTeamFormProps {
 
 export default function CreateTeamForm({ onCancel, onSuccess }: CreateTeamFormProps) {
   const router = useRouter();
-  const { teamService } = useServices();
+  const createTeamMutation = useCreateTeam();
   const [formData, setFormData] = useState({
     name: '',
     tag: '',
     description: '',
   });
   const [errors, setErrors] = useState<Record<string, string>>({});
-  const [submitting, setSubmitting] = useState(false);
   const currentDriverId = useEffectiveDriverId();
 
   const validateForm = () => {
@@ -56,26 +55,26 @@ export default function CreateTeamForm({ onCancel, onSuccess }: CreateTeamFormPr
       return;
     }
 
-    setSubmitting(true);
-
-    try {
-      const result = await teamService.createTeam({
+    createTeamMutation.mutate(
+      {
         name: formData.name,
         tag: formData.tag.toUpperCase(),
         description: formData.description,
-      });
-
-      const teamId = result.id;
-
-      if (onSuccess) {
-        onSuccess(teamId);
-      } else {
-        router.push(`/teams/${teamId}`);
+      },
+      {
+        onSuccess: (result) => {
+          const teamId = result.id;
+          if (onSuccess) {
+            onSuccess(teamId);
+          } else {
+            router.push(`/teams/${teamId}`);
+          }
+        },
+        onError: (error) => {
+          alert(error instanceof Error ? error.message : 'Failed to create team');
+        },
       }
-    } catch (error) {
-      alert(error instanceof Error ? error.message : 'Failed to create team');
-      setSubmitting(false);
-    }
+    );
   };
 
   return (
@@ -89,7 +88,7 @@ export default function CreateTeamForm({ onCancel, onSuccess }: CreateTeamFormPr
           value={formData.name}
           onChange={(e) => setFormData({ ...formData, name: e.target.value })}
           placeholder="Enter team name..."
-          disabled={submitting}
+          disabled={createTeamMutation.isPending}
         />
         {errors.name && (
           <p className="text-danger-red text-xs mt-1">{errors.name}</p>
@@ -106,7 +105,7 @@ export default function CreateTeamForm({ onCancel, onSuccess }: CreateTeamFormPr
           onChange={(e) => setFormData({ ...formData, tag: e.target.value.toUpperCase() })}
           placeholder="e.g., APEX"
           maxLength={4}
-          disabled={submitting}
+          disabled={createTeamMutation.isPending}
         />
         <p className="text-xs text-gray-500 mt-1">Max 4 characters</p>
         {errors.tag && (
@@ -124,7 +123,7 @@ export default function CreateTeamForm({ onCancel, onSuccess }: CreateTeamFormPr
           value={formData.description}
           onChange={(e) => setFormData({ ...formData, description: e.target.value })}
           placeholder="Describe your team's goals and racing style..."
-          disabled={submitting}
+          disabled={createTeamMutation.isPending}
         />
         {errors.description && (
           <p className="text-danger-red text-xs mt-1">{errors.description}</p>
@@ -150,17 +149,17 @@ export default function CreateTeamForm({ onCancel, onSuccess }: CreateTeamFormPr
         <Button
           type="submit"
           variant="primary"
-          disabled={submitting}
+          disabled={createTeamMutation.isPending}
           className="flex-1"
         >
-          {submitting ? 'Creating Team...' : 'Create Team'}
+          {createTeamMutation.isPending ? 'Creating Team...' : 'Create Team'}
         </Button>
         {onCancel && (
           <Button
             type="button"
             variant="secondary"
             onClick={onCancel}
-            disabled={submitting}
+            disabled={createTeamMutation.isPending}
           >
             Cancel
           </Button>
@@ -168,4 +167,4 @@ export default function CreateTeamForm({ onCancel, onSuccess }: CreateTeamFormPr
       </div>
     </form>
   );
-}
+}