di usage in website

apps/website/components/drivers/CreateDriverForm.tsx

@@ -4,7 +4,7 @@ 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 { useCreateDriver } from '@/hooks/driver/useCreateDriver';
 
 interface FormErrors {
   name?: string;
@@ -16,8 +16,7 @@ interface FormErrors {
 
 export default function CreateDriverForm() {
   const router = useRouter();
-  const { driverService } = useServices();
-  const [loading, setLoading] = useState(false);
+  const createDriverMutation = useCreateDriver();
   const [errors, setErrors] = useState<FormErrors>({});
   
   const [formData, setFormData] = useState({
@@ -50,37 +49,37 @@ export default function CreateDriverForm() {
   const handleSubmit = async (e: FormEvent) => {
     e.preventDefault();
     
-    if (loading) return;
+    if (createDriverMutation.isPending) return;
     
     const isValid = await validateForm();
     if (!isValid) return;
     
-    setLoading(true);
-    
-    try {
-      const bio = formData.bio.trim();
+    const bio = formData.bio.trim();
+    const displayName = formData.name.trim();
+    const parts = displayName.split(' ').filter(Boolean);
+    const firstName = parts[0] ?? displayName;
+    const lastName = parts.slice(1).join(' ') || 'Driver';
 
-      const displayName = formData.name.trim();
-      const parts = displayName.split(' ').filter(Boolean);
-      const firstName = parts[0] ?? displayName;
-      const lastName = parts.slice(1).join(' ') || 'Driver';
-
-      await driverService.completeDriverOnboarding({
+    createDriverMutation.mutate(
+      {
         firstName,
         lastName,
         displayName,
         country: formData.country.trim().toUpperCase(),
         ...(bio ? { bio } : {}),
-      });
-
-      router.push('/profile');
-      router.refresh();
-    } catch (error) {
-      setErrors({
-        submit: error instanceof Error ? error.message : 'Failed to create profile'
-      });
-      setLoading(false);
-    }
+      },
+      {
+        onSuccess: () => {
+          router.push('/profile');
+          router.refresh();
+        },
+        onError: (error) => {
+          setErrors({
+            submit: error instanceof Error ? error.message : 'Failed to create profile'
+          });
+        },
+      }
+    );
   };
 
   return (
@@ -98,7 +97,7 @@ export default function CreateDriverForm() {
           error={!!errors.name}
           errorMessage={errors.name}
           placeholder="Alex Vermeer"
-          disabled={loading}
+          disabled={createDriverMutation.isPending}
         />
       </div>
 
@@ -114,7 +113,7 @@ export default function CreateDriverForm() {
           error={!!errors.name}
           errorMessage={errors.name}
           placeholder="Alex Vermeer"
-          disabled={loading}
+          disabled={createDriverMutation.isPending}
         />
       </div>
 
@@ -131,7 +130,7 @@ export default function CreateDriverForm() {
           errorMessage={errors.country}
           placeholder="NL"
           maxLength={3}
-          disabled={loading}
+          disabled={createDriverMutation.isPending}
         />
         <p className="mt-1 text-xs text-gray-500">Use ISO 3166-1 alpha-2 or alpha-3 code</p>
       </div>
@@ -147,7 +146,7 @@ export default function CreateDriverForm() {
           placeholder="Tell us about yourself..."
           maxLength={500}
           rows={4}
-          disabled={loading}
+          disabled={createDriverMutation.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">
@@ -167,10 +166,10 @@ export default function CreateDriverForm() {
       <Button
         type="submit"
         variant="primary"
-        disabled={loading}
+        disabled={createDriverMutation.isPending}
         className="w-full"
       >
-        {loading ? 'Creating Profile...' : 'Create Profile'}
+        {createDriverMutation.isPending ? 'Creating Profile...' : 'Create Profile'}
         </Button>
       </form>
     </>