add user

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

@@ -1,4 +1,12 @@
-import { Link } from 'react-router'
+import type { Route } from './+types'
+
+import { isValidCPF } from '@brazilian-utils/brazilian-utils'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useForm } from 'react-hook-form'
+import { PatternFormat } from 'react-number-format'
+import { Link, useFetcher } from 'react-router'
+import { toast } from 'sonner'
+import { z } from 'zod'
 
 import {
   Breadcrumb,
@@ -8,6 +16,7 @@ import {
   BreadcrumbPage,
   BreadcrumbSeparator
 } from '@repo/ui/components/ui/breadcrumb'
+import { Button } from '@repo/ui/components/ui/button'
 import {
   Card,
   CardContent,
@@ -15,8 +24,91 @@ import {
   CardHeader,
   CardTitle
 } from '@repo/ui/components/ui/card'
+import { Checkbox } from '@repo/ui/components/ui/checkbox'
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage
+} from '@repo/ui/components/ui/form'
+import { Input } from '@repo/ui/components/ui/input'
+import { Label } from '@repo/ui/components/ui/label'
+import { Spinner } from '@repo/ui/components/ui/spinner'
+
+import { useWorksapce } from '@/components/workspace-switcher'
+import { HttpMethod, request as req } from '@/lib/request'
+import { useEffect } from 'react'
+
+const isName = (name: string) => name && name.includes(' ')
+
+export const formSchema = z.object({
+  name: z
+    .string()
+    .trim()
+    .nonempty('Digite um nome')
+    .refine(isName, { message: 'Nome inválido' }),
+  email: z.email('Email inválido').trim().toLowerCase(),
+  cpf: z
+    .string('CPF obrigatório')
+    .refine(isValidCPF, { message: 'CPF inválido' })
+})
+
+export type Schema = z.infer<typeof formSchema>
+
+export function meta({}: Route.MetaArgs) {
+  return [{ title: 'Adicionar colaborador' }]
+}
+
+export async function action({ request, context }: Route.ActionArgs) {
+  const body = await request.json()
+  const r = await req({
+    url: `users`,
+    headers: new Headers({ 'Content-Type': 'application/json' }),
+    method: HttpMethod.POST,
+    body: JSON.stringify(body),
+    request,
+    context
+  })
+
+  console.log(r)
+
+  if (!r.ok) {
+    const error = await r.json().catch(() => ({}))
+    return { ok: false, error }
+  }
+
+  return { ok: true }
+}
 
 export default function Route() {
+  const fetcher = useFetcher()
+  const { activeWorkspace } = useWorksapce()
+  const form = useForm({
+    resolver: zodResolver(formSchema)
+  })
+  const { handleSubmit, control, formState, reset } = form
+
+  const onSubmit = async (user: Schema) => {
+    await fetcher.submit(JSON.stringify({ user, org: activeWorkspace }), {
+      method: 'post',
+      encType: 'application/json'
+    })
+  }
+
+  useEffect(() => {
+    if (fetcher.data?.ok) {
+      toast.success('O colaborador foi adicionado')
+      return reset()
+    }
+
+    switch (fetcher.data?.error?.type) {
+      case 'UserConflictError':
+        toast.error('O colaborador já foi vinculado anteriormente')
+    }
+  }, [fetcher.data])
+
   return (
     <div className="space-y-2.5">
       <Breadcrumb>
@@ -33,17 +125,97 @@ export default function Route() {
         </BreadcrumbList>
       </Breadcrumb>
 
-      <div className="lg:max-w-2xl mx-auto space-y-2.5">
-        <Card>
-          <CardHeader>
-            <CardTitle className="text-2xl">Adicionar colaborador</CardTitle>
-            <CardDescription>
-              Siga os passos abaixo para cadastrar um novo colaborador
-            </CardDescription>
-          </CardHeader>
+      <div className="lg:max-w-2xl mx-auto">
+        <Form {...form}>
+          <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-2xl">
+                  Adicionar colaborador
+                </CardTitle>
+                <CardDescription>
+                  Siga os passos abaixo para cadastrar um novo colaborador
+                </CardDescription>
+              </CardHeader>
 
-          <CardContent></CardContent>
-        </Card>
+              <CardContent className="space-y-4">
+                <FormField
+                  control={control}
+                  name="name"
+                  defaultValue=""
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Nome</FormLabel>
+                      <FormControl>
+                        <Input {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <div className="space-y-2.5">
+                  <FormField
+                    control={control}
+                    name="email"
+                    defaultValue=""
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>Email</FormLabel>
+                        <FormControl>
+                          <Input {...field} />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                  <div className="flex items-center gap-2">
+                    <Checkbox id="terms" tabIndex={-1} />
+                    <Label htmlFor="terms">
+                      Usar um email fornecido pela plataforma.
+                    </Label>
+                  </div>
+                </div>
+
+                <FormField
+                  control={control}
+                  name="cpf"
+                  defaultValue=""
+                  render={({ field: { onChange, ref, ...props } }) => (
+                    <FormItem>
+                      <FormLabel>CPF</FormLabel>
+                      <FormControl>
+                        <PatternFormat
+                          format="###.###.###-##"
+                          mask="_"
+                          placeholder="___.___.___-__"
+                          customInput={Input}
+                          getInputRef={ref}
+                          onValueChange={({ value }) => {
+                            onChange(value)
+                          }}
+                          {...props}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </CardContent>
+            </Card>
+
+            <div className="flex justify-end">
+              <Button
+                type="submit"
+                className="cursor-pointer"
+                disabled={formState.isSubmitting}
+              >
+                {formState.isSubmitting && <Spinner />}
+                Adicionar
+              </Button>
+            </div>
+          </form>
+        </Form>
       </div>
     </div>
   )