riseup-squad23/src/pages/FormLayout.jsx

69 lines
2.0 KiB
JavaScript

import React, { useState } from 'react';
// Importamos os dois novos componentes que criamos
import PatientList from '../components/patients/PatientList';
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('form');
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);
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');
};
return (
<>
<div className="page-heading">
<h3>Cadastro de Pacientes</h3>
</div>
<div className="page-content">
<section className="row">
<div className="col-12">
{/* Aqui está a lógica principal: */}
{/* Se a view for 'list', mostramos a lista com o botão. */}
{/* Se for 'form', mostramos o formulário de cadastro. */}
{view === 'list' ? (
<PatientList onAddPatient={() => setView('form')} />
) : (
<PatientForm
onSave={handleSavePatient}
onCancel={() => setView('list')}
PatientDict={{}}
/>
)}
</div>
</section>
</div>
</>
);
}
export default FormLayout;