PR de correção. Não precisa mergeear. #41
Conversation
criando-parte-estatica
HomePage
Parte da Criação da pagina de Restaurante
footer-restaurant
componente header
…rte de home também.
dia1-vanessa
Tive que mexer aqui porque tava dando erro.
Header corrigido- esta em um componente que pode ser chamado para as …
Telas de Login e cadastro em fase de conclusão
Correção no página signup.js e router.js
Correção na página de erro
Tentando fazer a requisição get
Fiz mais alguns ajustes que precisava
Dados da api
Ajustes no coordinator e Router
tentando integrar os detalhes de restaurantes
Dia5 integracao
Funções de perfil e histórico de pedidos funcionando novamente
styledFeed&Card
Tentando fazer a parte de busca
finalizandostyled
| <Route exact path="/"> | ||
| <HomePage /> | ||
| </Route> |
There was a problem hiding this comment.
Não precisava colocar a página inicial como uma página home só com o logo da rappi. Ou se for fazer isso, coloque um botão pra levar para a página de Login. Pois do jeito que tá, o usuário cai numa página com o logo, mas sem nenhuma forma de navegar até a página de Login ou Signup.
| if(response.data.user.hasAddress) { | ||
| localStorage.setItem("token", response.data.token); | ||
| alert(`Olá ${response.data.user.name}! Estou te redirecionando para o feed`) | ||
| goToBuy(history) | ||
|
|
||
| } else { |
There was a problem hiding this comment.
Gostei da ideia dessa verificação para impedir que usuários sem endereço cadastrado vão para o feed!
| export function useRequestData(url, initialState) { | ||
| const [data, setData] = useState(initialState); | ||
|
|
||
| useEffect(() => { | ||
| const token = localStorage.getItem("token"); | ||
|
|
||
| axios | ||
| .get(url, { | ||
| headers: { | ||
| auth: token, | ||
| }, | ||
| }) | ||
| .then((response) => { | ||
| setData(response.data.restaurants); | ||
| }) | ||
| .catch((err) => { | ||
| console.log(err.message); | ||
| }); | ||
| }, [url]); | ||
|
|
||
| return data; | ||
| } |
There was a problem hiding this comment.
Nesse caso de usar o hook useRequestData, é uma boa criar uma função para pegar os dados do banco de dados sempre que vcs precisarem. Isso é bem importante para atualizar os dados de uma página sem precisar de dar refresh no site. Ficaria dessa forma o hook:
export const useRequestData = (url,initialState)=>{
const [data,setData]=useState(initialState)
const getData = () => {
axios.get(url,headers).then((res)=>{
setData(res.data)
}).catch((err)=>{
console.log(err.message)
})
}
useEffect(()=>{
getData()
},[getData])
return [data, getData]
}
Com isso, na hora de usar a função, vcs sempre poderão chamar, além do data em si, a função que atualiza o data, para atualizar as informações na tela sempre que precisarem
| {restaurants.map((restaurant) => { | ||
| return ( | ||
|
|
||
| <FeedCard | ||
|
|
||
| restaurant = {restaurant} | ||
| key={restaurant.id} | ||
| id={restaurant.id} | ||
| category={restaurant.category} | ||
| name={restaurant.name} | ||
| logoUrl={restaurant.logoUrl} | ||
| description={restaurant.description} | ||
| deliveryTime={restaurant.deliveryTime} | ||
| shipping={restaurant.shipping} | ||
|
|
||
| /> |
There was a problem hiding this comment.
É legal que nessas renderização de coisas que vem do banco de dados seja colocado algum componente loading, para que o usuário tenha uma melhor experiência. No caso, para usar esse componente loading, basta fazer uma renderização condicional, verificando se o array que vem do banco de dados já chegou ou não da requisição.
| useEffect (() => { | ||
| getOrdersHistory () | ||
| },[]) | ||
|
|
||
| const getOrdersHistory = () => { | ||
| axios.get(`${BaseUrl}/orders/history`, | ||
| { | ||
| headers:{ | ||
| auth:localStorage.getItem ("token") | ||
| } | ||
| }) | ||
| .then((response) => { | ||
| setOrderHistory(response.data) | ||
| }) | ||
| .catch((error)=>{ | ||
| console.log(error) | ||
| }) | ||
| } |
There was a problem hiding this comment.
Aqui, dava pra usar o hook useRequestData criado por vcs.
|
|
||
| function RestaurantCard(props) { | ||
|
|
||
| console.log(props.Photo) |
There was a problem hiding this comment.
Não se esqueçam de tirar os console.log que ficam ao longo do código.
| export const useProtectPage = () => { | ||
| const history = useHistory(); | ||
|
|
||
| useEffect(() => { | ||
| const token = localStorage.getItem("token"); | ||
|
|
||
| if (!token) { | ||
| goToLoginPage(history) // Se não tem token, vai redirecionar para a página de login | ||
| } | ||
| else { | ||
| goToBuy(history) // Para continuar logado, caso tenha token | ||
| } | ||
| }, [history]); | ||
| }; |
There was a problem hiding this comment.
É melhor separar as lógicas de proteção de páginas em dois hooks, um o useProtectPage e outro chamado useUnprotectPage
| export const logOut = (history) => { | ||
| localStorage.removeItem('token') | ||
| history.push('/login') | ||
| } |
There was a problem hiding this comment.
Legal terem criado essa função de logout aqui nas funções de rotas. Boa ideia!
|
Oi, pessoal!! Parabéns pelo trabalho! O trabalho ficou com alguns bugzinhos de código e de UX. Mas em trabalhos complexos assim e com muita gente, e levando em conta que vcs tiveram só uma semana pra fazer (muito pouco tempo!), era esperado. Fiz alguns comentários ao longo do código, peço que deem uma olhada. E mesmo assim, vcs fizeram um excelente trabalho. Deu pra ver o esforço e comprometimento de vcs! Parabéns! |
pedro-severo
requested review from
luverdinelli,
Rafaela-Quinzel,
rodrfx,
RPCaetano and
Vanessasz
PR de correção. Não precisa mergeear.