O gerenciamento de estado com a Context API do React é essencial e o foco neste projeto, onde é necessário guardar as informações que o usuário insere nos campos e exibi-las no resumo da compra, por exemplo.
Um hook customizado para formulário muito comum no React também pode ser aproveitado neste projeto para validar as informações com expressões regulares!
Como este projeto é um formulário de etapas e informações (estados) são setadas e mostradas em componentes diferentes, a Context API se tornou muito útil para guardar as informações escolhidas e exibi-las nas principais situações:
- quando o usuário volta para a etapa anterior;
- quando o usuário visualiza o resumo da "compra" na etapa final.
O hook customizado useForm, bastante comum no React, é muito útil para tornar os campos do formulários reativos e validar os campos caso seja necessário, podendo ser reutilizado em qualquer campo de texto e poupando bastante linhas de código.
A função a seguir faz parte do hook e é utilizada para a validação, onde a mesma é retornada na função do hook e pode ser utilizada para validar os campos na situação que for conveniente para o projeto:
const validate = () => {
if (!type) return true;
if (!value.length) {
setError("Este campo é obrigatório!");
return false;
} else if (types[type] && !value.match(types[type].regex)) {
setError(types[type].message);
return false;
} else {
setError(null);
return true;
}
}
Para aproveitar ainda mais o hook useForm, criei três regex com alguns padrões comuns para o formulário. As regex ficam em um objeto no mesmo arquivo do useForm hook e é utilizada na função mostrada anteriormente.
Os principais conceitos de regex que utilizei são:
- classes de caracteres
- âncoras
- quantificadores
- flags
const msg = (type) => `Por favor, digite um ${type} válido!`;
const types = {
name: {
regex: /^[a-zÀ-öù-Ź]+$/gi,
message: msg("nome"),
},
email: {
regex: /^[\w\-.]+@[a-z]+\.+[a-z]+(\.[a-z]+)?$/gi,
message: msg("e-mail"),
},
tel: {
regex: /^\(?(\d{2})?\)?\s?9\d{4}\s?-?\d{4}$/g,
message: msg("número de telefone"),
}
}