finish register

apps/id.saladeaula.digital/app/routes/register/index.tsx

@@ -1,11 +1,11 @@
 import type { Route } from '../+types'
 
-import { useRequest } from 'ahooks'
 import { PatternFormat } from 'react-number-format'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useState } from 'react'
 import { CheckCircle2Icon } from 'lucide-react'
 import { useForm } from 'react-hook-form'
+import { redirect, useFetcher } from 'react-router'
 
 import { Button } from '@repo/ui/components/ui/button'
 import { Checkbox } from '@repo/ui/components/ui/checkbox'
@@ -19,14 +19,15 @@ import {
 } from '@repo/ui/components/ui/form'
 import { Input } from '@repo/ui/components/ui/input'
 import { Label } from '@repo/ui/components/ui/label'
-
-import { Cpf } from './cpf'
-import { formSchema, type Schema, RegisterContext, type User } from './data'
 import {
   Alert,
   AlertDescription,
   AlertTitle
 } from '@repo/ui/components/ui/alert'
+import { Spinner } from '@repo/ui/components/ui/spinner'
+
+import { Cpf } from './cpf'
+import { formSchema, type Schema, RegisterContext, type User } from './data'
 
 export function meta({}: Route.MetaArgs) {
   return [{ title: 'Criar conta · EDUSEG®' }]
@@ -39,32 +40,27 @@ export async function action({ request, context }: Route.ActionArgs) {
   const r = await fetch(issuerUrl.toString(), {
     method: 'POST',
     headers: new Headers({ 'Content-Type': 'application/json' }),
-    body: JSON.stringify(body)
+    body: JSON.stringify(body),
+    signal: request.signal
   })
 
-  console.log(await r.json())
+  throw redirect('/authorize', { headers: r.headers })
 }
 
 export default function Signup({}: Route.ComponentProps) {
+  const fetcher = useFetcher()
   const [show, setShow] = useState(false)
   const [user, setUser] = useState<User | null>(null)
   const form = useForm({
     resolver: zodResolver(formSchema)
   })
-  const { control, handleSubmit, formState } = form
-  const { runAsync } = useRequest(
-    async (user) => {
-      return await fetch(`/register`, {
-        method: 'POST',
-        headers: new Headers({ 'Content-Type': 'application/json' }),
-        body: JSON.stringify(user)
-      })
-    },
-    { manual: true }
-  )
+  const { control, handleSubmit, formState, setError } = form
 
   const onSubmit = async (data: Schema) => {
-    await runAsync({ ...user, ...data })
+    await fetcher.submit(JSON.stringify({ ...user, ...data }), {
+      method: 'post',
+      encType: 'application/json'
+    })
   }
 
   return (
@@ -187,9 +183,14 @@ export default function Signup({}: Route.ComponentProps) {
 
             <Button
               type="submit"
-              className="w-full cursor-pointer"
+              className="w-full cursor-pointer relative overflow-hidden"
               disabled={formState.isSubmitting}
             >
+              {formState.isSubmitting && (
+                <div className="absolute bg-lime-500 inset-0 flex items-center justify-center">
+                  <Spinner />
+                </div>
+              )}
               Criar conta
             </Button>
           </form>