khollise/frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: invalidate user cache on logout

Browse source
This commit is contained in:
Nathan Lamy 2025-07-30 13:08:43 +02:00
parent ef2d65d261
commit 9ea54ed90f
1 changed files with 30 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
app/components/user-dropdown.tsx
View file

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