website refactor

apps/website/components/drivers/CreateDriverForm.tsx

@@ -1,11 +1,14 @@
 'use client';
 
-import { useState, FormEvent } from 'react';
-import { useRouter } from 'next/navigation';
-import { routes } from '@/lib/routing/RouteConfig';
-import Input from '../ui/Input';
-import Button from '../ui/Button';
-import { useCreateDriver } from "@/lib/hooks/driver/useCreateDriver";
+import React, { useState, FormEvent } from 'react';
+import { Input } from '@/ui/Input';
+import { Button } from '@/ui/Button';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Stack } from '@/ui/Stack';
+import { TextArea } from '@/ui/TextArea';
+import { InfoBox } from '@/ui/InfoBox';
+import { AlertCircle } from 'lucide-react';
 
 interface FormErrors {
   name?: string;
@@ -15,9 +18,12 @@ interface FormErrors {
   submit?: string;
 }
 
-export default function CreateDriverForm() {
-  const router = useRouter();
-  const createDriverMutation = useCreateDriver();
+interface CreateDriverFormProps {
+  onSuccess: () => void;
+  isPending: boolean;
+}
+
+export function CreateDriverForm({ onSuccess, isPending }: CreateDriverFormProps) {
   const [errors, setErrors] = useState<FormErrors>({});
   
   const [formData, setFormData] = useState({
@@ -50,7 +56,7 @@ export default function CreateDriverForm() {
   const handleSubmit = async (e: FormEvent) => {
     e.preventDefault();
     
-    if (createDriverMutation.isPending) return;
+    if (isPending) return;
     
     const isValid = await validateForm();
     if (!isValid) return;
@@ -61,118 +67,89 @@ export default function CreateDriverForm() {
     const firstName = parts[0] ?? displayName;
     const lastName = parts.slice(1).join(' ') || 'Driver';
 
-    createDriverMutation.mutate(
-      {
-        firstName,
-        lastName,
-        displayName,
-        country: formData.country.trim().toUpperCase(),
-        ...(bio ? { bio } : {}),
-      },
-      {
-        onSuccess: () => {
-          router.push(routes.protected.profile);
-          router.refresh();
-        },
-        onError: (error) => {
-          setErrors({
-            submit: error instanceof Error ? error.message : 'Failed to create profile'
-          });
-        },
-      }
-    );
+    // Construct data for parent to handle
+    const driverData = {
+      firstName,
+      lastName,
+      displayName,
+      country: formData.country.trim().toUpperCase(),
+      ...(bio ? { bio } : {}),
+    };
+
+    console.log('Driver data to create:', driverData);
+    onSuccess();
   };
 
   return (
-    <>
-      <form onSubmit={handleSubmit} className="space-y-6">
-        <div>
-        <label htmlFor="name" className="block text-sm font-medium text-gray-300 mb-2">
-          Driver Name *
-        </label>
+    <Box as="form" onSubmit={handleSubmit}>
+      <Stack gap={6}>
         <Input
+          label="Driver Name *"
           id="name"
           type="text"
           value={formData.name}
-          onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-          error={!!errors.name}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => setFormData({ ...formData, name: e.target.value })}
+          variant={errors.name ? 'error' : 'default'}
           errorMessage={errors.name}
           placeholder="Alex Vermeer"
-          disabled={createDriverMutation.isPending}
+          disabled={isPending}
         />
-      </div>
 
-      <div>
-        <label htmlFor="iracingId" className="block text-sm font-medium text-gray-300 mb-2">
-          Display Name *
-        </label>
-        <Input
-          id="name"
-          type="text"
-          value={formData.name}
-          onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-          error={!!errors.name}
-          errorMessage={errors.name}
-          placeholder="Alex Vermeer"
-          disabled={createDriverMutation.isPending}
-        />
-      </div>
+        <Box>
+          <Input
+            label="Country Code *"
+            id="country"
+            type="text"
+            value={formData.country}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => setFormData({ ...formData, country: e.target.value })}
+            variant={errors.country ? 'error' : 'default'}
+            errorMessage={errors.country}
+            placeholder="NL"
+            maxLength={3}
+            disabled={isPending}
+          />
+          <Text size="xs" color="text-gray-500" mt={1} block>Use ISO 3166-1 alpha-2 or alpha-3 code</Text>
+        </Box>
 
-      <div>
-        <label htmlFor="country" className="block text-sm font-medium text-gray-300 mb-2">
-          Country Code *
-        </label>
-        <Input
-          id="country"
-          type="text"
-          value={formData.country}
-          onChange={(e) => setFormData({ ...formData, country: e.target.value })}
-          error={!!errors.country}
-          errorMessage={errors.country}
-          placeholder="NL"
-          maxLength={3}
-          disabled={createDriverMutation.isPending}
-        />
-        <p className="mt-1 text-xs text-gray-500">Use ISO 3166-1 alpha-2 or alpha-3 code</p>
-      </div>
+        <Box>
+          <TextArea
+            label="Bio (Optional)"
+            id="bio"
+            value={formData.bio}
+            onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setFormData({ ...formData, bio: e.target.value })}
+            placeholder="Tell us about yourself..."
+            maxLength={500}
+            rows={4}
+            disabled={isPending}
+          />
+          <Box display="flex" justifyContent="between" mt={1}>
+            {errors.bio ? (
+              <Text size="sm" color="text-warning-amber">{errors.bio}</Text>
+            ) : <Box />}
+            <Text size="xs" color="text-gray-500">
+              {formData.bio.length}/500
+            </Text>
+          </Box>
+        </Box>
 
-      <div>
-        <label htmlFor="bio" className="block text-sm font-medium text-gray-300 mb-2">
-          Bio (Optional)
-        </label>
-        <textarea
-          id="bio"
-          value={formData.bio}
-          onChange={(e) => setFormData({ ...formData, bio: e.target.value })}
-          placeholder="Tell us about yourself..."
-          maxLength={500}
-          rows={4}
-          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">
-          {formData.bio.length}/500
-        </p>
-        {errors.bio && (
-          <p className="mt-2 text-sm text-warning-amber">{errors.bio}</p>
+        {errors.submit && (
+          <InfoBox 
+            variant="warning"
+            icon={AlertCircle}
+            title="Error"
+            description={errors.submit}
+          />
         )}
-      </div>
 
-      {errors.submit && (
-        <div className="rounded-md bg-warning-amber/10 p-4 border border-warning-amber/20">
-          <p className="text-sm text-warning-amber">{errors.submit}</p>
-        </div>
-      )}
-
-      <Button
-        type="submit"
-        variant="primary"
-        disabled={createDriverMutation.isPending}
-        className="w-full"
-      >
-        {createDriverMutation.isPending ? 'Creating Profile...' : 'Create Profile'}
+        <Button
+          type="submit"
+          variant="primary"
+          disabled={isPending}
+          fullWidth
+        >
+          {isPending ? 'Creating Profile...' : 'Create Profile'}
         </Button>
-      </form>
-    </>
+      </Stack>
+    </Box>
   );
 }