before the disaster

src/components/CardProfesor.js

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import '../App.css';
 
-const CardProfesor = ({ profesor, edificioNombre }) => {
+const CardProfesor = ({ profesor, edificioNombre,permissions,jwt }) => {
   const [showDialog, setShowDialog] = useState(false);
   const [confirmText, setConfirmText] = useState('');
 
@@ -25,7 +25,11 @@ const CardProfesor = ({ profesor, edificioNombre }) => {
   const fetchDelete = async (id_profesor) => {
     try {
       const response = await fetch(`http://localhost:3000/profesor/${id_profesor}`, {
-        method: 'DELETE'
+        method: 'DELETE',
+        headers:{
+          'Authorization': `Bearer ${jwt}`,
+          'permissions': JSON.stringify([permissions])
+        },
       });
       if (!response.ok) {
         console.error('Error al eliminar el profesor');
@@ -33,6 +37,7 @@ const CardProfesor = ({ profesor, edificioNombre }) => {
     } catch (error) {
       console.error('Error:', error);
     }
+    console.log(permissions);
   };
 
   return (
@@ -42,8 +47,12 @@ const CardProfesor = ({ profesor, edificioNombre }) => {
         <h4>{profesor.nombre}</h4>
         <h6>{edificioNombre}</h6>
         <div className="button-group">
-          <button className="edit-button" onClick={handleEditClick} style={{ backgroundColor: 'green' }}>Editar</button>
-          <button className="delete-button" onClick={handleDeleteClick} style={{ backgroundColor: 'red' }}>Borrar</button>
+        {permissions ? (
+            <>
+              <button className="edit-button" onClick={handleEditClick} style={{ backgroundColor: 'green' }}>Editar</button>
+              <button className="delete-button" onClick={handleDeleteClick} style={{ backgroundColor: 'red' }}>Borrar</button>
+            </>
+          ) : null}
         </div>
       </div>
       {showDialog && (

src/components/Mapeo.js

@@ -7,12 +7,32 @@ const Mapeo = ({ filters }) => {
   const [currentPage, setCurrentPage] = useState(1);
   const [totalPages, setTotalPages] = useState(1);
   const [edificios, setEdificios] = useState([]);
+  const [permissions,setPermissions] = useState('')
+  const [jwt,setJwt] = useState()
 
   useEffect(() => {
+    jwtPermissions();
     fetchEdificios();
     fetchProfesores();
   }, [currentPage, filters]);
 
+  const jwtPermissions = () => {
+    const jwtToken = localStorage.getItem('Token');
+    if (!jwtToken) {
+      console.error('No se encontró el token en localStorage');
+      return;
+    }
+    
+    const parts = jwtToken.split('.');
+    const decodedPayload = JSON.parse(atob(parts[1]));
+    const userPermissions = decodedPayload.permissions;
+    const permissionsString = JSON.stringify(userPermissions);
+  
+    setPermissions(permissionsString);
+    setJwt(jwtToken);
+    console.log(permissionsString);
+  };
+
   const fetchEdificios = () => {
     fetch('http://localhost:3000/edificio')
       .then(response => response.json())
@@ -36,7 +56,6 @@ const Mapeo = ({ filters }) => {
       })
       .then(data => {
         setProfesores(data.profesores);
-        console.log(data)
         setTotalPages(data.totalPages);
       })
       .catch(error => {
@@ -85,7 +104,7 @@ const Mapeo = ({ filters }) => {
         const edificio = edificios.find(e => e.id_edificio === profesor.id_edificio);
         const edificioNombre = edificio ? edificio.edificio : 'Desconocido';
         return (
-          <CardProfesor key={profesor.id_profesor} profesor={profesor} edificioNombre={edificioNombre} />
+          <CardProfesor key={profesor.id_profesor} profesor={profesor} edificioNombre={edificioNombre} permissions={permissions} jwt={jwt}/>
         );
       })}