From efa723dbe3235f4e5b72ee8c175d6094112e592a Mon Sep 17 00:00:00 2001
From: Caio Miguel Lima Nunes <miiguell.nuness02@gmail.com>
Date: Tue, 7 Oct 2025 22:22:18 -0300
Subject: [PATCH]  implementacao do sistema de logout com modal e API

---
 src/components/Sidebar.jsx | 373 +++++++++++++++++++++++++------------
 1 file changed, 253 insertions(+), 120 deletions(-)

diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx
index e1cc85a..b211975 100644
--- a/src/components/Sidebar.jsx
+++ b/src/components/Sidebar.jsx
@@ -1,138 +1,271 @@
 import React, { useState } from "react";
-import { Link } from "react-router-dom";
-import menuItems from "../data/sidebar-items-medico.json"; // Use "sidebar-items-secretaria.json" para secretaria e "sidebar-items-adm.json" para ADM
-import TrocardePerfis from "./TrocardePerfis"; 
+import { Link, useNavigate } from "react-router-dom";
+import menuItems from "../data/sidebar-items-medico.json";
+import TrocardePerfis from "./TrocardePerfis";
 
+function Sidebar({ menuItems }) {
+    const [isActive, setIsActive] = useState(true);
+    const [openSubmenu, setOpenSubmenu] = useState(null);
+    const [showLogoutModal, setShowLogoutModal] = useState(false);
+    const navigate = useNavigate();
 
-// 1. Recebe 'menuItems' e 'onLogout' como props
-function Sidebar({ menuItems, onLogout }) { 
- const [isActive, setIsActive] = useState(true);
- const [openSubmenu, setOpenSubmenu] = useState(null);
+    const toggleSidebar = () => {
+        setIsActive(!isActive);
+    };
 
- const toggleSidebar = () => {
-  setIsActive(!isActive);
- };
+    const handleSubmenuClick = (submenuName) => {
+        setOpenSubmenu(openSubmenu === submenuName ? null : submenuName);
+    };
 
- const handleSubmenuClick = (submenuName) => {
-  setOpenSubmenu(openSubmenu === submenuName ? null : submenuName);
- };
+    const handleLogoutClick = () => {
+        setShowLogoutModal(true);
+    };
 
- const renderLink = (item) => {
-  // Links internos (rotas do React Router)
-  if (item.url && item.url.startsWith("/")) {
-   return (
-    <Link to={item.url} className="sidebar-link">
-     {item.icon && <i className={`bi bi-${item.icon}`}></i>}
-     <span>{item.name}</span>
-    </Link>
-   );
-  }
+    const handleLogoutConfirm = async () => {
+        try {
+            const token = localStorage.getItem('token') ||
+                localStorage.getItem('authToken') ||
+                localStorage.getItem('userToken') ||
+                localStorage.getItem('access_token') ||
+                sessionStorage.getItem('token') ||
+                sessionStorage.getItem('authToken');
 
-  // Links externos
-  return (
-   <a
-    href={item.url}
-    className="sidebar-link"
-    target="_blank"
-    rel="noreferrer"
-   >
-    {item.icon && <i className={`bi bi-${item.icon}`}></i>}
-    <span>{item.name}</span>
-   </a>
-  );
- };
+            if (token) {
+                const response = await fetch('https://mock.apidog.com/m1/1053378-0-default/auth/v1/logout', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'Authorization': `Bearer ${token}`
+                    }
+                });
 
- return (
-  <div id="sidebar" className={isActive ? "active" : ""}>
-   <div className="sidebar-wrapper active">
-    <div className="sidebar-header">
-     {/* ... Header... */}
-     <div className="d-flex justify-content-between">
-      <div className="logo">
-       <Link to="/">
-        <h1>MediConnect</h1>
-       </Link>
-      </div>
-      <div className="toggler">
-       <button
-        type="button"
-        className="sidebar-hide d-xl-none d-block btn"
-        onClick={toggleSidebar}
-       >
-        <i className="bi bi-x bi-middle"></i>
-       </button>
-      </div>
-     </div>
-    </div>
+                if (response.status === 204) {
+                    console.log('Logout realizado com sucesso');
+                } else if (response.status === 401) {
+                    console.log('Token inválido ou expirado');
+                } else {
+                    try {
+                        const errorData = await response.json();
+                        console.error('Erro no logout:', errorData);
+                    } catch {
+                        console.error('Erro no logout - status:', response.status);
+                    }
+                }
+            }
+
+            clearAuthData();
+            navigate('/login');
+
+        } catch (error) {
+            console.error('Erro durante logout:', error);
+            clearAuthData();
+            navigate('/login');
+        } finally {
+            setShowLogoutModal(false);
+        }
+    };
+
+    const clearAuthData = () => {
+        localStorage.removeItem('token');
+        localStorage.removeItem('authToken');
+        localStorage.removeItem('userToken');
+        localStorage.removeItem('access_token');
+        localStorage.removeItem('user');
+        localStorage.removeItem('auth');
+        localStorage.removeItem('userData');
+
+        sessionStorage.removeItem('token');
+        sessionStorage.removeItem('authToken');
+        sessionStorage.removeItem('userToken');
+        sessionStorage.removeItem('access_token');
+        sessionStorage.removeItem('user');
+        sessionStorage.removeItem('auth');
+        sessionStorage.removeItem('userData');
+
+        if (window.caches) {
+            caches.keys().then(names => {
+                names.forEach(name => {
+                    if (name.includes('auth') || name.includes('api')) {
+                        caches.delete(name);
+                    }
+                });
+            });
+        }
+    };
+
+    const handleLogoutCancel = () => {
+        setShowLogoutModal(false);
+    };
+
+    const renderLink = (item) => {
+        if (item.url && item.url.startsWith("/")) {
+            return (
+                <Link to={item.url} className="sidebar-link">
+                    {item.icon && <i className={`bi bi-${item.icon}`}></i>}
+                    <span>{item.name}</span>
+                </Link>
+            );
+        }
 
-    <div className="sidebar-menu">
-     <ul className="menu">
-      {menuItems && menuItems.map((item, index) => {
-       if (item.isTitle) {
         return (
-         <li key={index} className="sidebar-title">
-          {item.name}
-         </li>
+            <a
+                href={item.url}
+                className="sidebar-link"
+                target="_blank"
+                rel="noreferrer"
+            >
+                {item.icon && <i className={`bi bi-${item.icon}`}></i>}
+                <span>{item.name}</span>
+            </a>
         );
-       }
+    };
 
-       if (item.submenu) {
-        return (
-         <li
-          key={index}
-          className={`sidebar-item has-sub ${
-           openSubmenu === item.key ? "active" : ""
-          }`}
-         >
-          {/* ... Lógica de Submenu ... */}
-                    <button
-           type="button"
-           className="sidebar-link btn"
-           onClick={() => handleSubmenuClick(item.key)}
-          >
-           <i className={`bi bi-${item.icon}`}></i>
-           <span>{item.name}</span>
-          </button>
-          <ul
-           className={`submenu ${
-            openSubmenu === item.key ? "active" : ""
-           }`}
-          >
-           {item.submenu.map((subItem, subIndex) => (
-            <li key={subIndex} className="submenu-item">
-             {renderLink(subItem)}
-            </li>
-           ))}
-          </ul>
-         </li>
-        );
-       }
+    return (
+        <>
+            {showLogoutModal && (
+                <div className="modal-overlay" style={{
+                    position: 'fixed',
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    zIndex: 9999
+                }}>
+                    <div className="modal-content" style={{
+                        backgroundColor: 'white',
+                        padding: '2rem',
+                        borderRadius: '8px',
+                        boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
+                        maxWidth: '400px',
+                        width: '90%'
+                    }}>
+                        <h3 style={{ marginBottom: '1rem' }}>Confirmar Logout</h3>
+                        <p style={{ marginBottom: '2rem' }}>Tem certeza que deseja encerrar a sessão?</p>
+                        <div style={{ display: 'flex', gap: '1rem', justifyContent: 'flex-end' }}>
+                            <button
+                                onClick={handleLogoutCancel}
+                                style={{
+                                    padding: '0.5rem 1rem',
+                                    border: '1px solid #ccc',
+                                    borderRadius: '4px',
+                                    backgroundColor: 'transparent',
+                                    cursor: 'pointer'
+                                }}
+                            >
+                                Cancelar
+                            </button>
+                            <button
+                                onClick={handleLogoutConfirm}
+                                style={{
+                                    padding: '0.5rem 1rem',
+                                    border: 'none',
+                                    borderRadius: '4px',
+                                    backgroundColor: '#dc3545',
+                                    color: 'white',
+                                    cursor: 'pointer'
+                                }}
+                            >
+                                Sair
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            )}
 
-       return (
-        <li key={index} className="sidebar-item">
-         {renderLink(item)}
-        </li>
-       );
-      })}
-            {/* 3. Adiciona o botão de logout no final do menu */}
-            <li className="sidebar-item" onClick={onLogout}>
-                <button type="button" className="sidebar-link btn">
-                    <i className="bi bi-box-arrow-right"></i>
-                    <span>Sair (Logout)</span>
-                </button>
-            </li>
+            <div id="sidebar" className={isActive ? "active" : ""}>
+                <div className="sidebar-wrapper active">
+                    <div className="sidebar-header">
+                        <div className="d-flex justify-content-between">
+                            <div className="logo">
+                                <Link to="/">
+                                    <h1>MediConnect</h1>
+                                </Link>
+                            </div>
+                            <div className="toggler">
+                                <button
+                                    type="button"
+                                    className="sidebar-hide d-xl-none d-block btn"
+                                    onClick={toggleSidebar}
+                                >
+                                    <i className="bi bi-x bi-middle"></i>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
 
-            <TrocardePerfis />
+                    <div className="sidebar-menu">
+                        <ul className="menu">
+                            {menuItems && menuItems.map((item, index) => {
+                                if (item.isTitle) {
+                                    return (
+                                        <li key={index} className="sidebar-title">
+                                            {item.name}
+                                        </li>
+                                    );
+                                }
 
-     </ul>
-    </div>
-        
-    <button className="sidebar-toggler btn x" onClick={toggleSidebar}>
-     <i data-feather="x"></i>
-    </button>
-   </div>
-  </div>
- );
+                                if (item.submenu) {
+                                    return (
+                                        <li
+                                            key={index}
+                                            className={`sidebar-item has-sub ${openSubmenu === item.key ? "active" : ""
+                                                }`}
+                                        >
+                                            <button
+                                                type="button"
+                                                className="sidebar-link btn"
+                                                onClick={() => handleSubmenuClick(item.key)}
+                                            >
+                                                <i className={`bi bi-${item.icon}`}></i>
+                                                <span>{item.name}</span>
+                                            </button>
+                                            <ul
+                                                className={`submenu ${openSubmenu === item.key ? "active" : ""
+                                                    }`}
+                                            >
+                                                {item.submenu.map((subItem, subIndex) => (
+                                                    <li key={subIndex} className="submenu-item">
+                                                        {renderLink(subItem)}
+                                                    </li>
+                                                ))}
+                                            </ul>
+                                        </li>
+                                    );
+                                }
+
+                                return (
+                                    <li key={index} className="sidebar-item">
+                                        {renderLink(item)}
+                                    </li>
+                                );
+                            })}
+
+                            <li className="sidebar-item">
+                                <button
+                                    type="button"
+                                    className="sidebar-link btn"
+                                    onClick={handleLogoutClick}
+                                >
+                                    <i className="bi bi-box-arrow-right"></i>
+                                    <span>Sair (Logout)</span>
+                                </button>
+                            </li>
+
+                            <TrocardePerfis />
+                        </ul>
+                    </div>
+
+                    <button className="sidebar-toggler btn x" onClick={toggleSidebar}>
+                        <i data-feather="x"></i>
+                    </button>
+                </div>
+            </div>
+        </>
+    );
 }
 
 export default Sidebar;
\ No newline at end of file