felipemotarocha / fullstackweek-store

https://fullstackweek-store.vercel.app
243 stars 82 forks source link

format prices #2

Open MatheusAltrao opened 1 year ago

MatheusAltrao commented 1 year ago

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

felipemotarocha commented 1 year ago

Acho uma boa solução! Topa abrir um PR? :)

PatrickEN-dev commented 1 year ago

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!"