Open MatheusAltrao opened 1 year ago
Acho uma boa solução! Topa abrir um PR? :)
Eai Colega!
Queria te mostrar uma melhoria que fiz em nosso código. Criei uma função chamada formatPrice que é bem simples, mas muito útil. Ela é responsável por formatar preços em nosso aplicativo de uma maneira amigável.
Aqui está a função em JavaScript:
const formatPrice = (price: number): string => { if (isNaN(price)) { return "Preço inválido"; }
return new Intl.NumberFormat("pt-BR", { style: "currency", currency: "BRL", }).format(price); };
export default formatPrice; Explicação:
Verificação de Validação: A função começa verificando se o preço passado como argumento é um número válido usando isNaN(price). Se não for válido, ela retorna a mensagem "Preço inválido".
Formatação de Preço: Se o preço for válido, a função utiliza o objeto Intl.NumberFormat para formatar o preço de acordo com as convenções de moeda brasileira (BRL). Isso inclui a formatação correta do símbolo da moeda, separadores de milhar e casas decimais.
Vantagens:
Clareza e Legibilidade: A função formatPrice torna o código mais claro e fácil de entender, pois encapsula a lógica de formatação de preços em um único lugar.
Reutilização: Podemos usar essa função em diferentes partes do projeto sempre que precisarmos formatar preços, evitando repetir código.
Mensagens de Erro Amigáveis: A função lida com erros de entrada de forma elegante, retornando a mensagem "Preço inválido" quando necessário.
Internacionalização: A função é configurada para formatar preços de acordo com as convenções de moeda do Brasil (BRL), o que a torna adaptável a diferentes contextos e locais.
Estou planejando criar um Pull Request (PR) para adicionar essa função ao nosso projeto, pois ela tornará o código mais organizado e fácil de manter. Qualquer feedback ou sugestões são bem-vindos. Obrigado!"
Eu encontrei isso na doc do javascript https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
não precisamos usar nenhuma lib externa.
No nosso ProductItem passamos o nosso {product.totalPrice} e o {product.basePrice}, e se usarmos o intl vai ficar assim:
const formatedTotalPrice = new Intl.NumberFormat("pt-BR", { style: "currency", currency: "BRL", }).format(product.totalPrice);
const formatedBasePrice = new Intl.NumberFormat("BRL", { style: "currency", currency: "BRL", }).format(Number(product.basePrice));
e depois passar apenas a as variaveis no span assim: {formatedTotalPrice} {formatedBasePrice