From d04e6600716be340a944d33b0e6249ec8969c02c Mon Sep 17 00:00:00 2001
From: abdulkhaliq59 <kananuraabdulkhaliq59@gmail.com>
Date: Thu, 22 Jan 2026 11:59:49 +0200
Subject: [PATCH] fix: resolve an error in caching

---
 app/logout/page.tsx            | 49 +++++++++++++++++++++++++++--
 components/Header.tsx          | 56 ++++++++++++++++++++++++++++++++--
 components/Navigation.tsx      | 49 +++++++++++++++++++++++++----
 context/ChatContext.tsx        | 48 +++++++++++++++++++++++++++--
 context/NotificationContext.ts | 40 +++++++++++++++++++++++-
 services/socketService.ts      | 12 ++++++++
 types/notification.types.ts    |  1 +
 7 files changed, 241 insertions(+), 14 deletions(-)

diff --git a/app/logout/page.tsx b/app/logout/page.tsx
index b570ce4..0cd2006 100644
--- a/app/logout/page.tsx
+++ b/app/logout/page.tsx
@@ -2,14 +2,57 @@
 import { useEffect } from "react";
 import { useRouter } from "next/navigation";
 import { useAuthToken } from "@/hooks/use-auth-token";
+import { socketService } from "@/services/socketService";
+import { apiSlice } from "@/states/apiSlice";
+import { useDispatch } from "react-redux";
 
 const LogoutPage = () => {
   const router = useRouter();
   const { removeToken } = useAuthToken();
+  const dispatch = useDispatch();
+
   useEffect(() => {
-    removeToken();
-    router.replace("/");
-  }, [router, removeToken]);
+    const performLogout = () => {
+      try {
+        // 1. Clear authentication tokens
+        removeToken();
+
+        // 2. Force disconnect socket (this will also clear chat state)
+        socketService.forceDisconnect();
+
+        // 3. Clear Redux RTK Query cache
+        dispatch(apiSlice.util.resetApiState());
+
+        // 4. Clear sessionStorage (transfer data, etc.)
+        sessionStorage.clear();
+
+        // 5. Clear specific localStorage items while preserving theme and sidebar preferences
+        const preservedItems = {
+          theme: localStorage.getItem('theme'),
+          sidebarExpanded: localStorage.getItem('sidebarExpanded'),
+        };
+
+        // Clear all localStorage
+        localStorage.clear();
+
+        // Restore preserved items
+        if (preservedItems.theme) {
+          localStorage.setItem('theme', preservedItems.theme);
+        }
+        if (preservedItems.sidebarExpanded) {
+          localStorage.setItem('sidebarExpanded', preservedItems.sidebarExpanded);
+        }
+      } catch (error) {
+        console.error('Error during logout:', error);
+      }
+
+      // 6. Immediate redirect using window.location for guaranteed navigation
+      window.location.href = "/";
+    };
+
+    performLogout();
+  }, []); // Empty deps - only run once on mount
+
   return null;
 };
 
diff --git a/components/Header.tsx b/components/Header.tsx
index a54deac..c33e258 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -13,6 +13,9 @@ import NotificationBell from "./notifications/NotificationBell";
 import { useAuthToken } from "@/hooks/use-auth-token";
 import { Button } from "./ui/button";
 import { useTheme } from "@/context/ThemeContext";
