Tratamento de erros da API

src/pages/DoctorCadastroManager.jsx

@@ -3,12 +3,14 @@ import React, { useState } from 'react';
 // Importamos os dois novos componentes que criamos
 import DoctorList from '../components/doctors/DoctorList';
 import DoctorForm from '../components/doctors/DoctorForm';
+import handleApiResponse from '../assets/utils/apiHandler';
 
 function DoctorCadastroManager( ) {
   // Este estado vai controlar qual "tela" mostrar: 'list' (lista) ou 'form' (formulário)
   const [view, setView] = useState('form');
+  const [errorMessage, setErrorMessage] = useState("");
+  const [fieldErrors, setFieldErrors] = useState({});
 
-  
   var myHeaders = new Headers();
   myHeaders.append("Content-Type", "application/json");
 
@@ -29,8 +31,14 @@ function DoctorCadastroManager( ) {
 
   fetch("https://mock.apidog.com/m1/1053378-0-default/pacientes", requestOptions)
     .then(response => response.text())
+    .then(handleApiResponse)
     .then(result => console.log(result))
-    .catch(error => console.log('error', error));
+    // .catch(error => console.log('error', error));
+    .catch((error) => {
+      console.log('error', error)
+      setErrorMessage(error.message || "Erro desconhecido");
+      setFieldErrors(error.details || {});
+    });
       
     alert(`Médico "${patientData.nome}" salvo com sucesso!`); //altere isso para integração com backend
     // Após salvar, voltamos para a tela de lista
@@ -39,11 +47,31 @@ function DoctorCadastroManager( ) {
 
   return (
     <>
+    {/* Mensagens de erro específicas */}
+    {Object.keys(fieldErrors).length > 0 && (
+      <div style={{ color: "darkred", marginBottom: "1rem" }}>
+        {Object.entries(fieldErrors).map(([campo, mensagens]) => (
+          <div key={campo}>
+            <strong>{campo}:</strong>
+            <ul>
+              {mensagens.map((msg, idx) => (
+                <li key={idx}>{msg}</li>
+              ))}
+            </ul>
+          </div>
+        ))}
+      </div>
+    )}
       <div className="page-heading">
         <h3>Cadastro de Médicos</h3>
       </div>
       <div className="page-content">
         <section className="row">
+          {errorMessage && (
+            <div style={{ color: "red", marginBottom: "1rem" }}>
+              {errorMessage}
+            </div>
+          )}
           <div className="col-12">
             {/* Aqui está a lógica principal: */}
             {/* Se a view for 'list', mostramos a lista com o botão. */}