Merge com fetchErrosAPI

src/components/utils/AuthProvider.js

@@ -1,5 +1,5 @@
 import React, { createContext, useContext, useState, useEffect } from 'react';
-
+import API_KEY from './apiKeys';
 // 1. Criação do Contexto
 const AuthContext = createContext(null);
 
@@ -41,6 +41,8 @@ export function AuthProvider({ children }) {
    * @param {Object} tokenResponse O objeto completo retornado pelo Supabase Auth.
    */
   const setAuthTokens = (tokenResponse) => {
+    console.log("TOKEN ADICIONADO")
+
     if (tokenResponse && tokenResponse.access_token && tokenResponse.token_type) {
       // 1. Atualiza o estado do React
       setAccessToken(tokenResponse.access_token);
@@ -77,6 +79,29 @@ export function AuthProvider({ children }) {
   
   // --- VALOR DO CONTEXTO ---
 
+  const RefreshingToken = () => {
+    console.log("refresh token", refreshToken)
+    var myHeaders = new Headers();
+      myHeaders.append("Content-Type", "application/json");
+      myHeaders.append("apikey", API_KEY)
+
+      var raw = JSON.stringify({
+        "refresh_token": refreshToken
+      });
+
+      var requestOptions = {
+        method: 'POST',
+        headers: myHeaders,
+        body: raw,
+        redirect: 'follow'
+      };
+
+    fetch(`https://yuanqfswhberkoevtmfr.supabase.co/auth/v1/token?grant_type=refresh_token`, requestOptions)
+      .then(response => response.json())
+      .then(result => setAuthTokens(result))
+      .catch(error => console.log('error', error));
+  }
+
   const contextValue = {
     accessToken,
     tokenType,
@@ -85,8 +110,11 @@ export function AuthProvider({ children }) {
     setAuthTokens, // Usado para CRIAR/MUDAR (Login/Refresh)
     clearAuthTokens, // Usado para MUDAR (Logout)
     getAuthorizationHeader, // Usado para PEGAR (Endpoints)
+    RefreshingToken
   };
 
+
+
   return (
     <AuthContext.Provider value={contextValue}>
       {children}

src/components/utils/Functions-Endpoints/General.js

@@ -24,4 +24,9 @@ import API_KEY from "../apiKeys";
     return userInfoData 
 }
 
+const UploadFotoAvatar = ( userID,access_token,file)  => {
+
+
+}
+
 export {UserInfos}

src/components/utils/fetchErros/ModalErro.jsx

@@ -0,0 +1,64 @@
+import React from "react";
+import { useState, useEffect } from "react";
+import { useAuth } from "../AuthProvider";
+
+function ModalErro  ({showModal, setShowModal, ErrorData}) {
+const {RefreshingToken} = useAuth()
+
+  const [modalMensagem, setModalMensagem] = useState("")
+
+console.log("eerrroror", ErrorData)
+
+useEffect(() => {
+if( ErrorData.httpStatus === 401){
+  setShowModal(false)
+  RefreshingToken()
+  console.log('uaua')
+}else if(ErrorData.httpStatus === 404){
+  setModalMensagem("Erro interno do sistema")
+}else{setModalMensagem(ErrorData.mensagem)}
+
+}, [ErrorData])
+
+return(
+
+<div>
+
+{showModal ? 
+ 
+<div className="modal-overlay">
+
+          <div className="modal-content">
+            <div className="modal-header bg-danger">
+              <h5 className="modal-title">{`(Erro ${ErrorData.httpStatus})`}</h5>
+          
+            </div>
+
+            <div className="modal-body">
+
+              {modalMensagem}
+              
+            </div>
+
+            <div className="modal-footer">
+              <button
+                className="modal-confirm-btn"
+                onClick={ () => setShowModal(false)}
+              >
+                Fechar
+              </button>
+            </div>
+          </div>
+        </div>
+    : null
+}
+</div>
+
+);
+
+
+}
+
+
+
+export default ModalErro

src/pages/TablePaciente.jsx

@@ -3,10 +3,10 @@ import { Link } from "react-router-dom";
 import API_KEY from "../components/utils/apiKeys";
 import { useAuth } from "../components/utils/AuthProvider";
 import "./style/TablePaciente.css"; 
-
+import ModalErro from "../components/utils/fetchErros/ModalErro";
 function TablePaciente({ setCurrentPage, setPatientID }) {
 
-  const { getAuthorizationHeader, isAuthenticated } = useAuth();
+  const { getAuthorizationHeader, isAuthenticated, RefreshingToken } = useAuth();
 
   const [pacientes, setPacientes] = useState([]);
   const [search, setSearch] = useState("");
@@ -24,6 +24,10 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
   const [showDeleteModal, setShowDeleteModal] = useState(false);
   const [selectedPatientId, setSelectedPatientId] = useState(null);
 
+  const [showModalError, setShowModalError] = useState(false);
+
+  const [ ErrorInfo, setErrorInfo] = useState({})
+
   const GetAnexos = async (id) => {
     var myHeaders = new Headers();
     myHeaders.append("Authorization", "Bearer <token>");
@@ -100,7 +104,6 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
   };
 
   useEffect(() => {
-
     const authHeader = getAuthorizationHeader()
 
     console.log(authHeader, 'aqui autorização')
@@ -115,9 +118,46 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
     };
 
     fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/patients", requestOptions) 
-      .then(response => response.json())
+  .then(response => {
-      .then(result => setPacientes(result))
+    
-      .catch(error => console.log('error', error));
+    // 1. VERIFICAÇÃO DO STATUS HTTP (Se não for 2xx)
+    if (!response.ok) {
+        
+      return response.json().then(errorData => {
+        
+        const errorObject = {
+            httpStatus: response.status,
+            apiCode: errorData.code,     
+            message: errorData.message || response.statusText,
+            details: errorData.details,
+            hint: errorData.hint
+        };
+        
+        console.error("ERRO DETALHADO:", errorObject);
+        throw errorObject;
+      });
+    }
+
+    // 3. Se a resposta for OK (2xx), processamos o JSON normalmente
+    return response.json();
+  })
+  .then(result => {
+    // 4. Bloco de SUCESSO
+    setPacientes(result); 
+    console.log("Sucesso:", result);
+    
+    // IMPORTANTE: Se o modal estava aberto, feche-o no sucesso
+    setShowModalError(false); 
+  })
+  .catch(error => {
+    // 5. Bloco de ERRO (Captura erros de rede ou o erro lançado pelo 'throw')
+    //console.error('Falha na requisição:', error.message);
+    if(error.httpStatus === 401){
+      RefreshingToken()
+    }
+    setErrorInfo(error)
+    setShowModalError(true);
+  });
   }, [isAuthenticated, getAuthorizationHeader]);
 
   const ehAniversariante = (dataNascimento) => {
@@ -199,11 +239,12 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
   }) : [];
 
   useEffect(() => {
-    console.log(` Pacientes totais: ${pacientes.length}, Filtrados: ${pacientesFiltrados.length}`);
+    console.log(` Pacientes totais: ${pacientes?.length}, Filtrados: ${pacientesFiltrados?.length}`);
   }, [pacientes, pacientesFiltrados, search]);
 
   return (
     <>
+    <ModalErro showModal={showModalError} setShowModal={setShowModalError} ErrorData={ErrorInfo}/>
       <div className="page-heading">
         <h3>Lista de Pacientes</h3>
       </div>
@@ -382,7 +423,7 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
 
                 <div className="mb-3">
                   <span className="badge results-badge">
-                    {pacientesFiltrados.length} de {pacientes.length} pacientes encontrados
+                    {pacientesFiltrados?.length} de {pacientes?.length} pacientes encontrados
                   </span>
                 </div>