Merge pull request #1377 from Aarya-Chaudhari/logout-confirmation

Replace browser logout confirmation with custom modal

Author: Avdhesh-Varshney

client/src/shared/components/organisms/sidebar/hooks/index.ts

@@ -12,16 +12,27 @@ import {
 } from '../../../../../app/routes/constants/routes';
 import { useAuth } from '../../../../hooks/use-auth';
 
-
 const logoutStyle = {
   marginTop: 'auto',
   marginBottom: 0,
 };
 
 const useSidebar = () => {
   const [showExpandedView, setShowExpandedView] = useState(false);
+  const [showLogoutModal, setShowLogoutModal] = useState(false);
+
   const { logout } = useAuth();
 
+  // open modal
+  const handleLogoutClick = useCallback(() => {
+    setShowLogoutModal(true);
+  }, []);
+
+  // confirm logout
+  const confirmLogout = useCallback(() => {
+    setShowLogoutModal(false);
+    logout();
+  }, [logout]);
 
   const handleMouseHoverIn = useCallback(() => {
     setShowExpandedView(true);
@@ -31,7 +42,6 @@ const useSidebar = () => {
     setShowExpandedView(false);
   }, []);
 
-
   const sidebarItems = useMemo(() => {
     const items: SideBarItemsType[] = [
       {
@@ -68,27 +78,33 @@ const useSidebar = () => {
         screenName: ROUTES_PAGE_V1.SETTINGS,
       },
     ];
-    
+
     const secondaryItems: SideBarItemsType[] = [
       {
         icon: PowerSettingsNewIcon,
-        onClick: logout, 
+        onClick: handleLogoutClick,
         title: 'Logout',
         style: logoutStyle,
       },
     ];
+
     return {
       items: items.filter(({ disable }) => !disable),
       secondaryItems: secondaryItems.filter(({ disable }) => !disable),
     };
-  }, [logout]);
-
+  }, [handleLogoutClick]);
 
   return {
     showExpandedView,
     handleMouseHoverIn,
     handleMouseHoverOut,
     sidebarItems,
+
+    // modal controls
+    showLogoutModal,
+    setShowLogoutModal,
+    confirmLogout,
   };
 };
+
 export default useSidebar;