felipemotarocha / fullstackweek-store Goto Github PK

Objetivo:

• Criar botão "⭐ Favorito" no componente produto.
• Adicionar produto a tabela "Wishlist"

Após a finalização do evento verifiquei que o deploy correspondente aos dois ultimos commits realizados falhou com o erro

ReferenceError: localStorage is not defined
 at __WEBPACK_DEFAULT_EXPORT__ (/vercel/path0/.next/server/chunks/240.js:1:14186)

No momento da build ao gerar as páginas estáticas ocorre o erro pois o objeto localStorage ainda é undefined.

Correção:

No arquivo src/providers/cart.tsx:

Alterar o valor inicial do state products. Trocar de

const [products, setProducts] = useState<CartProduct[]>(
    JSON.parse(localStorage.getItem("@fsw-store/cart-products") || "[]")
  );

Para:

const [products, setProducts] = useState<CartProduct[]>([]);

Adicionar um useEffect com array de dependencias vazio, dessa forma só executará uma vez no carregamento da página:

useEffect(() => {
    setProducts(
      JSON.parse(localStorage.getItem("@fsw-store/cart-products") || "[]"),
    );
  }, []);

A solução acima já foi testada em fork deste repositório.

Os pedidos não estão atualizando para PAYMENT_CONFIRMED

Contruir a estrutura da lista de produtos de estoque conforme Figma

• Tabela deve armazenar as listas de desejos dos usuários.
• Um usuário pode ter várias listas de desejos.
• Uma lista de desejos pode ter vários produtos

A sessão não está pegando o id correto do usuário, e os pedidos estão apenas vindo o de todos os usuários.

Mesmo deslogado o pedidos aparecem na página

[CORE] Sistema de Busca

• Usuário deve conseguir buscar produtos por nome/categoria
• Ver: https://www.prisma.io/docs/concepts/components/prisma-client/full-text-search#postgresql

Lista de Desejos

• Usuário deve conseguir adicionar produtos à uma lista de desejos
• [FUTURO] Usuário pode criar várias listas (colocar nomes etc.)

Sistema de Avaliações

• Usuário deve conseguir avaliar um produto (nota de 1 a 5)
• Outros usuários devem conseguir visualizar as avaliações de um produto

Sistema de Comentários

• Usuário deve conseguir comentar em um produto
• Outros usuários podem marcar um comentário com "Gostei" ou "Não gostei"
• [FUTURO] Usuário deve conseguir anexar foto ao comentário

Cálculo de Frete

• Usuário deve conseguir calcular o preço e tempo do frete
• Origem dos produtos será única (São Paulo por ex.)

Cupom de Desconto

• Cupons de desconto podem ser cadastrados no dashboard
• Usuário deve conseguir usar cupons de desconto

Perfumarias

• Animações de fade-in, slide-in etc.
• Dark/light mode
• Newsletter (Resend)

Construir o menu para adicionar novo produto ao estoque conforme desenvolvido no Figma:

Depende da issue #32

Com estrutura definida aqui #20

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

A lista de desejos deve ter:

• Nome

• Quando o usuário visualizar um produto, ele deve ter a opção de adicioná-lo a uma lista de desejo.
• Ao clicar no botão "Adicionar a lista de desejo", abrir um Dialog com as listas do usuário.
• Ao clicar em uma lista, adicionar o produto à ela
• Exibir uma mensagem de sucesso ao adicionar
• Um produto não pode ser adicionado a mesma lista mais de uma vez

• Essa tela deve exibir todas as listas de desejos do usuário.
• Criar componente WishListItem

Para que o localstorage funciona bem precisamos verificar se o window não é undifined então crie um hook useLocalStorage.ts:

import { useEffect, useState } from "react";

export function useLocalStorage<T>(key: string, initialValue: T | (() => T)) {
  const [value, setValue] = useState<T>(() => {
    // Perform localStorage action

    const jsonValue =
      typeof window !== "undefined" ? localStorage.getItem(key) : "[]";
    if (jsonValue != null) return JSON.parse(jsonValue);

    if (typeof initialValue === "function") {
      return (initialValue as () => T)();
    } else {
      return initialValue;
    }
  });

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue] as [typeof value, typeof setValue];
}

depois mudifique o carrinho cart.ts:

const [products, setProducts] = useLocalStorage<CartProduct[]>( "@fsw-store/cart-products", [], );

SÓ ISSO SIMPLES

Construir a tela de dashboard de controle de estoque conforme desenvolvido no Figma: