refactor: separa o modal de cadastrar medicos

ui/src/components/CadastrarMedicosModal.jsx

@@ -0,0 +1,86 @@
+import { Modal, Form, Input, Button } from 'antd';
+
+import _service from '@netuno/service-client';
+
+function CadastrarMedicosModal({isCadastrarMedicosModalOpen, setIsCadastrarMedicosModalOpen}) {
+  const handleCadastrarMedicosOk = () => {
+    setIsCadastrarMedicosModalOpen(false);
+  };
+  const handleCadastrarMedicosCancel = () => {
+    setIsCadastrarMedicosModalOpen(false);
+  };
+
+  const onFinish = values => {
+    console.log('Success:', values);
+    _service({
+      url: "/services/medicos",
+      method: "POST",
+      data: {...values, especialidades: [], convenios: [] },
+      success: (response) => {
+        if (response.json) {
+          console.log("Service Response", response.json);
+        }
+      },
+      fail: (e) => {
+        console.log("Service Error", e);
+      }
+    });
+  };
+
+  const onFinishFailed = errorInfo => {
+    console.log('Failed:', errorInfo);
+  };
+
+  return (
+    <>
+
+      <Modal
+        title="Cadastrar novo médico"
+        closable={{ 'aria-label': 'Custom Close Button' }}
+        open={isCadastrarMedicosModalOpen}
+        onOk={handleCadastrarMedicosOk}
+        onCancel={handleCadastrarMedicosCancel}
+      >
+
+        <Form
+          name="basic"
+          labelCol={{ span: 8 }}
+          wrapperCol={{ span: 16 }}
+          style={{ maxWidth: 600 }}
+          initialValues={{ remember: true }}
+          onFinish={onFinish}
+          onFinishFailed={onFinishFailed}
+          autoComplete="off"
+        >
+
+          <Form.Item
+            label="Nome"
+            name="nome"
+            rules={[{ required: true, message: 'Escreva o nome' }]}
+          >
+            <Input />
+          </Form.Item>
+
+          <Form.Item
+            label="CRM"
+            name="crm"
+            rules={[{ required: true, message: 'Escreva o CRM' }]}
+          >
+            <Input.Password />
+          </Form.Item>
+
+          <Form.Item label={null}>
+            <Button type="primary" htmlType="submit">
+              Submit
+            </Button>
+          </Form.Item>
+
+        </Form>
+
+      </Modal>
+
+    </>
+  );
+}
+
+export default CadastrarMedicosModal;

ui/src/containers/DashboardContainer/index.jsx

@@ -1,35 +1,13 @@
 import { useState, useEffect } from "react";
 
-import { Modal, Button, Form, Input } from 'antd';
-
-import _service from '@netuno/service-client';
+import { Button } from 'antd';
 
 import ListaMedicosModal from "../../components/ListaMedicosModal.jsx";
 import ListaPacientesModal from "../../components/ListaPacientesModal.jsx";
+import CadastrarMedicosModal from "../../components/CadastrarMedicosModal.jsx";
 
 import "./index.less";
 
-const onFinish = values => {
-  console.log('Success:', values);
-  _service({
-    url: "/services/medicos",
-    method: "POST",
-    data: {...values, especialidades: [], convenios: [] },
-    success: (response) => {
-      if (response.json) {
-        console.log("Service Response", response.json);
-      }
-    },
-    fail: (e) => {
-      console.log("Service Error", e);
-    }
-  });
-};
-
-const onFinishFailed = errorInfo => {
-  console.log('Failed:', errorInfo);
-};
-
 function DashboardContainer() {
   const [isPacientesModalOpen, setIsPacientesModalOpen] = useState(false);
   const [isMedicosModalOpen, setIsMedicosModalOpen] = useState(false);
@@ -46,12 +24,6 @@ function DashboardContainer() {
   const showCadastrarMedicosModal = () => {
     setIsCadastrarMedicosModalOpen(true);
   };
-  const handleCadastrarMedicosOk = () => {
-    setIsCadastrarMedicosModalOpen(false);
-  };
-  const handleCadastrarMedicosCancel = () => {
-    setIsCadastrarMedicosModalOpen(false);
-  };
 
   return (
     <>
@@ -73,47 +45,10 @@ function DashboardContainer() {
         isMedicosModalOpen={isMedicosModalOpen}
         setIsMedicosModalOpen={setIsMedicosModalOpen}
       />
-
-      <Modal
-        title="Cadastrar novo médico"
-        closable={{ 'aria-label': 'Custom Close Button' }}
-        open={isCadastrarMedicosModalOpen}
-        onOk={handleCadastrarMedicosOk}
-        onCancel={handleCadastrarMedicosCancel}
-      >
-        <Form
-          name="basic"
-          labelCol={{ span: 8 }}
-          wrapperCol={{ span: 16 }}
-          style={{ maxWidth: 600 }}
-          initialValues={{ remember: true }}
-          onFinish={onFinish}
-          onFinishFailed={onFinishFailed}
-          autoComplete="off"
-        >
-          <Form.Item
-            label="Nome"
-            name="nome"
-            rules={[{ required: true, message: 'Escreva o nome' }]}
-          >
-            <Input />
-          </Form.Item>
-
-          <Form.Item
-            label="CRM"
-            name="crm"
-            rules={[{ required: true, message: 'Escreva o CRM' }]}
-          >
-            <Input.Password />
-          </Form.Item>
-
-          <Form.Item label={null}>
-            <Button type="primary" htmlType="submit">
-              Submit
-            </Button>
-          </Form.Item>
-        </Form>
-      </Modal>
+      <CadastrarMedicosModal
+        isCadastrarMedicosModalOpen={isCadastrarMedicosModalOpen}
+        setIsCadastrarMedicosModalOpen={setIsCadastrarMedicosModalOpen}
+      />
     </>
   );
 }