refactor: separa o dashboard em componentes

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 (
+    <>
+      <Table dataSource={medicos} columns={medicosColumns} />
+    </>
+  );
+}
+
+export default ListaMedicos;

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 (
+    <>
+      <Modal
+        title="Médicos"
+        closable={{ 'aria-label': 'Custom Close Button' }}
+        open={isMedicosModalOpen}
+        onOk={handleMedicosOk}
+        onCancel={handleMedicosCancel}
+        width={1000}
+      >
+        <ListaMedicos />
+      </Modal>
+    </>
+  );
+}
+
+export default ListaMedicosModal;

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 (
+    <>
+      <Table dataSource={pacientes} columns={pacientesColumns} />
+    </>
+  );
+}
+
+export default ListaPacientes;

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 (
+    <>
+      <Modal
+        title="Pacientes"
+        closable={{ 'aria-label': 'Custom Close Button' }}
+        open={isPacientesModalOpen}
+        onOk={handlePacientesOk}
+        onCancel={handlePacientesCancel}
+        width={1000}
+      >
+        <ListaPacientes />
+      </Modal>
+    </>
+  );
+}
+
+export default ListaPacientesModal;

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 (
     <>
       <Button type="primary" onClick={showPacientesModal}>
@@ -164,26 +64,16 @@ function DashboardContainer() {
       <Button type="primary" onClick={showCadastrarMedicosModal}>
         Cadastrar médicos 
       </Button>
-      <Modal
-        title="Pacientes"
-        closable={{ 'aria-label': 'Custom Close Button' }}
-        open={isPacientesModalOpen}
-        onOk={handlePacientesOk}
-        onCancel={handlePacientesCancel}
-        width={1000}
-      >
-        <Table dataSource={pacientes} columns={pacientesColumns} />
-      </Modal>
-      <Modal
-        title="Médicos"
-        closable={{ 'aria-label': 'Custom Close Button' }}
-        open={isMedicosModalOpen}
-        onOk={handleMedicosOk}
-        onCancel={handleMedicosCancel}
-        width={1000}
-      >
-        <Table dataSource={medicos} columns={medicosColumns} />
-      </Modal>
+
+      <ListaPacientesModal
+        isPacientesModalOpen={isPacientesModalOpen}
+        setIsPacientesModalOpen={setIsPacientesModalOpen}
+      />
+      <ListaMedicosModal
+        isMedicosModalOpen={isMedicosModalOpen}
+        setIsMedicosModalOpen={setIsMedicosModalOpen}
+      />
+
       <Modal
         title="Cadastrar novo médico"
         closable={{ 'aria-label': 'Custom Close Button' }}