From 9ea54ed90ffec958f1a59b4349c7c5b877a08b6c Mon Sep 17 00:00:00 2001
From: Nathan Lamy <nathan.lamycharrier@gmail.com>
Date: Wed, 30 Jul 2025 13:08:43 +0200
Subject: [PATCH] fix: invalidate user cache on logout

---
 app/components/user-dropdown.tsx | 56 +++++++++++++++++---------------
 1 file changed, 30 insertions(+), 26 deletions(-)

diff --git a/app/components/user-dropdown.tsx b/app/components/user-dropdown.tsx
index 4e68464..8115d7f 100644
--- a/app/components/user-dropdown.tsx
+++ b/app/components/user-dropdown.tsx
@@ -21,6 +21,7 @@ import {
 // import { useTheme } from "~/components/ui/theme-provider";
 import { useNavigate } from "react-router";
 import { logout, type User } from "~/lib/api";
+import { useQueryClient } from "@tanstack/react-query";
 
 export default function UserDropdown({ user }: { user: User }) {
   // TODO: const { theme, setTheme } = useTheme();
@@ -28,14 +29,22 @@ export default function UserDropdown({ user }: { user: User }) {
   const [open, setOpen] = useState(false);
   const navigate = useNavigate();
 
-  const handleLogout = async () => {
-    try {
-      await logout();
-      navigate("/login", { replace: true });
-    } catch (error) {
-      console.error("Logout failed:", error);
-    }
-  }
+  const useLogout = () => {
+    const queryClient = useQueryClient();
+
+    // Logout, invalidate user cache, and redirect to login
+    return async () => {
+      try {
+        await logout();
+        queryClient.removeQueries({ queryKey: ["user"] });
+        navigate("/login", { replace: true });
+      } catch (error) {
+        console.error("Logout failed:", error);
+      }
+    };
+  };
+
+  const handleLogout = useLogout();
 
   return (
     <DropdownMenu open={open} onOpenChange={setOpen}>
@@ -57,9 +66,7 @@ export default function UserDropdown({ user }: { user: User }) {
       <DropdownMenuContent align="end" className="w-56">
         <DropdownMenuLabel>
           <div className="flex flex-col space-y-1">
-            <p className="text-sm font-medium leading-none">
-              {user.fullName}
-            </p>
+            <p className="text-sm font-medium leading-none">{user.fullName}</p>
             <p className="text-xs leading-none text-muted-foreground">
               {user.className}
             </p>
@@ -87,29 +94,26 @@ export default function UserDropdown({ user }: { user: User }) {
               e.stopPropagation();
               e.preventDefault();
               navigate("/settings");
-            }}>
+            }}
+          >
             <Settings className="mr-2 h-4 w-4" />
-            <span>
-              Paramètres
-            </span>
+            <span>Paramètres</span>
           </DropdownMenuItem>
-          <DropdownMenuItem onClick={(e) => {
-            e.stopPropagation();
-            e.preventDefault();
-            navigate("/progress");
-          }}>
+          <DropdownMenuItem
+            onClick={(e) => {
+              e.stopPropagation();
+              e.preventDefault();
+              navigate("/progress");
+            }}
+          >
             <LineChartIcon className="mr-2 h-4 w-4" />
-            <span
-
-            >
-              Progression
-            </span>
+            <span>Progression</span>
           </DropdownMenuItem>
         </DropdownMenuGroup>
         <DropdownMenuSeparator />
         <DropdownMenuItem onClick={handleLogout}>
           <LogOut className="mr-2 h-4 w-4" />
-          <span >Se déconnecter</span>
+          <span>Se déconnecter</span>
         </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>