fix: invalidate user cache on logout

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 () => {
+  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) => {
+          <DropdownMenuItem
+            onClick={(e) => {
               e.stopPropagation();
               e.preventDefault();
               navigate("/progress");
-          }}>
-            <LineChartIcon className="mr-2 h-4 w-4" />
-            <span
-
+            }}
           >
-              Progression
-            </span>
+            <LineChartIcon className="mr-2 h-4 w-4" />
+            <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>