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:

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:

💻 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.