From 1e60f85e07d872ead1d7336fe7708194c175a01a Mon Sep 17 00:00:00 2001 From: David Cruz Date: Tue, 3 Nov 2020 14:34:15 -0300 Subject: [PATCH] =?UTF-8?q?feature:=20inserido=20responsividade=20a=20apli?= =?UTF-8?q?ca=C3=A7=C3=A3o?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- debug.log | 1 + src/App.js | 2 -- src/components/Card/index.js | 9 +++++++++ src/components/Card/styled.js | 12 ++++++++++-- src/components/Modal/index.js | 7 +++++++ src/components/Modal/styled.js | 10 +++++++++- src/components/Select.js | 5 +---- src/pages/inicio/index.js | 23 +++++++++++++++++------ src/pages/inicio/styled.js | 3 +-- src/pages/pesquisar/index.js | 19 ++++++++++++++++--- src/pages/pesquisar/styled.js | 14 ++++++++------ src/pages/registrar/index.js | 17 ++++++++++++++++- src/pages/registrar/styled.js | 10 ++-------- src/routes.js | 5 ++++- 14 files changed, 101 insertions(+), 36 deletions(-) create mode 100644 debug.log diff --git a/debug.log b/debug.log new file mode 100644 index 0000000..b32ccaa --- /dev/null +++ b/debug.log @@ -0,0 +1 @@ +[1031/100656.336:ERROR:directory_reader_win.cc(43)] FindFirstFile: O sistema n�o pode encontrar o caminho especificado. (0x3) diff --git a/src/App.js b/src/App.js index 6bcfe4c..fc17521 100644 --- a/src/App.js +++ b/src/App.js @@ -1,6 +1,4 @@ import React from "react"; -import Inicio from "./pages/inicio"; -import Registrar from "./pages/registrar"; import Routes from "./routes"; import { GlobalStyle } from "./styles/global.styled"; diff --git a/src/components/Card/index.js b/src/components/Card/index.js index 1341bc1..b5a74fa 100644 --- a/src/components/Card/index.js +++ b/src/components/Card/index.js @@ -1,6 +1,15 @@ import React from "react"; import { Container } from "./styled"; +/** + * Componente card que renderiza um psicologo + * + * @param {*} imageUrl - url da image + * @param {*} nome - nome do psicologo + * @param {*} plano - tipo de plano + * @param {*} endereco - nome da rua + * + */ export default function Card({ imagemUrl, nome, plano, endereco, ...rest }) { return ( diff --git a/src/components/Card/styled.js b/src/components/Card/styled.js index cb8ec82..0600d0d 100644 --- a/src/components/Card/styled.js +++ b/src/components/Card/styled.js @@ -13,8 +13,10 @@ export const Container = styled.button` bottom: 180px; margin-left: auto; margin-right: auto; - width: 128px; - height: 128px; + width: 100%; + height: 100%; + max-height: 128px; + max-width: 128px; filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)); border-radius: 50%; } @@ -49,4 +51,10 @@ export const Container = styled.button` color: #333333; } } + + @media (max-width: 768px) { + img { + bottom: 200px; + } + } `; diff --git a/src/components/Modal/index.js b/src/components/Modal/index.js index 08d4ff8..3de88ba 100644 --- a/src/components/Modal/index.js +++ b/src/components/Modal/index.js @@ -2,6 +2,13 @@ import React from "react"; import { Container, Contato, Plano, Descricao, NomePsicologo } from "./styled"; import MaterialModal from "@material-ui/core/Modal"; +/** + * Componente modal que renderiza um psicologo selecionado pelo usuário + * + * @param {*} psicologo - objeto contendo os dados do psicologo + * @param {*} abrir - flag com status do modal + * @param {*} fecharModal - função que fecha o modal + */ export default function Modal({ psicologo, abrir, fecharModal }) { return ( { diff --git a/src/pages/inicio/index.js b/src/pages/inicio/index.js index a6ae3d3..7b79038 100644 --- a/src/pages/inicio/index.js +++ b/src/pages/inicio/index.js @@ -4,12 +4,23 @@ import { ReactComponent as Logo } from "../../assets/logo.svg"; export default function Inicio() { return ( - - - Pesquisar - - Quero cadastrar um novo profissional - +
+ + + Pesquisar + + Quero cadastrar um novo profissional + +
); } diff --git a/src/pages/inicio/styled.js b/src/pages/inicio/styled.js index e435295..77326fe 100644 --- a/src/pages/inicio/styled.js +++ b/src/pages/inicio/styled.js @@ -9,7 +9,6 @@ export const Container = styled.div` align-items: center; justify-content: center; height: 100vh; - position: relative; `; export const BotaoBuscar = styled.a` background: #0f4c81; @@ -34,7 +33,7 @@ export const BotaoRegistrar = styled.a` margin-top: 20px; `; export const InputBuscar = styled.input` - width: 612px; + width: 100%; height: 61px; background: #ffffff; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.25); diff --git a/src/pages/pesquisar/index.js b/src/pages/pesquisar/index.js index c6353b4..56d95ab 100644 --- a/src/pages/pesquisar/index.js +++ b/src/pages/pesquisar/index.js @@ -1,19 +1,30 @@ import React, { useState, useEffect } from "react"; -import { Container, BotaoBuscar, InputBuscar, Logo } from "./styled"; +import { Container, InputBuscar, Logo, ContainerHeader } from "./styled"; import logo from "../../assets/logo.svg"; import Card from "../../components/Card"; import axios from "axios"; import Modal from "../../components/Modal"; export default function Pesquisar() { + //hooks são funcoes que armazenam logicas que facilita a utilização + //de determinadas lógicas + + //armazena a lista de psicologos const [psicologos, setPsicologos] = useState([]); + + //armazena o psicologo selecionado pelo usuário const [psicologo, setPsicologo] = useState({}); + + //flag que armazena o estado do modal, `visivel` ou `oculto` const [modal, setModal] = useState(false); + //funcao que busca os psicologos cadastrados + //*utlizado dados fake, pois ainda não foi implementado o back-end* function buscarPsicologos() { axios .get("https://randomuser.me/api/?nat=br&results=13") .then((response) => { + //seta a lista de psicologos dentro do array `psicologos` setPsicologos(response.data.results); }); } @@ -27,16 +38,18 @@ export default function Pesquisar() { setModal(false); } + //hook executado todas as vezes que a tela e aberta useEffect(() => { buscarPsicologos(); }, []); + return (
-
+ -
+
diff --git a/src/pages/pesquisar/styled.js b/src/pages/pesquisar/styled.js index c83d4c2..d5f9f25 100644 --- a/src/pages/pesquisar/styled.js +++ b/src/pages/pesquisar/styled.js @@ -35,13 +35,13 @@ export const Container = styled.div` main { display: flex; flex-direction: column; - padding: 10px; + padding: 100px 10px 50px 10px; } } `; export const InputBuscar = styled.input` - width: 612px; + width: 100%; height: 61px; background: #ffffff; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.25); @@ -51,10 +51,6 @@ export const InputBuscar = styled.input` ::placeholder { color: #e5e5e5; } - - @media (max-width: 768px) { - width: 100%; - } `; export const Logo = styled.img` @@ -62,3 +58,9 @@ export const Logo = styled.img` width: 173px; height: 44px; `; +export const ContainerHeader = styled.div` + display: flex; + flex-direction: column; + width: 100%; + max-width: 612px; +`; diff --git a/src/pages/registrar/index.js b/src/pages/registrar/index.js index b4b6560..9aa6488 100644 --- a/src/pages/registrar/index.js +++ b/src/pages/registrar/index.js @@ -12,10 +12,15 @@ import Select from "../../components/Select"; import { ToastContainer, toast } from "react-toastify"; import "react-toastify/dist/ReactToastify.css"; import * as Yup from "yup"; +import { useHistory } from "react-router-dom"; export default function Registrar() { + //hook de navegaçãos + const history = useHistory(); + async function handleSubmit(data, { reset }) { try { + //yup e uma ferramenta utilizada para validação dos campos de um formulario const schema = Yup.object().shape({ nome: Yup.string().required("Informe o nome"), email: Yup.string() @@ -31,11 +36,21 @@ export default function Registrar() { await schema.validate(data, { abortEarly: false, }); + + //apresenta mensagem de sucesso toast.success("Cadastrado com sucesso"); - reset(); + + setTimeout(() => { + //reseta valores do formulario + reset(); + //navega para tela inicial + history.push("/"); + }, 2000); } catch (err) { if (err instanceof Yup.ValidationError) { const mensagem = err.inner[0].message; + //apresenta mensagem de erro, caso algum campo do + //formulario não esteja conforme solicitado toast.error(mensagem); } } diff --git a/src/pages/registrar/styled.js b/src/pages/registrar/styled.js index 8e7e659..f9fe352 100644 --- a/src/pages/registrar/styled.js +++ b/src/pages/registrar/styled.js @@ -50,12 +50,6 @@ export const Container = styled.div` color: #cccccc; } } - - @media (max-width: 600px) { - form { - width: 350px; - } - } `; export const ButtaoCadastrar = styled.button` width: 179px; @@ -72,11 +66,11 @@ export const ContainerDuasColunas = styled.div` display: flex; .cidade { width: 100%; - margin-right: 20px; + margin-right: 10px; } .uf { width: 50%; - margin-left: 20px; + margin-left: 10px; } `; export const Logo = styled.img` diff --git a/src/routes.js b/src/routes.js index c608210..62d2773 100644 --- a/src/routes.js +++ b/src/routes.js @@ -1,9 +1,12 @@ import React from "react"; -import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom"; +import { BrowserRouter as Router, Switch, Route } from "react-router-dom"; import Inicio from "./pages/inicio"; import Pesquisar from "./pages/pesquisar"; import Registrar from "./pages/registrar"; +/** + * Local destinado a declaracão e configuração de uma rota(tela) + */ export default function Routes() { return (