Conversation
…er-dom), componentes de paginas e rotas
adicionado dependencias (axios, styled components, material ui e rout…
tela inicial
Criando estado global e tema
adicionado componente header
paginas de add e editar endereço
Finalização do Layout da Page Perfil
inputs controlados e validação dos campos das paginas com endereço
Criação do Card de restaurantes e Estilização da barra de pesquisa
aplicando estado global de input da pesquisa
adicionando página de busca
Renderizando o botão do header por props
iniciado mock da pagina carrinho
finalizado mock do carrinho
validações de signUp
resolvendo CSS dos forms
criando lógica de adicionar ao carrinho
pagina de erro
Corrigindo responsividade da tela de login
…ver, ajustando renderização da página do carrinho
endereço do usuario no carrinho e pedido em andamento
submeter pedido com status 200
finalizando o pedido em andamento
Limpando consoles e usando usePortectedPage
Adicionando Componente de Loading e arrumando alguns detalhes de renderização
tirando verificação de token que não deu certo
pdarvas
left a comment
pdarvas
left a comment
There was a problem hiding this comment.
Pessoal, o trabalho de vocês tá super bem feito! Tudo que eu testei funciona super bem, o layout em geral tá muito bem feito e o código tá ótimo!
Eu deixei alguns comentários de sugestão de melhoria pra vocês. Tentei ir um pouco mais fundo, por ser o último projeto, e dar umas dicas a mais.
De qualquer forma, queria dizer que fico muito orgulhoso de ver uma entrega como essa. É evidente o esforço que vocês colocaram nesse projeto e em todo o curso para conseguir chegar onde chegaram. Valorizem essa conquista, porque vocês merecem!
Continuem estudando e se dedicando, que vocês vão longe! E, claro, se precisar, estou por aqui!
Obrigado por toda a atenção e carinho!!
|
|
||
| export default function FeedMenu() { | ||
|
|
||
| const teste = [ |
There was a problem hiding this comment.
Evitem deixar dados de mock no código. Imagino que esses dados deveriam vir da API.
| const [categoriesArray, setCategoriesArray] = useState([]) | ||
|
|
||
| teste.map(e=> { | ||
| const position = categoriesArray.findIndex((item) => item === e.category) | ||
|
|
||
| if (position === -1) { | ||
| setCategoriesArray([...categoriesArray, e.category]) | ||
| } | ||
| }) |
There was a problem hiding this comment.
Não há a necessidade de categoriesArray ser um estado, pois ele é computado com base no array de produtos. A lógica poderia ser a mesma, só que não há necessidade de colocar num estado, pode ser uma variável comum.
Além disso, uma forma mais efetiva de se fazer isso (não ensinada durante o curso) seria usar um Set, estrutura de dados semelhante ao Array, mas que não permite repetição.
Segue a documentação sobre: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Set
E uma possibilidade de como fazer isso usando ele:
// Mapeia pra um array somente com as categorias
const categories = teste.map(product => product.category)
// Utiliza o Set pra remover duplicados
const uniqueCategories = [...new Set(categories)]| useEffect(() => { | ||
| if( props.page === "home") { | ||
| setFill({home: "#E8222E", cart: "#B8B8B8" , avatar: "#B8B8B8"}) | ||
| } else if (props.page === "cart") { | ||
| setFill({home: "#B8B8B8", cart: "#E8222E" , avatar: "#B8B8B8"}) | ||
| } else if (props.page === "profile") { | ||
| setFill({home: "#B8B8B8", cart: "#B8B8B8" , avatar: "#E8222E"}) | ||
| } | ||
|
|
||
| },[] ) | ||
|
|
||
|
|
||
|
|
||
| const selectHomeIcon = () => { | ||
| setFill({home: "#E8222E", cart: "#B8B8B8" , avatar: "#B8B8B8"}) | ||
| goToHomePage(history) | ||
| } |
There was a problem hiding this comment.
Se props.page estiver nas dependências do useEffect, essa função do useEffect vai rodar toda vez que ele mudar. Assim, não é necessário chamar o setFill manualmente cada vez que for mudar a página.
|
|
||
| const submitForm = (e) => { | ||
| e.preventDefault() | ||
| resetState() //resetando os inputs// |
There was a problem hiding this comment.
Do ponto de vista de experiência, ficou estranho o form sendo limpo antes de enviar o formulário.
Normalmente, esperamos a resposta do servidor pra limpar o formulário. Nesse caso, como a página é trocada, nem teria necessidade de fazer isso também.
| setters.setCarrinho({}) | ||
| return null | ||
| } | ||
| setters.setCarrinho({"restaurante": states.restaurante, "pedido": novoPedido}) |
There was a problem hiding this comment.
Não há a necessidade de aspas na chave dos objetos, mas funciona sem problemas.
| const renderRestaurantInfo = () => { | ||
| const frete = Number(states.restaurante.shipping).toFixed(2) | ||
| return ( | ||
| <RestaurantInfo> | ||
| <img src={states.restaurante.logoUrl} alt={`${states.restaurante.name} logo`} /> | ||
| <h2>{states.restaurante.name}</h2> | ||
| <p>{states.restaurante.category}</p> | ||
| <div> | ||
| <span>{`${states.restaurante.deliveryTime} min`}</span> | ||
| <span> {`Frete R$${frete}`}</span> | ||
| </div> | ||
| <p>{states.restaurante.address}</p> | ||
| </RestaurantInfo> | ||
| ) | ||
| } |
There was a problem hiding this comment.
Extrair para componente
| return ( | ||
| <MealsContainer> | ||
| <TypeTitle>{categoria}</TypeTitle> | ||
|
|
||
| {(states.restaurante.products).map(item => { | ||
| if (item.category === categoria) { | ||
| return ( | ||
| <ItemCard | ||
| key={item.id} | ||
| idPedido={item.id} | ||
| img={item.photoUrl} | ||
| name={item.name} | ||
| ingredientes={item.description} | ||
| valor={Number(item.price).toFixed(2)} | ||
| /> | ||
| ) | ||
| } | ||
| })} | ||
| </MealsContainer> |
There was a problem hiding this comment.
Extrair para componente
| } | ||
|
|
||
| const filteredArray = listaDeRestaurantes.restaurants.filter(e => { | ||
| return e.name.toLowerCase().includes(states.searchInput.toLowerCase()) || e.category.toLowerCase().includes(states.searchInput.toLowerCase()) |
There was a problem hiding this comment.
Duas lógicas repetidas, que poderiam ser extraídas pra uma única função:
const compareStrings = (s1, s2) => s1.toLowerCase().includes(s2.searchInput.toLowerCase())e utilizada:
return compareStrings(e.name, states.searchInput) || compareStrings(e.category, states.searchInput)| <Header pageName={"Busca"}/> | ||
| <SearchBar onclick={"off"}/> | ||
| {states.searchInput === "" ? <p className={classes.searchPlaceholder}>Busque por nome de Restaurante</p> | ||
| : (arrayMap[0]? arrayMap : <p className={classes.searchPlaceholder}>Não encontramos :(</p>) } |
There was a problem hiding this comment.
Melhor do que verificar se a primeira posição do array existe é verificar se o seu tamanho é 0:
arrayMap.length > 0 ? ...| } | ||
|
|
||
|
|
||
| export const order = (body, history, setLoading, id, setCarrinho) =>{ |
There was a problem hiding this comment.
Normalmente é uma boa prática que exista um verbo no nome da função, descrevendo o que ela faz.
Nesse caso, por exemplo, acho que createOrder seria melhor!
6 participants
No description provided.