feat: update user functionality

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

@@ -1,10 +1,13 @@
 'use client';
 
+import { useRouter } from 'next/navigation';
+
 import { Loader } from 'lucide-react';
 import { Controller, 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 { Input } from '@documenso/ui/primitives/input';
 import { Label } from '@documenso/ui/primitives/label';
 import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
@@ -13,7 +16,8 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 import { FormErrorMessage } from '../../../../../components/form/form-error-message';
 
 export default function UserPage({ params }: { params: { id: number } }) {
-  const toast = useToast();
+  const { toast } = useToast();
+  const router = useRouter();
 
   const result = trpc.profile.getUser.useQuery(
     {
@@ -24,6 +28,15 @@ export default function UserPage({ params }: { params: { id: number } }) {
     },
   );
 
+  const roles = result.data?.roles;
+  let rolesArr: string[] = [];
+
+  if (roles) {
+    rolesArr = Object.values(roles);
+  }
+
+  const { mutateAsync: updateUserMutation } = trpc.admin.updateUser.useMutation();
+
   const {
     register,
     control,
@@ -31,10 +44,44 @@ export default function UserPage({ params }: { params: { id: number } }) {
     formState: { errors, isSubmitting },
   } = useForm();
 
-  console.log(result.data);
-
   const onSubmit = async (data) => {
     console.log(data);
+
+    // const submittedRoles = data.roles
+    //   .split(',')
+    //   .map((role: string) => role.trim())
+    //   .map((role: string) => role.toUpperCase());
+
+    // const dbRoles = JSON.stringify(Role);
+
+    // const roleExists = submittedRoles.some((role: string) => dbRoles.includes(role));
+    // console.log('roleExists', roleExists);
+
+    // console.log('db roles', dbRoles);
+
+    try {
+      await updateUserMutation({
+        id: Number(result.data?.id),
+        name: data.name,
+        email: data.email,
+        roles: data.roles,
+      });
+
+      router.refresh();
+
+      toast({
+        title: 'Profile updated',
+        description: 'Your profile has been updated.',
+        duration: 5000,
+      });
+    } catch (e) {
+      console.log(e);
+      toast({
+        title: 'Error',
+        description: 'An error occurred while updating your profile.',
+        variant: 'destructive',
+      });
+    }
   };
 
   return (
@@ -45,17 +92,30 @@ export default function UserPage({ params }: { params: { id: number } }) {
           <Label htmlFor="name" className="text-muted-foreground">
             Name
           </Label>
-          <Input placeholder={result.data?.name} type="text" register={'name'} />
+          <Input placeholder={result.data?.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 placeholder={result.data?.email} type="text" register={'email'} />
+          <Input placeholder={result.data?.email} {...register('email')} />
           <FormErrorMessage className="mt-1.5" error={errors.email} />
         </div>
-        <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>
+        {/* <div>
           <Label htmlFor="signature" className="text-muted-foreground">
             Signature
           </Label>
@@ -74,7 +134,8 @@ export default function UserPage({ params }: { params: { id: number } }) {
             />
             <FormErrorMessage className="mt-1.5" error={errors.signature} />
           </div>
-        </div>
+        </div> */}
+
         <div className="mt-4">
           <Button type="submit" disabled={isSubmitting}>
             {isSubmitting && <Loader className="mr-2 h-5 w-5 animate-spin" />}