PR de correção. Não precisa mergeear. - #58
pedro-severo wants to merge 133 commits into
Conversation
add pastas e alguns components
O nome da branch é loading, mas eu fiz a página de restaurante.
Adicionando AdressPage e CartPage
add login page
criando o formulário de cadastro
função para cadastro ok
EditProfilePage criada com forms, falta fazer a appbar e criar funções de API
estilização do loading em andamento
funcao login :)
criando feedpage, falta testar API e estilizar
adicionando função de adicionar endereço
criando o componente Snackbar
snackbar com as infos
estilização do feed e search ok
botão de contituar comprando funcionando, falta arrumar margem
bug de requisições de login e signup resolvido
add correções de estilo
função para fechar dialog
apenas para mudar de branch
cart limpo dps de pedir e snackbar certinho
| <Select required onChange={handleSelect} value={option} label="Quantidade"> | ||
| <option aria-label="None" disabled /> | ||
| <option value={1}>1</option> | ||
| <option value={2}>2</option> | ||
| <option value={3}>3</option> | ||
| <option value={4}>4</option> | ||
| <option value={5}>5</option> | ||
| <option value={6}>6</option> | ||
| <option value={7}>7</option> | ||
| <option value={8}>8</option> | ||
| <option value={9}>9</option> | ||
| <option value={10}>10</option> | ||
| </Select> |
There was a problem hiding this comment.
Acho que seria legal isolar esse select em um componente separado. Esse tipo de select é comum ser usado mais de uma vez no projeto, além de ser comum de aparecer em outros projetos. Isolando, vcs podem reaproveitar o componente criado.
|
|
||
| const FoodContainer = styled.div` | ||
| display:flex; | ||
| width: 360px; | ||
| max-width:360px; | ||
| height: 112px; | ||
| border-radius: 8px; | ||
| border: solid 1px #A9A9A9; | ||
| margin-top:10px; | ||
| ` | ||
|
|
||
| const Img = styled.img` | ||
| width: 90px; | ||
| /* width: 112px; */ | ||
| height: 112px; | ||
| margin-right:10px; | ||
| border-radius: 8px 0px 0px 8px; | ||
| margin: 0 16px 0 0; | ||
| /* object-fit: contain; */ | ||
| ` | ||
|
|
||
| const Title = styled.p` | ||
| width: 157px; | ||
| /* height: 18px; */ | ||
| margin: 10px 0px 0 1px; | ||
| font-family: Roboto; | ||
| font-size: 16px; | ||
| letter-spacing: -0.39px; | ||
| color: #5cb646; | ||
| ` | ||
| const Description = styled.p` | ||
| /* width: 120px; */ | ||
| /* height: 60px; */ | ||
| /* margin: 8px 16px 8px; */ | ||
| font-family: Roboto; | ||
| font-size: 12px; | ||
| letter-spacing: -0.29px; | ||
| color: var(--greyish); | ||
| ` | ||
| const Price = styled.h3` | ||
| width: 118px; | ||
| /* height: 19px; */ | ||
| margin: 0px 0px 0px 0px; | ||
| font-family: Roboto; | ||
| font-size: 16px; | ||
| letter-spacing: -0.39px; | ||
| color: #000000; | ||
| ` | ||
| const ButtonContainer = styled.div` | ||
| display:flex; | ||
| flex-direction:column; | ||
| align-items:flex-end; | ||
| justify-content:space-between; | ||
| margin: 1px 0 0 0px; | ||
| padding: 0 0 0 5px; | ||
| border-radius: 0px 8px 0px 8px; | ||
|
|
||
|
|
||
| ` | ||
| const ButtonAdd = styled.div` | ||
| width: 70px; | ||
| height: 25px; | ||
| margin: 75px 0 0 0; | ||
| padding: 5px 8px 5px 12px; | ||
| border-radius: 8px 0 8px 0; | ||
| border: solid 1px #5cb646; | ||
| color:#5cb646; | ||
| cursor: pointer; | ||
| ` | ||
| const ButtonRemove = styled.div` | ||
| width: 70px; | ||
| height: 25px; | ||
| /* margin: 0 0 0 45px; */ | ||
| padding: 5px 8px 5px 12px; | ||
| border-radius: 8px 0 8px 0; | ||
| border: solid 1px #e02020; | ||
| color:#e02020; | ||
| cursor: pointer; | ||
| ` | ||
| const Count = styled.div` | ||
| width: 15px; | ||
| height: 25px; | ||
| /* margin: 0x 0 0 0px; */ | ||
| padding: 3px 5px 6px 10px; | ||
| border-radius: 0px 8px 0px 8px; | ||
| border: solid 1px #5cb646; | ||
| color:#5cb646; | ||
|
|
||
| ` | ||
|
|
||
| const FoodCard = (props) => { |
There was a problem hiding this comment.
Isolem as constantes do styled-components.
| // import CardActions from '@material-ui/core/CardActions'; | ||
| import CardContent from '@material-ui/core/CardContent'; | ||
| import CardMedia from '@material-ui/core/CardMedia'; | ||
| // import Button from '@material-ui/core/Button'; |
There was a problem hiding this comment.
Não se esqueçam de apagar os códigos comentados e não usados no projeto.
| // const Image = styled(CardMedia)` | ||
| // width: 360px; | ||
| // height: 120px; | ||
| // ` |
There was a problem hiding this comment.
Vide comentário anterior hahaha
| return <MuiAlert elevation={5} variant="filled" {...props} />; | ||
| } | ||
|
|
||
| // fomos obrigada a usar useStyles pq deu erro ao inicializar com o styled |
There was a problem hiding this comment.
Normal! Quando se usa o material o estranho é não dar erro hahaha
| export const axiosConfig = { | ||
| headers: { auth: window.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:
export const generateAxiosConfig = () =>{
const axiosConfig = {
headers: { auth: window.localStorage.getItem("token") }
}
return axiosConfig
}
| export const useRequestData = (url, initialState) => { | ||
| const [data, setData] = useState(initialState) | ||
|
|
||
|
|
||
| useEffect(() => { | ||
| axios.get(url, { | ||
| headers: { | ||
| auth: window.localStorage.getItem("token") }, | ||
| }) | ||
| .then((response) => { | ||
| setData(response.data); | ||
| }) | ||
| .catch((erro) => { | ||
| console.log(erro); | ||
| }); | ||
| }, [url]) | ||
|
|
||
| return data; | ||
| } No newline at end of file |
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
|
Oi, meninas!! Parabéns pelo trabalho, ficou sensacional! 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. Nada que tira o excelente trabalho feito! Algumas coisas específicas para que vcs melhorem nos próximos projetos:
Mas como disse, nada que tira o excelente trabalho de vcs! Ficou muito bom! Vcs fecharam o módulo de fornt com chave de ouro! Parabéns!! |
PR de correção. Não precisa mergeear.
https://future-eats4-dumont.surge.sh/