Ignite Módulo 2 desafio 1: Criando um hook de carrinho de compras

Segundo desafio do curso Ignite trilha ReactJS da Rocketseat - Modulo 1.

💻 Sobre o desafio

Essa será uma aplicação onde o principal objetivo é criar um hook de carrinho de compras. Tendo acesso a duas páginas, um componente e um hook para implementar as funcionalidades pedidas nesse desafio:

• Adicionar um novo produto ao carrinho;
• Remover um produto do carrinho;
• Alterar a quantidade de um produto no carrinho;
• Cálculo dos preços sub-total e total do carrinho;
• Validação de estoque;
• Exibição de mensagens de erro;

O que deve ser feito

• components/Header/index.tsx

Você deve receber o array cart do hook useCart e mostrar em tela a quantidade de produtos distintos adicionados ao carrinho. Dessa forma, se o carrinho possui 4 unidades do item A e 1 unidade do item B o valor a ser mostrado é 2 itens.

• pages/Home/index.tsx

Você deve renderizar os produtos buscados da fake API em tela com as informações de título, imagem, preço e quantidade adicionada ao carrinho. Por fim, é preciso implementar a funcionalidade de adicionar o produto escolhido ao carrinho ao clicar no botão `ADICIONAR AO CARRINHO`.

• cartItemsAmount: Deve possuir as informações da quantidade de cada produto no carrinho. Sugerimos criar um objeto utilizando reduce onde a chave representa o id do produto e o valor a quantidade do produto no carrinho. Exemplo: se você possuir no carrinho um produto de id 1 e quantidade 4 e outro produto de id 2 e quantidade 3, o objeto ficaria assim:

  {
    1: 4,
    2: 3
  }

• loadProducts: Deve buscar os produtos da Fake API e formatar o preço utilizando o helper utils/format;

• handleAddProduct: Deve adicionar o produto escolhido ao carrinho.

• pages/Cart/index.tsx

Você deve renderizar uma tabela com a imagem, título, preço unitário, quantidade de unidades e preço subtotal de cada produto no carrinho. Além disso, também é preciso renderizar o preço total do carrinho. Por fim, é preciso implementar as funcionalidades dos botões de decrementar, incrementar e remover o produto do carinho.

Nesse arquivo, temos cinco pontos importantes a serem implementados:

• cartFormatted: Deve formatar o carrinho adicionando os campos priceFormatted (preço do produto) e subTotal (preço do produto multiplicado pela quantidade) ambos devidamente formatados com o utils/format;

• total: Deve possuir a informação do valor total do carrinho devidamente formatado com o utils/format;

• handleProductIncrement: Deve aumentar em 1 unidade a quantidade do produto escolhido ao carrinho;

• handleProductDecrement: Deve diminuir em 1 unidade a quantidade do produto escolhido ao carrinho, onde o valor mínimo é 1 (nesse caso o botão deve estar desativado);

• handleRemoveProduct: Deve remover o produto escolhido do carrinho.

• hooks/useCart.tsx

Apesar de não retornar diretamente nenhuma renderização de elementos na interface como os outros arquivos, esse é o coração do desafio. Ele é responsável por:

• hook useCart;
• context CartProvider;
• manipular localStorage;
• exibir toasts.

Então é aqui que você vai implementar as funcionalidades que serão utilizadas pelo restante do app. Os principais pontos são:

• cart: Deve verificar se existe algum registro com o valor @RocketShoes:cart e retornar esse valor caso existir. Caso contrário, retornar um array vazio.
• addProduct: Deve adicionar um produto ao carrinho. Porém, é preciso verificar algumas coisas:
  • O valor atualizado do carrinho deve ser perpetuado no localStorage utilizando o método setItem.
  • Caso o produto já exista no carrinho, não se deve adicionar um novo produto repetido, apenas incrementar em 1 unidade a quantidade;
  • Verificar se existe no estoque a quantidade desejada do produto. Caso contrário, utilizar o método error da react-toastify com a seguinte mensagem:

  toast.error('Quantidade solicitada fora de estoque');

• Capturar utilizando trycatch os erros que ocorrerem ao longo do método e, no catch, utilizar o método error da react-toastify com a seguinte mensagem:

  toast.error('Erro na adição do produto');

• removeProduct: Deve remover um produto do carrinho. Porém, é preciso verificar algumas coisas:

  • O valor atualizado do carrinho deve ser perpetuado no localStorage utilizando o método setItem.
  • Capturar utilizando trycatch os erros que ocorrerem ao longo do método e, no catch, utilizar o método error da react-toastify com a seguinte mensagem:

  toast.error('Erro na remoção do produto');

• updateProductAmount: Deve atualizar a quantidade de um produto no carrinho. Porém, é preciso verificar algumas coisas:

  • O valor atualizado do carrinho deve ser perpetuado no localStorage utilizando o método setItem.
  • Se a quantidade do produto for menor ou igual a zero, sair da função updateProductAmount instantaneamente.
  • Verificar se existe no estoque a quantidade desejada do produto. Caso contrário, utilizar o método error da react-toastify com a seguinte mensagem:

  toast.error('Quantidade solicitada fora de estoque');

• Capturar utilizando trycatch os erros que ocorrerem ao longo do método e, no catch, utilizar o método error da react-toastify com a seguinte mensagem:

  toast.error('Erro na alteração de quantidade do produto');

Como deve ficar a aplicação ao final?

Link para vídeo demonstrativo: Clique aqui.

🧬 Técnologias utilizadas

Este projeto foi desenvolvido utilizando as seguintes tecnologias:

• React
• Json-server
• TypeScript
• localStorage API
• React-Toastfy

💻 Pré-requisitos

Antes de começar, verifique se você atendeu aos seguintes requisitos:

• Você instalou a versão estável mais recente de Node
• Você instalou a versão mais recente de Yarn

🚀 Instalando

Clone o repositório:

$ git clone git@github.com:xDouglas90/ignite-react-mod2-challenge-1.git

• Entre na pasta do repositório clonado e no terminal:

$ yarn install ou npm install
$ yarn server ou npm run server
$ yarn start ou npm start

☕ Utilizando a aplicação

Agora basta abrir em um navegador: http://localhost:8080/, para visualizar a aplicação funcionando.

Para visualizar o conteúdo da Fake API: http://localhost:3333/

📝 License

Este projeto está sob a licença MIT. Veja mais detalhes no arquivo LICENSE.