change basic form to form context

src/components/form/profile-form.tsx

@@ -1,18 +1,17 @@
+import { useAppForm } from '@/hooks/use-app-form';
 import { authClient } from '@/lib/auth-client';
 import { m } from '@/paraglide/messages';
 import { uploadProfileImage } from '@/service/profile.api';
 import { ProfileInput, profileUpdateSchema } from '@/service/profile.schema';
 import { UserCircleIcon } from '@phosphor-icons/react';
-import { useForm } from '@tanstack/react-form';
 import { useQueryClient } from '@tanstack/react-query';
 import { useRef } from 'react';
 import { toast } from 'sonner';
 import { useAuth } from '../auth/auth-provider';
 import AvatarUser from '../avatar/avatar-user';
 import RoleBadge from '../avatar/role-badge';
-import { Button } from '../ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '../ui/card';
-import { Field, FieldError, FieldGroup, FieldLabel } from '../ui/field';
+import { Field, FieldGroup, FieldLabel } from '../ui/field';
 import { Input } from '../ui/input';
 
 const defaultValues: ProfileInput = {
@@ -25,7 +24,7 @@ const ProfileForm = () => {
   const { data: session, isPending } = useAuth();
   const queryClient = useQueryClient();
 
-  const form = useForm({
+  const form = useAppForm({
     defaultValues: {
       ...defaultValues,
       name: session?.user?.name || '',
@@ -102,58 +101,20 @@ const ProfileForm = () => {
           <FieldGroup>
             <div className="grid grid-cols-3 gap-3">
               <AvatarUser className="h-20 w-20" textSize="2xl" />
-              <form.Field
-                name="image"
-                children={(field) => {
-                  const isInvalid =
-                    field.state.meta.isTouched && !field.state.meta.isValid;
-                  return (
-                    <Field data-invalid={isInvalid} className="col-span-2">
-                      <FieldLabel htmlFor={field.name}>Avatar</FieldLabel>
-                      <Input
-                        type="file"
-                        id={field.name}
-                        name={field.name}
-                        accept=".jpg, .jpeg, .png, .webp"
-                        ref={fileInputRef}
-                        onChange={(e) =>
-                          field.handleChange(e.target.files?.[0])
-                        }
-                        aria-invalid={isInvalid}
-                      />
-                      {isInvalid && (
-                        <FieldError errors={field.state.meta.errors} />
-                      )}
-                    </Field>
-                  );
-                }}
-              />
+              <form.AppField name="image">
+                {(field) => (
+                  <field.FileField
+                    label="Avatar"
+                    className="col-span-2"
+                    accept=".jpg, .jpeg, .png, .webp"
+                    onChange={(e) => field.handleChange(e.target.files?.[0])}
+                  />
+                )}
+              </form.AppField>
             </div>
-            <form.Field
-              name="name"
-              children={(field) => {
-                const isInvalid =
-                  field.state.meta.isTouched && !field.state.meta.isValid;
-                return (
-                  <Field data-invalid={isInvalid}>
-                    <FieldLabel htmlFor={field.name}>
-                      {m.profile_form_name()}
-                    </FieldLabel>
-                    <Input
-                      id={field.name}
-                      name={field.name}
-                      value={field.state.value}
-                      onBlur={field.handleBlur}
-                      onChange={(e) => field.handleChange(e.target.value)}
-                      aria-invalid={isInvalid}
-                    />
-                    {isInvalid && (
-                      <FieldError errors={field.state.meta.errors} />
-                    )}
-                  </Field>
-                );
-              }}
-            />
+            <form.AppField name="name">
+              {(field) => <field.TextField label={m.profile_form_name()} />}
+            </form.AppField>
             <Field>
               <FieldLabel htmlFor="name">{m.profile_form_email()}</FieldLabel>
               <Input
@@ -171,7 +132,9 @@ const ProfileForm = () => {
               </div>
             </Field>
             <Field>
-              <Button type="submit">{m.ui_update_btn()}</Button>
+              <form.AppForm>
+                <form.SubscribeButton label={m.ui_update_btn()} />
+              </form.AppForm>
             </Field>
           </FieldGroup>
         </form>