PR de correção. Não precisa mergeear. #46
Conversation
separei as pastas que trabalharemos
fiz o global state, rotas e autenticacao
… user com os posts de login e signup.
Criada a pagina de Login, useForm, a pasta contants com a baseURL e o…
Redirecionamento temporizado da Tela Inicial
ajustes na pagina de login e router, aguardando a pagina de signup pa…
Criação de Header
Tela inicial
Criação de FeedPage e CardFeed
Logo animado
Projeto dia2
Acrescentei as duas tags que faltavam na tela de perfil.
cartPage e fixes
Correções de layout do header.
Correção footer
useFormModal
…orém ela não some quando não tem pedido
Projeto dia5
placeorder
| <FooterContainer> | ||
| {history.location.pathname==='/feed' | ||
| ? | ||
| <ButtonStyled onClick={()=>goToFeedPage(history)}> | ||
| <HomeOutlinedIcon style={{color:'#5cb646'}}/> | ||
| </ButtonStyled> | ||
| : | ||
| <ButtonStyled onClick={()=>goToFeedPage(history)}> | ||
| <HomeOutlinedIcon /> | ||
| </ButtonStyled> | ||
| } | ||
| {history.location.pathname.includes('/carrinho') | ||
| ? | ||
| <ButtonStyled onClick={()=>goToCart(history,states.restaurante)}> | ||
| <ShoppingCartOutlinedIcon style={{color:'#5cb646'}}/> | ||
| </ButtonStyled> | ||
| : | ||
| <ButtonStyled onClick={()=>goToCart(history,states.restaurante)}> | ||
| <ShoppingCartOutlinedIcon /> | ||
| </ButtonStyled> | ||
| } | ||
| {history.location.pathname==='/perfil' | ||
| ? | ||
| <ButtonStyled onClick={()=>goToProfilePage(history)}> | ||
| <PersonOutlineOutlinedIcon style={{color:'#5cb646'}}/> | ||
| </ButtonStyled> | ||
| : | ||
| <ButtonStyled onClick={()=>goToProfilePage(history)}> | ||
| <PersonOutlineOutlinedIcon /> | ||
| </ButtonStyled> | ||
| } | ||
| </FooterContainer> |
There was a problem hiding this comment.
esse trecho de componente se repete três vezes, em cada if e else if. Talvez fosse legal criar um componente só pra isso, passando por props as partes variáveis.
| {history.location.pathname === '/feed' | ||
| ? | ||
| <HeaderContainer> | ||
| <TitleContainer> | ||
| <PageTitle>FutureEats</PageTitle> | ||
| </TitleContainer> | ||
| </HeaderContainer> | ||
| : | ||
| "" | ||
| } | ||
| {history.location.pathname.includes('/restaurantes') | ||
| ? | ||
| <HeaderContainer> | ||
| <ButtonStyled onClick={props.goBack}><ArrowBackIosIcon /></ButtonStyled> | ||
| <TitleContainer style={{ marginLeft: 70 }}> | ||
| <PageTitle>Restaurante</PageTitle> | ||
| </TitleContainer> | ||
| </HeaderContainer> | ||
| : | ||
| "" | ||
| } | ||
| {history.location.pathname === '/perfil' | ||
| ? | ||
| <HeaderContainer> | ||
| <TitleContainer> | ||
| <PageTitle>Meu Perfil</PageTitle> | ||
| </TitleContainer> | ||
| </HeaderContainer> | ||
| : | ||
| "" | ||
| } | ||
|
|
||
| {history.location.pathname==='/carrinho' | ||
| ? | ||
| <HeaderContainer> | ||
| <TitleContainer> | ||
| <PageTitle>Meu Carrinho</PageTitle> | ||
| </TitleContainer> | ||
| </HeaderContainer> | ||
| : | ||
| "" | ||
| } | ||
| {history.location.pathname==='/editprofile' | ||
| ? | ||
| <HeaderContainer> | ||
| <ButtonStyled onClick={() => goToProfilePage(history)}><ArrowBackIosIcon/></ButtonStyled> | ||
| <TitleContainer style={{marginLeft:70}}> | ||
| <PageTitle>Editar</PageTitle> | ||
| </TitleContainer> | ||
| </HeaderContainer> | ||
| : | ||
| "" | ||
| } | ||
| {history.location.pathname==='/editaddress' | ||
| ? | ||
| <HeaderContainer> | ||
| <ButtonStyled onClick={() => goToProfilePage(history)}><ArrowBackIosIcon/></ButtonStyled> | ||
| <TitleContainer style={{marginLeft:70}}> | ||
| <PageTitle>Meu Endereço</PageTitle> | ||
| </TitleContainer> | ||
| </HeaderContainer> | ||
| : | ||
| "" | ||
| } |
There was a problem hiding this comment.
esse trecho de componente se repete três vezes, em cada if e else if. Talvez fosse legal criar um componente só pra isso, passando por props as partes variáveis.
| const axiosConfig = { | ||
| headers: { | ||
| auth: localStorage.getItem('token') | ||
| } | ||
| } |
There was a problem hiding this comment.
Isolar a axiosConfig dessa forma, nesse caso, não é uma boa. Nos casos em que a configuração do headers necessita de um valor do localStorage, que pode mudar com o tempo, é melhor isolar tudo em uma função e chamar a função sempre que for usar a axiosConfig, dessa forma:
const generateAxiosConfig = () =>{
const axiosConfig = {
headers: { auth: window.localStorage.getItem("token") }
}
return axiosConfig
}
| export const Address = (body, history) => { | ||
|
|
||
| axios | ||
| .put(`${baseUrl}/address`, body, axiosConfig) | ||
|
|
||
| .then ((response)=>{ | ||
| localStorage.setItem('token', response.data.token) | ||
| alert("Endereço cadastrado com sucesso!") | ||
| goToFeedPage(history) | ||
|
|
||
| }) | ||
|
|
||
| .catch((error)=>{ | ||
| alert("Deu ruim rapá!") | ||
| console.log(error) | ||
| }) | ||
|
|
||
|
|
||
| } |
There was a problem hiding this comment.
A requisição de adicionar endereço não retorna um token pra ser setado no localStorage. Ou seja, vcs não precisam da linha 54, por que o token já é setado pela requisição de cadastro.
| export const EditAddress = (body, history) => { | ||
|
|
||
| axios | ||
| .put(`${baseUrl}/address`, body, axiosConfig) | ||
|
|
||
| .then ((response)=>{ | ||
| localStorage.setItem('token', response.data.token) | ||
| alert("Endereço atualizado com sucesso!") | ||
| goToProfilePage(history) | ||
|
|
||
| }) | ||
|
|
||
| .catch((error)=>{ | ||
| alert("Deu ruim rapá!") | ||
| console.log(error) | ||
| }) | ||
|
|
||
|
|
||
| } |
There was a problem hiding this comment.
A requisição de editar endereço também não retorna um token pra ser setado, ou seja, vale o mesmo comentário feito acima
| const GlobalState = (props) =>{ | ||
| const [restaurante,setRestaurante] = useState({}) | ||
| const [cart,setCart] = useState([]) | ||
| const [profile, setProfile] = useState([]) | ||
| const [idProduct, setIdProduct] = useState("") | ||
| const [orderBody,setOrderBody] = useState([]) | ||
|
|
||
| const states = {restaurante,cart,profile,idProduct,orderBody} | ||
| const setters = {setRestaurante,setCart,setProfile,setIdProduct,setOrderBody} | ||
|
|
||
|
|
||
| const data = {states,setters} | ||
|
|
||
| return( | ||
| <GlobalStateContex.Provider value={data}> | ||
| {props.children} | ||
| </GlobalStateContex.Provider> | ||
| ) | ||
| } |
There was a problem hiding this comment.
Legal vcs terem usado o estado global! Parabéns!!
| function useRequestData(url,initialState){ | ||
| const [data,setData] = useState(initialState) | ||
|
|
||
| useEffect(()=>{ | ||
| axios.get(url,{headers:{auth:localStorage.getItem("token")}}).then(response =>{ | ||
| setData(response.data) | ||
| }).catch(error =>{ | ||
| console.log(error) | ||
| }) | ||
| },[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
| <BrowserRouter> | ||
| <Switch> | ||
| <Route exact path="/"> | ||
| <InitialPage /> | ||
| </Route> | ||
| <Route exact path="/signup"> | ||
| <SignupPage /> | ||
| </Route> | ||
| <Route exact path="/login"> | ||
| <LoginPage /> | ||
| </Route> | ||
| <Route exact path="/feed"> | ||
| <FeedPage /> | ||
| </Route> | ||
|
|
||
| <Route exact path="/carrinho/:id"> | ||
| <CartPage/> | ||
|
|
||
|
|
||
| </Route> | ||
| <Route exact path="/restaurantes/:id"> | ||
| <RestaurantPage /> | ||
| </Route> | ||
| <Route exact path="/perfil"> | ||
| <ProfilePage /> | ||
| </Route> | ||
| <Route exact path="/editprofile"> | ||
| <EditProfilePage /> | ||
| </Route> | ||
| <Route exact path="/endereco"> | ||
| <AddressPage /> | ||
| </Route> | ||
| <Route exact path ='/editaddress'> | ||
| <EditAddressPage /> | ||
| </Route> | ||
| <Route> | ||
| <ErrorPage /> | ||
| </Route> | ||
| </Switch> | ||
| </BrowserRouter> |
There was a problem hiding this comment.
Identação aqui não tá boa. Isso atrapalha na leitura das rótas e do código em geral.
|
Oi, pessoal! Fiz uns comentários ao longo do código. Peço que deem uma olhada! Parabéns pelo trabalho e pelo esforço! |
pedro-severo
requested review from
FabioJordao97,
joyceroberta,
RafaelOliveira215 and
rafagf77
PR de correção. Não precisa mergeear.
http://dumont-labe-food3.surge.sh/