From ff8d643d106155d6334273a5a3868b9718682672 Mon Sep 17 00:00:00 2001
From: IO <IO@IO.com>
Date: Sun, 30 Jun 2024 17:58:15 -0600
Subject: [PATCH] botines en perfil profesor

---
 .../CardEditProfesor/CardEditProfesor.css     |   4 +
 .../CardEditProfesor/CardEditProfesor.js      |   2 +-
 .../CardProfesores/CardProfesor.css           |   3 +-
 src/components/CardProfesores/CardProfesor.js |   2 +-
 .../PerfilProfesor/PerfilProfesor.css         |  16 +++
 .../PerfilProfesor/PerfilProfesor.js          | 100 ++++++++++++++++++
 6 files changed, 123 insertions(+), 4 deletions(-)

diff --git a/src/components/CardEditProfesor/CardEditProfesor.css b/src/components/CardEditProfesor/CardEditProfesor.css
index 6ef4b55..8d1302d 100644
--- a/src/components/CardEditProfesor/CardEditProfesor.css
+++ b/src/components/CardEditProfesor/CardEditProfesor.css
@@ -53,6 +53,10 @@
   background-color: #d9534f;
 }
 
+.delete-boton{
+  background-color: red;
+}
+
 .dialog {
   display: flex;
   flex-direction: column;
diff --git a/src/components/CardEditProfesor/CardEditProfesor.js b/src/components/CardEditProfesor/CardEditProfesor.js
index 6ba6b2e..e1910f8 100644
--- a/src/components/CardEditProfesor/CardEditProfesor.js
+++ b/src/components/CardEditProfesor/CardEditProfesor.js
@@ -48,7 +48,7 @@ const CardEditProfesor = ({ profesor, edificioNombre, onDelete }) => {
         <h4>{edificioNombre}</h4>
         <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>
+          <button className="delete-boton" onClick={handleDeleteClick} style={{ backgroundColor: 'red' }}>Borrar</button>
         </div>
       </div>
       {showDialog && (
diff --git a/src/components/CardProfesores/CardProfesor.css b/src/components/CardProfesores/CardProfesor.css
index 53e5ddf..3b5db64 100644
--- a/src/components/CardProfesores/CardProfesor.css
+++ b/src/components/CardProfesores/CardProfesor.css
@@ -41,8 +41,7 @@
 }
 
 .edit-button,
-.delete-button {
-  /* Estilos para los botones Editar y Borrar */
+.delete-boton {
   padding: 8px 12px;
   margin-right: 10px;
   border: none;
diff --git a/src/components/CardProfesores/CardProfesor.js b/src/components/CardProfesores/CardProfesor.js
index 88b794b..c2bacbc 100644
--- a/src/components/CardProfesores/CardProfesor.js
+++ b/src/components/CardProfesores/CardProfesor.js
@@ -69,7 +69,7 @@ const CardProfesor = ({ profesor, edificioNombre, permissions }) => {
               <button className="edit-button" onClick={handleEditClick} style={{ backgroundColor: 'green' }}>
                 Editar
               </button>
-              <button className="delete-button" onClick={handleDeleteClick} style={{ backgroundColor: 'red' }}>
+              <button className="delete-boton" onClick={handleDeleteClick} style={{ backgroundColor: 'red' }}>
                 Borrar
               </button>
             </>
diff --git a/src/components/PerfilProfesor/PerfilProfesor.css b/src/components/PerfilProfesor/PerfilProfesor.css
index 796d836..87550eb 100644
--- a/src/components/PerfilProfesor/PerfilProfesor.css
+++ b/src/components/PerfilProfesor/PerfilProfesor.css
@@ -57,3 +57,19 @@
 .info p {
   margin: 5px 0;
 }
+
+.edit-button,
+.delete-boton {
+  padding: 8px 12px;
+  margin-right: 10px;
+  border: none;
+  cursor: pointer;
+  border-radius: 4px;
+  color: #fff;
+  font-weight: bold;
+  outline: none;
+}
+
+.edit-button {
+  background-color: #007bff !important;
+}
\ No newline at end of file
diff --git a/src/components/PerfilProfesor/PerfilProfesor.js b/src/components/PerfilProfesor/PerfilProfesor.js
index 3044403..8828cc5 100644
--- a/src/components/PerfilProfesor/PerfilProfesor.js
+++ b/src/components/PerfilProfesor/PerfilProfesor.js
@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import './PerfilProfesor.css';
 import { useParams } from 'react-router-dom';
+import { PrivateRoutes, PublicRoutes } from '../../models/routes';
 
 const defaultImage = 'https://static.vecteezy.com/system/resources/thumbnails/020/765/399/small_2x/default-profile-account-unknown-icon-black-silhouette-free-vector.jpg'; 
 
@@ -10,8 +11,13 @@ const PerfilProfesor = () => {
   const [adscripciones, setAdscripciones] = useState([]);
   const [categorias, setCategorias] = useState([]);
   const [edificios, setEdificios] = useState([]);
+  const [permissions,setPermissions] = useState('')
+  const [jwt,setJwt] = useState()
+  const [showDialog, setShowDialog] = useState(false);
+  const [confirmText, setConfirmText] = useState('');
 
   useEffect(() => {
+    jwtPermissions();
     const fetchData = async () => {
       try {
         const adscripcionesResponse = await fetch('http://localhost:3000/adscripcion');
@@ -55,6 +61,68 @@ const PerfilProfesor = () => {
 
   const fotoProfesor = profesor.fotografia || defaultImage;
 
+  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.id_tipo_usuario;
+    const permissionsString = JSON.stringify(userPermissions);
+  
+    setPermissions(permissionsString);
+    setJwt(jwtToken);
+    console.log(permissionsString);
+  };
+
+  const handleEditClick = () => {
+    window.location.href = `${PrivateRoutes.EDITARPROFESOR}${profesor.id_profesor}`;
+  };
+
+  const handleDeleteClick = () => {
+    setShowDialog(true);
+  };
+
+  const handleConfirmDelete = async () => {
+    if (confirmText.toLowerCase() === 'aceptar') {
+      await fetchDelete(profesor.id_profesor);
+      setShowDialog(false);
+      setConfirmText('');
+      window.location.reload();
+    }
+  };
+
+  const fetchDelete = async (id_profesor) => {
+    try {
+      const token = localStorage.getItem('Token');
+
+      if (!token) {
+        console.error('No tienes el token');
+        return;
+      }
+
+      const response = await fetch(`http://localhost:3000/profesor/${id_profesor}`, {
+        method: 'DELETE',
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      });
+
+      if (!response.ok) {
+        console.error('Error al eliminar el profesor');
+        return;
+      }
+
+      const data = await response.json();
+      console.log('Success:', data);
+    } catch (error) {
+      console.error('Error:', error);
+    }
+  };
+
   return (
     <div className="perfil-profesor">
       <div className="foto-nombre">
@@ -102,6 +170,38 @@ const PerfilProfesor = () => {
           )}
         </ul>
       </div>
+
+      <div className="button-group">
+          {permissions ? (
+            <>
+              <button className="edit-button" onClick={handleEditClick} style={{ backgroundColor: 'green' }}>
+                Editar
+              </button>
+              <button className="delete-boton" onClick={handleDeleteClick} style={{ backgroundColor: 'red' }}>
+                Borrar
+              </button>
+            </>
+          ) : null}
+        </div>
+
+        {showDialog && (
+        <div className="dialog-overlay">
+          <div className="dialog">
+            <p>¿Deseas eliminar al profesor {profesor.nombre}?</p>
+            <p>Para borrar al profesor, escribe "aceptar".</p>
+            <input
+              type="text"
+              value={confirmText}
+              onChange={(e) => setConfirmText(e.target.value)}
+            />
+            <button onClick={handleConfirmDelete} disabled={confirmText.toLowerCase() !== 'aceptar'}>
+              Confirmar
+            </button>
+            <button onClick={() => setShowDialog(false)}>Cancelar</button>
+          </div>
+        </div>
+      )}
+
     </div>
   );
 };