fix: ne pas charger les bibliothèques dans la sidebar en mode déconnecté

This commit is contained in:
Julien Froidefond
2025-02-12 15:51:57 +01:00
parent a4d0848334
commit b7cb466ef5

View File

@@ -15,9 +15,22 @@ export function Sidebar({ isOpen }: SidebarProps) {
const router = useRouter(); const router = useRouter();
const [libraries, setLibraries] = useState<KomgaLibrary[]>([]); const [libraries, setLibraries] = useState<KomgaLibrary[]>([]);
const [isLoading, setIsLoading] = useState(true); const [isLoading, setIsLoading] = useState(true);
const [isAuthenticated, setIsAuthenticated] = useState(false);
useEffect(() => { useEffect(() => {
// Vérifier si l'utilisateur est authentifié
const checkAuth = () => {
const isAuth = authService.isAuthenticated();
setIsAuthenticated(isAuth);
return isAuth;
};
const fetchLibraries = async () => { const fetchLibraries = async () => {
if (!checkAuth()) {
setIsLoading(false);
return;
}
try { try {
const response = await fetch("/api/komga/libraries"); const response = await fetch("/api/komga/libraries");
if (!response.ok) { if (!response.ok) {
@@ -33,10 +46,12 @@ export function Sidebar({ isOpen }: SidebarProps) {
}; };
fetchLibraries(); fetchLibraries();
}, []); }, [pathname]); // Recharger quand le pathname change pour gérer la déconnexion
const handleLogout = () => { const handleLogout = () => {
authService.logout(); authService.logout();
setIsAuthenticated(false);
setLibraries([]);
router.push("/login"); router.push("/login");
}; };
@@ -78,58 +93,63 @@ export function Sidebar({ isOpen }: SidebarProps) {
</div> </div>
</div> </div>
<div className="px-3 py-2"> {isAuthenticated && (
<div className="space-y-1"> <>
<h2 className="mb-2 px-4 text-lg font-semibold tracking-tight">Bibliothèques</h2> <div className="px-3 py-2">
{isLoading ? ( <div className="space-y-1">
<div className="px-3 py-2 text-sm text-muted-foreground">Chargement...</div> <h2 className="mb-2 px-4 text-lg font-semibold tracking-tight">Bibliothèques</h2>
) : libraries.length === 0 ? ( {isLoading ? (
<div className="px-3 py-2 text-sm text-muted-foreground">Aucune bibliothèque</div> <div className="px-3 py-2 text-sm text-muted-foreground">Chargement...</div>
) : ( ) : libraries.length === 0 ? (
libraries.map((library) => ( <div className="px-3 py-2 text-sm text-muted-foreground">Aucune bibliothèque</div>
) : (
libraries.map((library) => (
<Link
key={library.id}
href={`/libraries/${library.id}`}
className={cn(
"flex items-center rounded-lg px-3 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground",
pathname === `/libraries/${library.id}` ? "bg-accent" : "transparent"
)}
>
<Library className="mr-2 h-4 w-4" />
{library.name}
</Link>
))
)}
</div>
</div>
<div className="px-3 py-2">
<div className="space-y-1">
<h2 className="mb-2 px-4 text-lg font-semibold tracking-tight">Configuration</h2>
<Link <Link
key={library.id} href="/settings"
href={`/libraries/${library.id}`}
className={cn( className={cn(
"flex items-center rounded-lg px-3 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground", "flex items-center rounded-lg px-3 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground",
pathname === `/libraries/${library.id}` ? "bg-accent" : "transparent" pathname === "/settings" ? "bg-accent" : "transparent"
)} )}
> >
<Library className="mr-2 h-4 w-4" /> <Settings className="mr-2 h-4 w-4" />
{library.name} Préférences
</Link> </Link>
)) </div>
)} </div>
</div> </>
</div> )}
<div className="px-3 py-2">
<div className="space-y-1">
<h2 className="mb-2 px-4 text-lg font-semibold tracking-tight">Configuration</h2>
<Link
href="/settings"
className={cn(
"flex items-center rounded-lg px-3 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground",
pathname === "/settings" ? "bg-accent" : "transparent"
)}
>
<Settings className="mr-2 h-4 w-4" />
Préférences
</Link>
</div>
</div>
</div> </div>
{/* Bouton de déconnexion */} {isAuthenticated && (
<div className="p-3 border-t border-border/40"> <div className="p-3 border-t border-border/40">
<button <button
onClick={handleLogout} onClick={handleLogout}
className="flex w-full items-center rounded-lg px-3 py-2 text-sm font-medium text-destructive hover:bg-destructive/10 hover:text-destructive" className="flex w-full items-center rounded-lg px-3 py-2 text-sm font-medium text-destructive hover:bg-destructive/10 hover:text-destructive"
> >
<LogOut className="mr-2 h-4 w-4" /> <LogOut className="mr-2 h-4 w-4" />
Se déconnecter Se déconnecter
</button> </button>
</div> </div>
)}
</aside> </aside>
); );
} }