Inicio de detalhes e atualização do paciente

src/App.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import Sidebar from './components/Sidebar';
 import Header from './components/Header';
 import StatsCard from './components/StatsCard';
@@ -14,22 +14,30 @@ import EmailApp from "./pages/EmailApp";
 import ChatApp from "./pages/ChatApp";
 import GalleryApp from "./pages/GalleryApp";
 import FormLayout from './pages/FormLayout';
+import EditPage from './pages/EditPage';
+import PatientList from './components/patients/PatientList';
+import Details from './pages/Details';
 
 
 function App() {
   const [isSidebarActive, setIsSidebarActive] = useState(true);
   const [currentPage, setCurrentPage] = useState('dashboard');
 
+  const [patientID, setPatientID] = useState(0)
+
+
+
+
   const toggleSidebar = () => {
     setIsSidebarActive(!isSidebarActive);
   };
 
 const renderPageContent = () => {
   if (currentPage === 'form-layout') {
-    return <FormLayout />;
+    return <FormLayout/>;
   } 
   else if (currentPage === 'table') {
-    return <Table />;
+    return <Table setCurrentPage={setCurrentPage} setPatientID={setPatientID}/>;
   }
   else if (currentPage === 'data-table') {
     return <DataTable />;
@@ -46,6 +54,13 @@ const renderPageContent = () => {
   else if (currentPage === 'gallery-app') {
     return <GalleryApp />;
   }
+  else if(currentPage === 'edit-page-paciente'){
+    
+    return <EditPage  id={patientID} />
+  }
+  else if(currentPage === 'details-page-paciente'){
+    return <Details/>
+  }
 
 
     // Dashboard por padrão

src/components/patients/PatientForm.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import InputMask from "react-input-mask";
 
-function PatientForm({ onSave, onCancel }) {
+function PatientForm({ onSave, onCancel, PatientDict }) {
 
 
   const FormatTelefones = (valor) => {
@@ -14,8 +14,6 @@ function PatientForm({ onSave, onCancel }) {
     .replace(/(\d{2})(\d)/, '$1) $2' )
     .replace(/(\d)(\d{4})/, '$1 $2')
     .replace(/(\d{4})(\d{4})/, '$1-$2')
-
-   
   }
 
 
@@ -34,31 +32,31 @@ function PatientForm({ onSave, onCancel }) {
 
 
   const [formData, setFormData] = useState({
-    nome: '',
+    nome: PatientDict.nome,
-    nomeSocial: '',
+    nomeSocial: PatientDict.nome_social,
-    dataNascimento: '',
+    dataNascimento: PatientDict.data_nascimento,
-    genero: '',
+    genero: PatientDict.sexo,
     documento: '',
     numeroDocumento: '',
-    cpf: '',
+    cpf: PatientDict.cpf,
-    profissao: '',
+    profissao: PatientDict.profissao ,
-    nomeMae: '',
+    nomeMae: PatientDict.nome_mae,
-    profissaoMae: '',
+    profissaoMae: PatientDict.profissao_mae,
-    nomePai: '',
+    nomePai: PatientDict.nome_pai,
-    profissaoPai: '',
+    profissaoPai: PatientDict.profissao_pai,
     nomeResponsavel: '',
     cpfResponsavel: '',
     nomeConjuge: '',
     outroId: '',
     cep: '',
-    cidade: '',
+    cidade: PatientDict.cidade,
-    estado: '',
+    estado: PatientDict.estado,
-    bairro: '',
+    bairro: PatientDict.bairro,
-    rua: '',
+    rua: PatientDict.logradouro,
     numero: '',
     complemento: '',
-    email: '',
+    email: PatientDict.email,
-    telefone1: '',
+    telefone1: PatientDict.celular,
     telefone2: '',
     telefone3: '',
     observacoes: ''

src/pages/Details.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Details = () => {
+  return (
+    <div>Details</div>
+  )
+}
+
+export default Details

src/pages/EditPage.jsx

@@ -0,0 +1,52 @@
+import React from 'react'
+
+import PatientForm from '../components/patients/PatientForm'
+
+import {useEffect, useState} from 'react'
+
+const EditPage = ( {id}) => {
+
+  const [PatientToPUT, setPatientPUT] = useState({})
+
+  var requestOptions = {
+   method: 'GET',
+   redirect: 'follow'
+};
+
+useEffect(() => {
+
+
+fetch(`https://mock.apidog.com/m1/1053378-0-default/pacientes/${id}`, requestOptions)
+  .then(response => response.json())
+  .then(result => result.data)
+  .then(data => console.log(data))
+  .catch(error => console.log('error', error));
+    
+}, [])
+  const HandlePutPatient = () => {
+
+    console.log('paciente atualizado')
+
+  }
+
+
+  return (
+
+    <div>
+    
+    <button>Voltar para lista sem salvar</button>
+
+    
+
+    <PatientForm
+    onSave={HandlePutPatient}
+    onCancel={console.log('Não atualizar')}
+    PatientDict={PatientToPUT}
+    
+    />
+    
+    </div>
+  )
+}
+
+export default EditPage

src/pages/FormLayout.jsx

@@ -4,7 +4,7 @@ import React, { useState } from 'react';
 import PatientList from '../components/patients/PatientList';
 import PatientForm from '../components/patients/PatientForm';
 
-function FormLayout() {
+function FormLayout( ) {
   // Este estado vai controlar qual "tela" mostrar: 'list' (lista) ou 'form' (formulário)
   const [view, setView] = useState('list');
   
@@ -55,6 +55,8 @@ function FormLayout() {
               <PatientForm
                 onSave={handleSavePatient}
                 onCancel={() => setView('list')}
+                PatientDict={{}}
+               
               />
             )}
           </div>

src/pages/Table.jsx

@@ -1,7 +1,8 @@
 import React, { useState, useEffect } from 'react';
 
 
-function Table() {
+function Table( {setCurrentPage, setPatientID}) {
+
 
 
     // Função para excluir paciente
@@ -27,10 +28,16 @@ function Table() {
     
     console.log(e.target.value)
 
-    if(value === 'verdetalhes'){}
+    if(value === 'verdetalhes'){
+      setCurrentPage('details-page-paciente')
+    }
 
     if(value === 'editar')
-    {}
+    {setCurrentPage('edit-page-paciente')
+    setPatientID(id)
+      
+      
+    }
     
     if(value === 'excluir'){
       console.log(`Excluir ${id}`)
@@ -130,4 +137,5 @@ useEffect(() => {
   );
 }
 
+
 export default Table;