Pawtastic form

Esse formulário segue a mesma estrutura que esse formulário aqui, dessa vez utilizando React, aproveitando componentes, estados, context, e error boundaries. Abaixo segue com algumas imagens do formulário.

Mobile

Ipad

Desktop

Funcionalidades

• Estado do formulário

  

  O estado do formulário foi separado em um hook próprio, e como mostrado acima, possui três estados, um com erros, outro com os valores, e outro para capturar o nome de valores alterados, que serão usados assim que setState guardar o valor do input (ação executada no useEffect), com a função validadeValues, que irá validar o valor recebido e armazenar o erro em errors caso haja algum.

  O useForm possui duas funções para cuidar da entrada dos inputs:

  

  A função handleChange cuida de inputs de texto e checkboxes.

  

  A função handleFile cuida de arquivos, no caso deste formulário uma imagem. E também impede o anexo de arquivos inválidos.

  Usando o useForm

  

  O executamos da mesma maneira do useState, com a diferença que é um objeto e não um array sendo desestruturado. Após passarmos os valores iniciais, recebemos de useForm, além de values e errors, o handleSubmit, handleChange e checkInputs (que verifica todos inputs da faze atual).

  

  Por fim, todos inputs recebem seus respectivos valores, e erros, caso possuam.

• Validação

  

  A função mais importante para a validação é a validInput que recebe apenas o nome do input, e pega a função de validação correspondente a esse input, e caso não possua uma, recebe uma função padrão, que serve para maioria dos inputs. Então repassa para a função o valor e o nome do input recebido. Dessa maneira a função pode ser reaproveitada, sendo usada para validar um único input, ou vários como é o caso do formulário, que é dividido em fazes. E antes de passar para uma próxima faze, todos inputs da faze atual são validados novamente, e caso um input possua um valor inválido, o usuário é impedido de seguir adiante.

• Fases do formulário

  Para dividir o formulário em fazes, utilizei do context, para prover um contexto geral, e evitar de passar props para os componentes que fazem uso da variável step. Criando um segundo hook useStep, qualquer componente pode fazer o uso do estado atual do formulário, tornando possível mostrar um progresso ao usuário no componente a esquerda (quando em desktop) e fazer a renderização condicional de fieldsets diferentes. O useStep também é utilizado por um terceiro componente, que faz a transição de imagens, que mudam conforme o formulário é avançado.