metodo GET e POST

package-lock.json

@@ -27,6 +27,7 @@
         "react-bootstrap": "^2.10.10",
         "react-dom": "^18.2.0",
         "react-flatpickr": "^4.0.11",
+        "react-input-mask": "^2.0.4",
         "react-quill": "^2.0.0",
         "react-scripts": "5.0.1",
         "recharts": "^3.1.2",
@@ -30536,6 +30537,20 @@
         "react": ">= 16 <= 19"
       }
     },
+    "node_modules/react-input-mask": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/react-input-mask/-/react-input-mask-2.0.4.tgz",
+      "integrity": "sha512-1hwzMr/aO9tXfiroiVCx5EtKohKwLk/NT8QlJXHQ4N+yJJFyUuMT+zfTpLBwX/lK3PkuMlievIffncpMZ3HGRQ==",
+      "license": "MIT",
+      "dependencies": {
+        "invariant": "^2.2.4",
+        "warning": "^4.0.2"
+      },
+      "peerDependencies": {
+        "react": ">=0.14.0",
+        "react-dom": ">=0.14.0"
+      }
+    },
     "node_modules/react-is": {
       "version": "19.1.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.1.1.tgz",
@@ -33481,9 +33496,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.9.2",
+      "version": "4.9.5",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.2.tgz",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
-      "integrity": "sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==",
+      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
       "license": "Apache-2.0",
       "peer": true,
       "bin": {
@@ -33491,7 +33506,7 @@
         "tsserver": "bin/tsserver"
       },
       "engines": {
-        "node": ">=14.17"
+        "node": ">=4.2.0"
       }
     },
     "node_modules/unbox-primitive": {

package.json

@@ -22,6 +22,7 @@
     "react-bootstrap": "^2.10.10",
     "react-dom": "^18.2.0",
     "react-flatpickr": "^4.0.11",
+    "react-input-mask": "^2.0.4",
     "react-quill": "^2.0.0",
     "react-scripts": "5.0.1",
     "recharts": "^3.1.2",

src/components/patients/PatientForm.jsx

@@ -70,7 +70,45 @@ function PatientForm({ onSave, onCancel }) {
       alert('Por favor, preencha Nome e CPF.');
       return;
     }
-    onSave(formData);
+    onSave(
+    {nome: formData.nome,
+  nomeSocial: formData.nomeSocial,
+  dataNascimento: formData.dataNascimento,
+  genero: formData.genero,
+  documento: formData.documento,
+  numeroDocumento: formData.numeroDocumento,
+  cpf: formData.cpf,
+  profissao: formData.profissao,
+  nomeMae: formData.nomeMae,
+  profissaoMae: formData.profissaoMae,
+  nomePai: formData.nomePai,
+  profissaoPai: formData.profissaoPai,
+  nomeResponsavel: formData.nomeResponsavel,
+  cpfResponsavel: formData.cpfResponsavel,
+  nomeConjuge: formData.nomeConjuge,
+  outroId: formData.outroId,
+  endereco: {
+    cep: formData.cep,
+    cidade: formData.cidade,
+    estado: formData.estado,
+    bairro: formData.bairro,
+    logradouro: formData.rua,
+    numero: formData.numero,
+    complemento: formData.complemento,
+  },
+
+  contato: {
+    email: formData.email,
+    telefone1: formData.telefone1,
+    telefone2: formData.telefone2,
+    telefone3: formData.telefone3,
+  },
+
+  observacoes: formData.observacoes,
+}
+
+      
+    );
   };
 
   return (

src/pages/FormLayout.jsx

@@ -7,11 +7,32 @@ import PatientForm from '../components/patients/PatientForm';
 function FormLayout() {
   // Este estado vai controlar qual "tela" mostrar: 'list' (lista) ou 'form' (formulário)
   const [view, setView] = useState('list');
+  
+  
+  var myHeaders = new Headers();
+  myHeaders.append("Content-Type", "application/json");
 
   // Função que será chamada para "salvar" o paciente
   const handleSavePatient = (patientData) => {
     console.log('Salvando paciente:', patientData);
-    alert(`Paciente "${patientData.nome}" salvo com sucesso! (Simulação)`); //altere isso para integração com backend
+
+    var raw = JSON.stringify(patientData)
+
+    var requestOptions = {
+      method:'POST',
+      header: myHeaders,
+      body:raw,
+      redirect:'follow'
+
+    }
+
+
+  fetch("https://mock.apidog.com/m1/1053378-0-default/pacientes", requestOptions)
+    .then(response => response.text())
+    .then(result => console.log(result))
+    .catch(error => console.log('error', error));
+      
+    alert(`Paciente "${patientData.nome}" salvo com sucesso!`); //altere isso para integração com backend
     // Após salvar, voltamos para a tela de lista
     setView('list');
   };

src/pages/Table.jsx

@@ -1,38 +1,28 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 
-// Seus dados JSON estáticos
-const dadosEstáticos = {
-    "success": true,
-    "data": [
-        {
-            "id": "123e4567-e89b-12d3-a456-426614174000",
-            "nome": "João Silva Santos",
-            "nome_social": "João Silva",
-            "cpf": "123.456.789-00",
-            "data_nascimento": "1985-03-15",
-            "sexo": "masculino",
-            "telefone": "+55 (11) 99999-8888",
-            "email": "joao.silva@email.com",
-            "status": "ativo",
-            "created_at": "2024-01-15T10:30:00Z",
-            "updated_at": "2024-02-20T14:45:00Z"
-        }
-    ],
-    "pagination": {
-        "current_page": 1,
-        "per_page": 20,
-        "total_pages": 5,
-        "total_records": 95,
-        "has_next": true,
-        "has_previous": false
-    }
-};
 
 function Table() {
+
   // Usamos useState para guardar os dados, o que é uma boa prática
-  const [resposta, setResposta] = useState(dadosEstáticos);
+  //const [resposta, setResposta] = useState(dadosEstáticos);
   
-  const { data: pacientes, pagination } = resposta;
+  //const { data: pacientes, pagination } = resposta;
+
+  let [pacientes, setPacientes] = useState([])
+
+  var requestOptions = {
+    method:'GET',
+    redirect:'follow'
+  }
+
+useEffect(() => {
+  console.log('hsjduhdeu')
+  fetch('https://mock.apidog.com/m1/1053378-0-default/pacientes', requestOptions)
+  .then(response =>  response.json())
+  .then(result => setPacientes(result['data']))
+  
+  .catch(error => console.log('Erro para encontrar pacientes no banco de dados', error))}, [])
+
 
   return (
     <>