chore: implement pr feedback

apps/web/src/app/(dashboard)/admin/users/[id]/page.tsx

@@ -3,21 +3,23 @@
 import { useRouter } from 'next/navigation';
 
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Loader } from 'lucide-react';
-import { Controller, useForm } from 'react-hook-form';
+import { useForm } from 'react-hook-form';
 
 import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
 import { Combobox } from '@documenso/ui/primitives/combobox';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
 import { Input } from '@documenso/ui/primitives/input';
-import { Label } from '@documenso/ui/primitives/label';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import { FormErrorMessage } from '../../../../../components/form/form-error-message';
-import {
-  TUserFormSchema,
-  ZUserFormSchema,
-} from '../../../../../providers/admin-user-profile-update.types';
+import { TUserFormSchema, ZUserFormSchema } from '~/providers/admin-user-profile-update.types';
 
 export default function UserPage({ params }: { params: { id: number } }) {
   const { toast } = useToast();
@@ -34,21 +36,11 @@ export default function UserPage({ params }: { params: { id: number } }) {
 
   const user = result.data;
 
-  const roles = user?.roles;
-  let rolesArr: string[] = [];
-
-  if (roles) {
-    rolesArr = Object.values(roles);
-  }
+  const roles = user?.roles ?? [];
 
   const { mutateAsync: updateUserMutation } = trpc.admin.updateUser.useMutation();
 
-  const {
-    register,
-    control,
-    handleSubmit,
-    formState: { errors, isSubmitting },
-  } = useForm<TUserFormSchema>({
+  const form = useForm<TUserFormSchema>({
     resolver: zodResolver(ZUserFormSchema),
     values: {
       name: user?.name ?? '',
@@ -85,42 +77,69 @@ export default function UserPage({ params }: { params: { id: number } }) {
   return (
     <div>
       <h2 className="text-4xl font-semibold">Manage {user?.name}'s profile</h2>
-      <form className="mt-6 flex w-full flex-col gap-y-4" onSubmit={handleSubmit(onSubmit)}>
-        <div>
-          <Label htmlFor="name" className="text-muted-foreground">
-            Name
-          </Label>
-          <Input defaultValue={user?.name ?? ''} type="text" {...register('name')} />
-          <FormErrorMessage className="mt-1.5" error={errors.name} />
-        </div>
-        <div>
-          <Label htmlFor="email" className="text-muted-foreground">
-            Email
-          </Label>
-          <Input defaultValue={user?.email} type="email" {...register('email')} />
-          <FormErrorMessage className="mt-1.5" error={errors.email} />
-        </div>
-        <div className="flex flex-col gap-2">
-          <Label htmlFor="roles" className="text-muted-foreground">
-            User roles
-          </Label>
-          <Controller
-            control={control}
-            name="roles"
-            render={({ field: { onChange } }) => (
-              <Combobox listValues={rolesArr} onChange={(values: string[]) => onChange(values)} />
-            )}
-          />
-          <FormErrorMessage className="mt-1.5" error={errors.roles} />
-        </div>
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)}>
+          <fieldset className="mt-6 flex w-full flex-col gap-y-4">
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel required className="text-muted-foreground">
+                    Name
+                  </FormLabel>
+                  <FormControl>
+                    <Input type="text" {...field} value={field.value ?? ''} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="email"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel required className="text-muted-foreground">
+                    Email
+                  </FormLabel>
+                  <FormControl>
+                    <Input type="text" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
 
-        <div className="mt-4">
-          <Button type="submit" disabled={isSubmitting}>
-            {isSubmitting && <Loader className="mr-2 h-5 w-5 animate-spin" />}
-            Update user
-          </Button>
-        </div>
-      </form>
+            <FormField
+              control={form.control}
+              name="roles"
+              render={({ field: { onChange } }) => (
+                <FormItem>
+                  <fieldset className="flex flex-col gap-2">
+                    <FormLabel required className="text-muted-foreground">
+                      Roles
+                    </FormLabel>
+                    <FormControl>
+                      <Combobox
+                        listValues={roles}
+                        onChange={(values: string[]) => onChange(values)}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </fieldset>
+                </FormItem>
+              )}
+            />
+
+            <div className="mt-4">
+              <Button type="submit" loading={form.formState.isSubmitting}>
+                Update user
+              </Button>
+            </div>
+          </fieldset>
+        </form>
+      </Form>
     </div>
   );
 }