Aplicando React Hook Form nos formulários

[rafaverde]

Para os dois formulários nessa aplicação vamos usar o RHF, para controlar o fluxo de dados. Vamos instalar o RHF e o zod para validar e criar os schemas dos forms, e o @hookform/resolvers para interpretear o schema em Typescript, começando pelo fomulário de query das transações.

npm i react-hook-form zod @hookform/resolvers

import { MagnifyingGlass } from "phosphor-react"
import { SearchFormContainer } from "./styles"
import { useForm } from "react-hook-form"
import * as z from "zod"
import { zodResolver } from "@hookform/resolvers/zod"

const searchFormSchema = z.object({
  query: z.string(),
})

type SearchFormInputs = z.infer<typeof searchFormSchema>

export function SearchForm() {
  const { register, handleSubmit } = useForm<SearchFormInputs>({
    resolver: zodResolver(searchFormSchema)
  })

  function handleSearchTransactions() {}

  return (
    <SearchFormContainer onSubmit={handleSubmit(handleSearchTransactions)}>
      <input
        type="text"
        placeholder="Busque por transações..."
        {...register("query")}
      />

      <button type="submit">
        <MagnifyingGlass size={20} />
        Buscar
      </button>
    </SearchFormContainer>
  )
}

Depois de configurado, a função de handle vai receber os dados do form na execução do submit.

function handleSearchTransactions(data: SearchFormInputs) {
    console.log(data)
  }

Dentro do useForm, temos uma pripriedade que contém variáveis que podemos usar para ações do nosso formulário. Podemos usar aqui de dentro do formState o estado isSubmitting, que é um booleano, para desabilitar o botão de search, evitando que o user fique clicando várias vezes enquanto consulta. Vamos simular uma espera para testar o botão teporariamente, dessa forma:

...

  async function handleSearchTransactions(data: SearchFormInputs) {
    await new Promise((resolve) => setTimeout(resolve, 2000))

    console.log(data)
  }

  return (
    <SearchFormContainer onSubmit={handleSubmit(handleSearchTransactions)}>
      <input
        type="text"
        placeholder="Busque por transações..."
        {...register("query")}
      />

      <button type="submit" disabled={isSubmitting}>
        <MagnifyingGlass size={20} />
        Buscar
      </button>
    </SearchFormContainer>
  )
}

[rafaverde]

Legal!

[rafaverde]

https://github.com/rafaverde/dtMoney/commit/041bb46f87abb2b288f539e641bd574c5adaa416