Finalização

src/components/AgendarConsulta/FormNovaConsulta.jsx

@@ -5,7 +5,7 @@ import { useState } from "react";
 
 
 const FormNovaConsulta = ({ onCancel }) => {
-  
+  const [paciente, setPaciente] = useState({})
   const [acessibilidade, setAcessibilidade] = useState({cadeirante:false,idoso:false,gravida:false,bebe:false, autista:false })
   const handleclickAcessibilidade = (id) => {
     let resultado = acessibilidade[id]
@@ -18,8 +18,6 @@ const FormNovaConsulta = ({ onCancel }) => {
 
   
   const FormatCPF = (valor) => {
-
-    
     console.log(valor)
 
     const digits = String(valor).replace(/\D/g, '').slice(0, 11);
@@ -29,7 +27,6 @@ const FormNovaConsulta = ({ onCancel }) => {
       .replace(/(\d{3})(\d)/, '$1.$2')
       .replace(/(\d{3})(\d)/, '$1.$2')
       .replace(/(\d{3})(\d{1,2})$/, '$1-$2');
-      
   }
 
 
@@ -76,7 +73,7 @@ const FormNovaConsulta = ({ onCancel }) => {
 
     fetch("https://mock.apidog.com/m1/1053378-0-default/pacientes/", requestOptions)
       .then(response => response.json())
-      .then(result => console.log(result))
+      .then(result => setPaciente(result.data))
       .catch(error => console.log('error', error));
     }
       
@@ -86,8 +83,23 @@ const FormNovaConsulta = ({ onCancel }) => {
       console.log("error", error);
     }
     //BuscarCPFnoBancodeDados(value)
+  }
 
-  
+  const handleChange = (e) => {
+
+    const {value, name} = e.target;
+
+    console.log(value, name)
+
+    if(name === 'email'){
+      setPaciente({...paciente, contato:{
+        ...paciente.contato,
+        email:value
+      }})
+
+    }else{
+    setPaciente({...paciente,[name]:value})
+    }
   }
 
   const handleSubmit = (e) => {
@@ -105,13 +117,13 @@ const FormNovaConsulta = ({ onCancel }) => {
       <div className="campos-informacoes-paciente" id="informacoes-paciente-linha-um">
           <div className="campo-de-input">
             <label>Nome *</label>
-            <input type="text" name="nome" placeholder="Insira o nome do paciente" required />
+            <input type="text" name="nome" value={paciente.nome} placeholder="Insira o nome do paciente" required onChange={handleChange} />
           </div>
 
           <div className="campo-de-input">
             <label>CPF do paciente</label>
             
-               <input  type="text" name="cpf" placeholder="000.000.000-00" onChange={(e) => e.target.value = FormatCPF(e.target.value)}  />
+               <input  type="text" name="cpf"  placeholder="000.000.000-00" onChange={(e) => e.target.value = FormatCPF(e.target.value)}  />
            
           </div>
 
@@ -124,7 +136,7 @@ const FormNovaConsulta = ({ onCancel }) => {
       <div className="campos-informacoes-paciente" id="informacoes-paciente-linha-dois">
           <div className="campo-de-input">
             <label>Data de nascimento *</label>
-            <input type="date" name="data_nascimento" required />
+            <input type="date" name="data_nascimento" value={paciente.data_nascimento} required onChange={handleChange}/>
           </div>
 
           <div className="campo-de-input">
@@ -136,7 +148,7 @@ const FormNovaConsulta = ({ onCancel }) => {
 
           <div className="campo-de-input">
             <label>E-mail</label>
-            <input type="email" name="email" placeholder="Email" />
+            <input type="email" name="email" placeholder="Email" value={paciente.contato?.email} onChange={handleChange} />
           </div>
       </div>
 
@@ -213,7 +225,7 @@ const FormNovaConsulta = ({ onCancel }) => {
             <div className='campo-de-input'>
               <label>Unidade *</label>
               <select name="unidade">
-                <option value="" disabled invisible>Selecione a unidade</option>
+                <option value="" disabled invisible selected>Selecione a unidade</option>
                 <option value="centro">Núcleo de Especialidades Integradas</option>
                 <option value="leste">Unidade Leste</option>
               </select>
@@ -241,7 +253,7 @@ const FormNovaConsulta = ({ onCancel }) => {
             <div className="campo-de-input">
               <label>Profissional solicitante</label>
               <select name="solicitante">
-                <option value="" disabled invisible>Selecione o solicitante</option>
+                <option value="" disabled invisible selected>Selecione o solicitante</option>
                 <option value="secretaria">Secretária</option>
                 <option value="medico">Médico</option>
               </select>