update profile

apps/admin.saladeaula.digital/app/routes/_.$orgid.users.$id._index/route.tsx

@@ -1,9 +1,12 @@
 import type { Route } from './+types/route'
 
+import { useEffect } from 'react'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { PatternFormat } from 'react-number-format'
-import { Link, useOutletContext } from 'react-router'
+import { useFetcher, Link, useOutletContext } from 'react-router'
+import { AlertCircleIcon } from 'lucide-react'
 import { useForm } from 'react-hook-form'
+import { toast } from 'sonner'
 
 import { Button } from '@repo/ui/components/ui/button'
 import {
@@ -24,24 +27,79 @@ import {
 import { Input } from '@repo/ui/components/ui/input'
 import { Spinner } from '@repo/ui/components/ui/spinner'
 import { type User } from '@repo/ui/routes/users/data'
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle
+} from '@repo/ui/components/ui/alert'
+import { request as req, HttpMethod } from '@repo/util/request'
 
 import { formSchema, type Schema } from '../_.$orgid.users.add/data'
 
+export async function action({ params, request, context }: Route.ActionArgs) {
+  const body = await request.json()
+  const r = await req({
+    url: `/users/${params.id}`,
+    method: HttpMethod.PATCH,
+    headers: new Headers({ 'Content-Type': 'application/json' }),
+    body: JSON.stringify(body),
+    request,
+    context
+  })
+
+  if (r.ok) {
+    return { ok: true }
+  }
+
+  return { ok: false, error: await r.json() }
+}
+
 export default function Route({}: Route.ComponentProps) {
   const { user } = useOutletContext() as { user: User }
+  const fetcher = useFetcher()
   const form = useForm({
     defaultValues: { ...user, given_email: false },
     resolver: zodResolver(formSchema)
   })
-  const { handleSubmit, control, formState } = form
+  const { handleSubmit, control, formState, setError } = form
 
   const onSubmit = async (data: Schema) => {
-    console.log(data)
+    await fetcher.submit(JSON.stringify({ id: user.id, ...data }), {
+      method: 'post',
+      encType: 'application/json'
+    })
   }
 
+  useEffect(() => {
+    if (fetcher.data?.ok) {
+      toast.success('O colaborador foi atualizado.')
+      return
+    }
+
+    switch (fetcher.data?.error?.type) {
+      case 'RateLimitExceededError':
+        toast.error('Seu limite diário de atualizações foi atingido.')
+      case 'CPFConflictError':
+        setError('cpf', { message: 'CPF já está em uso' })
+    }
+
+    console.log(fetcher.data?.error)
+  }, [fetcher.data, setError])
+
   return (
     <Form {...form}>
       <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+        {user?.rate_limit_exceeded && (
+          <Alert variant="destructive">
+            <AlertCircleIcon />
+            <AlertTitle>Limite diário de atualizações atingido.</AlertTitle>
+            <AlertDescription>
+              Tente novamente a partir de{' '}
+              {getDaysRemaining(user.rate_limit_exceeded.ttl)}
+            </AlertDescription>
+          </Alert>
+        )}
+
         <Card>
           <CardHeader>
             <CardTitle className="text-2xl">Editar colaborador</CardTitle>
@@ -115,20 +173,34 @@ export default function Route({}: Route.ComponentProps) {
                 </FormItem>
               )}
             />
+
+            <Button
+              type="submit"
+              className="cursor-pointer"
+              disabled={formState.isSubmitting}
+            >
+              {formState.isSubmitting && <Spinner />}
+              Editar
+            </Button>
           </CardContent>
         </Card>
-
-        <div className="flex justify-end">
-          <Button
-            type="submit"
-            className="cursor-pointer"
-            disabled={formState.isSubmitting}
-          >
-            {formState.isSubmitting && <Spinner />}
-            Editar
-          </Button>
-        </div>
       </form>
     </Form>
   )
 }
+
+function getDaysRemaining(ttl: number) {
+  const date = new Date(ttl * 1000)
+
+  const day = date.toLocaleDateString('pt-BR', {
+    day: '2-digit',
+    month: '2-digit'
+  })
+
+  const time = date.toLocaleTimeString('pt-BR', {
+    hour: '2-digit',
+    minute: '2-digit'
+  })
+
+  return `${day} às ${time}`
+}