From 148bdadb910c170e91805b1d8e3be6e99c0b122d Mon Sep 17 00:00:00 2001
From: Henrique-Sousa <29417378+Henrique-Sousa@users.noreply.github.com>
Date: Fri, 3 Apr 2026 14:46:29 -0300
Subject: [PATCH] refactor: separa o dashboard em componentes
---
ui/src/components/ListaMedicos.jsx | 53 +++++++
ui/src/components/ListaMedicosModal.jsx | 29 ++++
ui/src/components/ListaPacientes.jsx | 73 +++++++++
ui/src/components/ListaPacientesModal.jsx | 29 ++++
.../containers/DashboardContainer/index.jsx | 140 ++----------------
5 files changed, 199 insertions(+), 125 deletions(-)
create mode 100644 ui/src/components/ListaMedicos.jsx
create mode 100644 ui/src/components/ListaMedicosModal.jsx
create mode 100644 ui/src/components/ListaPacientes.jsx
create mode 100644 ui/src/components/ListaPacientesModal.jsx
diff --git a/ui/src/components/ListaMedicos.jsx b/ui/src/components/ListaMedicos.jsx
new file mode 100644
index 0000000..01ebbb9
--- /dev/null
+++ b/ui/src/components/ListaMedicos.jsx
@@ -0,0 +1,53 @@
+import { useState, useEffect } from "react";
+
+import { Table } from 'antd';
+
+import _service from '@netuno/service-client';
+
+const medicosColumns = [
+ {
+ title: 'UID',
+ dataIndex: 'uid',
+ key: 'uid',
+ },
+ {
+ title: 'Nome',
+ dataIndex: 'nome',
+ key: 'nome',
+ },
+ {
+ title: 'CRM',
+ dataIndex: 'crm',
+ key: 'crm',
+ }
+]
+
+function ListaMedicos() {
+ const [medicos, setMedicos] = useState([]);
+
+ useEffect(() => {
+ carregarMedicos();
+ }, []);
+
+ const carregarMedicos = () => {
+ setMedicos([]);
+ _service({
+ url: "/services/medicos",
+ success: (response) => {
+ setMedicos(response.json);
+ },
+ fail: (e) => {
+ console.error("Serviço de medicos falhou.", e);
+ message.error("Serviço de medicos falhou.", e);
+ }
+ });
+ };
+
+ return (
+ <>
+
+
+ );
+}
+
+export default ListaMedicos;
diff --git a/ui/src/components/ListaMedicosModal.jsx b/ui/src/components/ListaMedicosModal.jsx
new file mode 100644
index 0000000..f864a57
--- /dev/null
+++ b/ui/src/components/ListaMedicosModal.jsx
@@ -0,0 +1,29 @@
+import { Modal } from 'antd';
+
+import ListaMedicos from "./ListaMedicos.jsx"
+
+function ListaMedicosModal({isMedicosModalOpen, setIsMedicosModalOpen}) {
+ const handleMedicosOk = () => {
+ setIsMedicosModalOpen(false);
+ };
+ const handleMedicosCancel = () => {
+ setIsMedicosModalOpen(false);
+ };
+
+ return (
+ <>
+
+
+
+
+ );
+}
+
+export default ListaMedicosModal;
diff --git a/ui/src/components/ListaPacientes.jsx b/ui/src/components/ListaPacientes.jsx
new file mode 100644
index 0000000..3990534
--- /dev/null
+++ b/ui/src/components/ListaPacientes.jsx
@@ -0,0 +1,73 @@
+import { useState, useEffect } from "react";
+
+import { Table } from 'antd';
+
+import _service from '@netuno/service-client';
+
+const pacientesColumns = [
+ {
+ title: 'UID',
+ dataIndex: 'uid',
+ key: 'uid',
+ },
+ {
+ title: 'Nome',
+ dataIndex: 'nome',
+ key: 'nome',
+ },
+ {
+ title: 'CPF',
+ dataIndex: 'cpf',
+ key: 'cpf',
+ },
+ {
+ title: 'RG',
+ dataIndex: 'rg',
+ key: 'rg',
+ },
+ {
+ title: 'Data de Nascimento',
+ dataIndex: 'data de nascimento',
+ key: 'data de nascimento',
+ },
+ {
+ title: 'Endereço',
+ dataIndex: 'endereço',
+ key: 'endereço',
+ },
+ {
+ title: 'Telefone',
+ dataIndex: 'telefone',
+ key: 'telefone',
+ }
+];
+
+function ListaPacientes() {
+ const [pacientes, setPacientes] = useState([]);
+
+ useEffect(() => {
+ carregarPacientes();
+ }, []);
+
+ const carregarPacientes = () => {
+ setPacientes([]);
+ _service({
+ url: "/services/pacientes",
+ success: (response) => {
+ setPacientes(response.json);
+ },
+ fail: (e) => {
+ console.error("Serviço de pacientes falhou.", e);
+ message.error("Serviço de pacientes falhou.", e);
+ }
+ });
+ };
+
+ return (
+ <>
+
+
+ );
+}
+
+export default ListaPacientes;
diff --git a/ui/src/components/ListaPacientesModal.jsx b/ui/src/components/ListaPacientesModal.jsx
new file mode 100644
index 0000000..7e9a9ff
--- /dev/null
+++ b/ui/src/components/ListaPacientesModal.jsx
@@ -0,0 +1,29 @@
+import { Modal } from 'antd';
+
+import ListaPacientes from "./ListaPacientes.jsx"
+
+function ListaPacientesModal({isPacientesModalOpen, setIsPacientesModalOpen}) {
+ const handlePacientesOk = () => {
+ setIsPacientesModalOpen(false);
+ };
+ const handlePacientesCancel = () => {
+ setIsPacientesModalOpen(false);
+ };
+
+ return (
+ <>
+
+
+
+
+ );
+}
+
+export default ListaPacientesModal;
diff --git a/ui/src/containers/DashboardContainer/index.jsx b/ui/src/containers/DashboardContainer/index.jsx
index d3fca0a..3fee7b7 100644
--- a/ui/src/containers/DashboardContainer/index.jsx
+++ b/ui/src/containers/DashboardContainer/index.jsx
@@ -1,66 +1,13 @@
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
-import { Table, Modal, Button, Form, Input } from 'antd';
+import { Modal, Button, Form, Input } from 'antd';
import _service from '@netuno/service-client';
-import "./index.less";
-
-const medicosColumns = [
- {
- title: 'UID',
- dataIndex: 'uid',
- key: 'uid',
- },
- {
- title: 'Nome',
- dataIndex: 'nome',
- key: 'nome',
- },
- {
- title: 'CRM',
- dataIndex: 'crm',
- key: 'crm',
- }
-]
+import ListaMedicosModal from "../../components/ListaMedicosModal.jsx";
+import ListaPacientesModal from "../../components/ListaPacientesModal.jsx";
-const pacientesColumns = [
- {
- title: 'UID',
- dataIndex: 'uid',
- key: 'uid',
- },
- {
- title: 'Nome',
- dataIndex: 'nome',
- key: 'nome',
- },
- {
- title: 'CPF',
- dataIndex: 'cpf',
- key: 'cpf',
- },
- {
- title: 'RG',
- dataIndex: 'rg',
- key: 'rg',
- },
- {
- title: 'Data de Nascimento',
- dataIndex: 'data de nascimento',
- key: 'data de nascimento',
- },
- {
- title: 'Endereço',
- dataIndex: 'endereço',
- key: 'endereço',
- },
- {
- title: 'Telefone',
- dataIndex: 'telefone',
- key: 'telefone',
- }
-];
+import "./index.less";
const onFinish = values => {
console.log('Success:', values);
@@ -84,8 +31,6 @@ const onFinishFailed = errorInfo => {
};
function DashboardContainer() {
- const [pacientes, setPacientes] = useState([]);
- const [medicos, setMedicos] = useState([]);
const [isPacientesModalOpen, setIsPacientesModalOpen] = useState(false);
const [isMedicosModalOpen, setIsMedicosModalOpen] = useState(false);
const [isCadastrarMedicosModalOpen, setIsCadastrarMedicosModalOpen] = useState(false);
@@ -93,22 +38,10 @@ function DashboardContainer() {
const showPacientesModal = () => {
setIsPacientesModalOpen(true);
};
- const handlePacientesOk = () => {
- setIsPacientesModalOpen(false);
- };
- const handlePacientesCancel = () => {
- setIsPacientesModalOpen(false);
- };
const showMedicosModal = () => {
setIsMedicosModalOpen(true);
};
- const handleMedicosOk = () => {
- setIsMedicosModalOpen(false);
- };
- const handleMedicosCancel = () => {
- setIsMedicosModalOpen(false);
- };
const showCadastrarMedicosModal = () => {
setIsCadastrarMedicosModalOpen(true);
@@ -120,39 +53,6 @@ function DashboardContainer() {
setIsCadastrarMedicosModalOpen(false);
};
- useEffect(() => {
- carregarPacientes();
- carregarMedicos();
- }, []);
-
- const carregarPacientes = () => {
- setPacientes([]);
- _service({
- url: "/services/pacientes",
- success: (response) => {
- setPacientes(response.json);
- },
- fail: (e) => {
- console.error("Serviço de pacientes falhou.", e);
- message.error("Serviço de pacientes falhou.", e);
- }
- });
- };
-
- const carregarMedicos = () => {
- setMedicos([]);
- _service({
- url: "/services/medicos",
- success: (response) => {
- setMedicos(response.json);
- },
- fail: (e) => {
- console.error("Serviço de medicos falhou.", e);
- message.error("Serviço de medicos falhou.", e);
- }
- });
- };
-
return (
<>