+import { socketService } from "@/services/socketService";
+import { apiSlice } from "@/states/apiSlice";
+import { useDispatch } from "react-redux";
 
 
 export const Header = () => {
@@ -26,8 +29,9 @@ export const Header = () => {
 
     const router = useRouter();
     const notifications = useNotifications();
-    const { getToken } = useAuthToken();
+    const { getToken, removeToken } = useAuthToken();
     const { theme, toggleTheme } = useTheme();
+    const dispatch = useDispatch();
     
     // Try to get chat context, but don't fail if it's not available
     let chat;
@@ -130,6 +134,54 @@ export const Header = () => {
         setIsBalanceVisible(!isBalanceVisible);
     };
 
+    const handleLogout = () => {
+        setIsDropdownOpen(false);
+        
+        try {
+            // 1. Clear authentication tokens
+            removeToken();
+
+            // 2. Clear chat state if available
+            if (chat?.clearChatState) {
+                chat.clearChatState();
+            }
+
+            // 3. Clear notification state if available
+            if (notifications?.clearNotificationState) {
+                notifications.clearNotificationState();
+            }
+
+            // 4. Force disconnect socket
+            socketService.forceDisconnect();
+
+            // 5. Clear Redux RTK Query cache
+            dispatch(apiSlice.util.resetApiState());
+
+            // 6. Clear sessionStorage
+            sessionStorage.clear();
+
+            // 7. Clear localStorage (preserve theme and sidebar)
+            const preservedItems = {
+                theme: localStorage.getItem('theme'),
+                sidebarExpanded: localStorage.getItem('sidebarExpanded'),
+            };
+
+            localStorage.clear();
+
+            if (preservedItems.theme) {
+                localStorage.setItem('theme', preservedItems.theme);
+            }
+            if (preservedItems.sidebarExpanded) {
+                localStorage.setItem('sidebarExpanded', preservedItems.sidebarExpanded);
+            }
+        } catch (error) {
+            console.error('Error during logout:', error);
+        }
+
+        // 8. Force hard redirect to home (bypasses middleware returnUrl)
+        window.location.replace("/");
+    };
+
     const handleNavigation = (path: string) => {
         setIsDropdownOpen(false);
         router.push(path);
@@ -244,7 +296,7 @@ export const Header = () => {
                                 </li>
                                 <li>
                                     <button
-                                        onClick={() => handleNavigation('/logout')}
+                                        onClick={handleLogout}
                                         className="block w-full text-left px-4 py-2 hover:bg-gray-100 dark:hover:bg-darkBg-interactive text-red-500"
                                     >
                                         Logout
diff --git a/components/Navigation.tsx b/components/Navigation.tsx
index 6abb8f6..8974f45 100644
--- a/components/Navigation.tsx
+++ b/components/Navigation.tsx
@@ -29,6 +29,9 @@ import {
 import { cn } from "@/lib/utils"
 import { useAuthToken } from "@/hooks/use-auth-token"
 import { useSidebar } from "@/context/SidebarContext"
+import { socketService } from "@/services/socketService"
+import { apiSlice } from "@/states/apiSlice"
+import { useDispatch } from "react-redux"
 
 interface NavigationItem {
     id: string
@@ -52,6 +55,7 @@ export default function Navigation({ hideBottomNav = false }: NavigationProps) {
     const router = useRouter()
     const params = useParams()
     const pathname = usePathname()
+    const dispatch = useDispatch()
 
     // Get userId from URL params or token
     useEffect(() => {
@@ -144,8 +148,41 @@ export default function Navigation({ hideBottomNav = false }: NavigationProps) {
     const handleClick = (id: string, path: string) => {
         // Handle logout separately
         if (id === "Logout") {
-            removeToken();
-            router.push('/auth/login');
+            try {
+                // 1. Clear authentication tokens
+                removeToken();
+
+                // 2. Force disconnect socket
+                socketService.forceDisconnect();
+
+                // 3. Clear Redux RTK Query cache
+                dispatch(apiSlice.util.resetApiState());
+
+                // 4. Clear sessionStorage
+                sessionStorage.clear();
+
+                // 5. Clear localStorage (preserve theme and sidebar)
+                const preservedItems = {
+                    theme: localStorage.getItem('theme'),
+                    sidebarExpanded: localStorage.getItem('sidebarExpanded'),
+                };
+
+                localStorage.clear();
+
+                if (preservedItems.theme) {
+                    localStorage.setItem('theme', preservedItems.theme);
+                }
+                if (preservedItems.sidebarExpanded) {
+                    localStorage.setItem('sidebarExpanded', preservedItems.sidebarExpanded);
+                }
+            } catch (error) {
+                console.error('Error during logout:', error);
+            }
+
+            // 6. Force complete page reload to home using full URL
+            setTimeout(() => {
+                window.location.href = window.location.origin + "/";
+            }, 50);
             return;
         }
 
@@ -218,8 +255,8 @@ export default function Navigation({ hideBottomNav = false }: NavigationProps) {
                                     className={cn(
                                         "flex items-center px-3 py-2.5 transition-all rounded-xl duration-200",
                                         isExpanded ? "justify-start" : "justify-center",
-                                        activeItem === item.id 
-                                            ? "bg-brand-green dark:bg-brand-gold text-white dark:text-[#00313A] shadow-lg" 
+                                        activeItem === item.id
+                                            ? "bg-brand-green dark:bg-brand-gold text-white dark:text-[#00313A] shadow-lg"
                                             : "text-white hover:bg-[#004D5C] hover:shadow-md",
                                     )}
                                 >
@@ -239,8 +276,8 @@ export default function Navigation({ hideBottomNav = false }: NavigationProps) {
                                     className={cn(
                                         "flex items-center px-3 py-3.5 transition-all rounded-xl duration-200",
                                         isExpanded ? "justify-start" : "justify-center",
-                                        activeItem === item.id 
-                                            ? "bg-brand-green dark:bg-brand-gold text-white dark:text-[#00313A] shadow-lg" 
+                                        activeItem === item.id
+                                            ? "bg-brand-green dark:bg-brand-gold text-white dark:text-[#00313A] shadow-lg"
                                             : "text-white hover:bg-[#004D5C] hover:shadow-md",
                                     )}
                                 >
diff --git a/context/ChatContext.tsx b/context/ChatContext.tsx
index f0ee91a..c8e3bad 100644
--- a/context/ChatContext.tsx
+++ b/context/ChatContext.tsx
@@ -37,6 +37,7 @@ interface ChatContextType {
     updateMessageReadStatus: (chatId: string, messageId: string, readBy: any) => void;
     refreshConversations: () => void;
     refreshMessages: (chatId: string) => void;
+    clearChatState: () => void;
 }
 
 const ChatContext = createContext<ChatContextType | undefined>(undefined);
@@ -63,6 +64,19 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({ children }) => {
     useEffect(() => {
         const currentToken = getToken();
         const currentUserId = getUserId();
+        
+        // If userId changes (different user logged in), clear all state
+        if (userId && currentUserId && userId !== currentUserId) {
+            console.log('Different user detected, clearing chat state');
+            setConversations([]);
+            setActiveChat(null);
+            setMessages({});
+            setTypingUsers([]);
+            setOnlineUsers([]);
+            setParticipantsStatus({});
+            socketService.forceDisconnect();
+        }
+        
         setToken(currentToken);
         setUserId(currentUserId);
         
@@ -73,6 +87,19 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({ children }) => {
         const handleAuthTokenChange = (event: CustomEvent) => {
             const newToken = getToken();
             const newUserId = getUserId();
+            
+            // If user changed, clear state
+            if (userId && newUserId && userId !== newUserId) {
+                console.log('User changed via token event, clearing chat state');
+                setConversations([]);
+                setActiveChat(null);
+                setMessages({});
+                setTypingUsers([]);
+                setOnlineUsers([]);
+                setParticipantsStatus({});
+                socketService.forceDisconnect();
+            }
+            
             setToken(newToken);
             setUserId(newUserId);
         };
@@ -82,7 +109,7 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({ children }) => {
         return () => {
             window.removeEventListener('authTokenChanged', handleAuthTokenChange as EventListener);
         };
-    }, [getToken, getUserId]);
+    }, [getToken, getUserId, userId]);
 
     const { data: chatsData, refetch: refetchChats } = useGetUserChatsQuery(undefined, {
         skip: !token
@@ -571,6 +598,22 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({ children }) => {
         }));
     }, []);
 
+    const clearChatState = useCallback(() => {
+        // Disconnect socket properly
+        socketService.disconnect();
+        
+        // Clear all state
+        setConversations([]);
+        setActiveChat(null);
+        setMessages({});
+        setTypingUsers([]);
+        setOnlineUsers([]);
+        setParticipantsStatus({});
+        setIsConnected(false);
+        setUserId(null);
+        setToken(null);
+    }, []);
+
     const value: ChatContextType = {
         isConnected,
         conversations,
@@ -593,7 +636,8 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({ children }) => {
         leaveChat,
         markMessageRead,
         addMessage,
-        updateMessageReadStatus
+        updateMessageReadStatus,
+        clearChatState
     };
 
     return (
diff --git a/context/NotificationContext.ts b/context/NotificationContext.ts
index 9701280..5369204 100644
--- a/context/NotificationContext.ts
+++ b/context/NotificationContext.ts
@@ -29,16 +29,39 @@ export const NotificationProvider: React.FC<NotificationProviderProps> = ({ chil
     const { getToken } = useAuthToken()
     const reconnectTimeoutRef = useRef<NodeJS.Timeout | null>(null)
     const [authToken, setAuthToken] = useState<string | null>(null)
+    const [currentUserId, setCurrentUserId] = useState<string | null>(null)
 
     // Monitor token changes to trigger reconnection
     useEffect(() => {
         const token = getToken()
+        const userId = token ? getUserIdFromToken(token) : null
+        
+        // If userId changes (different user logged in), clear all notifications
+        if (currentUserId && userId && currentUserId !== userId) {
+            console.log('Different user detected, clearing notification state')
+            setNotifications([])
+            setUnreadCount(0)
+            setIsConnected(false)
+        }
+        
         setAuthToken(token)
+        setCurrentUserId(userId)
 
         // Listen for token changes via custom event
         const handleAuthTokenChange = (event: CustomEvent) => {
             const newToken = getToken()
+            const newUserId = newToken ? getUserIdFromToken(newToken) : null
+            
+            // If user changed, clear notifications
+            if (currentUserId && newUserId && currentUserId !== newUserId) {
+                console.log('User changed via token event, clearing notification state')
+                setNotifications([])
+                setUnreadCount(0)
+                setIsConnected(false)
+            }
+            
             setAuthToken(newToken)
+            setCurrentUserId(newUserId)
         }
 
         window.addEventListener('authTokenChanged', handleAuthTokenChange as EventListener)
@@ -46,7 +69,7 @@ export const NotificationProvider: React.FC<NotificationProviderProps> = ({ chil
         return () => {
             window.removeEventListener('authTokenChanged', handleAuthTokenChange as EventListener)
         }
-    }, [getToken])
+    }, [getToken, currentUserId])
 
     const addNotification = useCallback((notification: Notification) => {
         setNotifications((prev) => {
@@ -80,6 +103,20 @@ export const NotificationProvider: React.FC<NotificationProviderProps> = ({ chil
         setUnreadCount(0)
     }, [])
 
+    const clearNotificationState = useCallback(() => {
+        // Disconnect notification listeners
+        const socket = socketService.getSocket();
+        if (socket) {
+            socketService.offNotification();
+        }
+        
+        // Clear all state
+        setNotifications([]);
+        setUnreadCount(0);
+        setIsConnected(false);
+        setAuthToken(null);
+    }, []);
+
     const removeNotification = useCallback((notificationId: string) => {
         setNotifications((prev) => {
             const notification = prev.find(n => n.id === notificationId)
@@ -356,6 +393,7 @@ export const NotificationProvider: React.FC<NotificationProviderProps> = ({ chil
         removeNotification,
         removeContactRequestNotification,
         isConnected,
+        clearNotificationState,
     }
 
     return React.createElement(
diff --git a/services/socketService.ts b/services/socketService.ts
index ffa2b6c..7b9ac3b 100644
--- a/services/socketService.ts
+++ b/services/socketService.ts
@@ -60,6 +60,18 @@ class SocketService {
         }
     }
 
+    // Force disconnect (for logout)
+    forceDisconnect() {
+        console.log("Force disconnecting socket")
+        if (this.socket) {
+            this.socket.removeAllListeners()
+            this.socket.disconnect()
+            this.socket = null
+        }
+        this.userId = null
+        this.connectionCount = 0
+    }
+
     // Listen for real-time notifications
     onNotification(callback: (notification: any) => void) {
         if (this.socket) {
diff --git a/types/notification.types.ts b/types/notification.types.ts
index 8d1b8f6..2052a7d 100644
--- a/types/notification.types.ts
+++ b/types/notification.types.ts
@@ -67,4 +67,5 @@ export interface NotificationContextType {
   removeNotification?: (id: string) => void;
   removeContactRequestNotification?: (userId: string) => void;
   isConnected?: boolean;
+  clearNotificationState?: () => void;
 }