julienfroidefond/stripstream
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: loader on pagination

Browse Source
This commit is contained in:
Julien Froidefond
2025-02-15 17:04:17 +01:00
parent 27c35fc000
commit c4cb97fa8e
2 changed files with 27 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/library/PaginatedSeriesGrid.tsx
View File

@@ -6,6 +6,7 @@ import { useRouter, usePathname, useSearchParams } from "next/navigation";
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { Loader2, Filter } from "lucide-react"; import { Loader2, Filter } from "lucide-react";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { useNetworkRequest } from "@/lib/hooks/use-network-request";
interface PaginatedSeriesGridProps { interface PaginatedSeriesGridProps {
series: any[]; series: any[];
@@ -25,6 +26,7 @@ export function PaginatedSeriesGrid({
const router = useRouter(); const router = useRouter();
const pathname = usePathname(); const pathname = usePathname();
const searchParams = useSearchParams(); const searchParams = useSearchParams();
const { executeRequest } = useNetworkRequest();
const [isChangingPage, setIsChangingPage] = useState(false); const [isChangingPage, setIsChangingPage] = useState(false);
const [showOnlyUnread, setShowOnlyUnread] = useState(searchParams.get("unread") === "true"); const [showOnlyUnread, setShowOnlyUnread] = useState(searchParams.get("unread") === "true");
@@ -33,22 +35,24 @@ export function PaginatedSeriesGrid({
setIsChangingPage(false); setIsChangingPage(false);
}, [series]); }, [series]);
const handlePageChange = (page: number) => { const handlePageChange = async (page: number) => {
setIsChangingPage(true); setIsChangingPage(true);
// Créer un nouvel objet URLSearchParams pour manipuler les paramètres // Créer un nouvel objet URLSearchParams pour manipuler les paramètres
const params = new URLSearchParams(searchParams); const params = new URLSearchParams(searchParams.toString());
params.set("page", page.toString()); params.set("page", page.toString());
if (showOnlyUnread) { if (showOnlyUnread) {
params.set("unread", "true"); params.set("unread", "true");
} }
// Rediriger vers la nouvelle URL avec les paramètres mis à jour // Rediriger vers la nouvelle URL avec les paramètres mis à jour
router.push(`${pathname}?${params.toString()}`); await executeRequest(async () => {
router.push(`${pathname}?${params.toString()}`);
});
}; };
const handleUnreadFilter = () => { const handleUnreadFilter = async () => {
setIsChangingPage(true); setIsChangingPage(true);
const params = new URLSearchParams(searchParams); const params = new URLSearchParams(searchParams.toString());
params.set("page", "1"); // Retourner à la première page lors du changement de filtre params.set("page", "1"); // Retourner à la première page lors du changement de filtre
if (!showOnlyUnread) { if (!showOnlyUnread) {
@@ -58,7 +62,9 @@ export function PaginatedSeriesGrid({
} }
setShowOnlyUnread(!showOnlyUnread); setShowOnlyUnread(!showOnlyUnread);
router.push(`${pathname}?${params.toString()}`); await executeRequest(async () => {
router.push(`${pathname}?${params.toString()}`);
});
}; };
// Calcul des indices de début et de fin pour l'affichage // Calcul des indices de début et de fin pour l'affichage

26
src/components/series/PaginatedBookGrid.tsx
View File

@@ -7,6 +7,7 @@ import { useState, useEffect } from "react";
import { Loader2, Filter } from "lucide-react"; import { Loader2, Filter } from "lucide-react";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { KomgaBook } from "@/types/komga"; import { KomgaBook } from "@/types/komga";
import { useNetworkRequest } from "@/lib/hooks/use-network-request";
interface PaginatedBookGridProps { interface PaginatedBookGridProps {
books: KomgaBook[]; books: KomgaBook[];
@@ -26,6 +27,7 @@ export function PaginatedBookGrid({
const router = useRouter(); const router = useRouter();
const pathname = usePathname(); const pathname = usePathname();
const searchParams = useSearchParams(); const searchParams = useSearchParams();
const { executeRequest } = useNetworkRequest();
const [isChangingPage, setIsChangingPage] = useState(false); const [isChangingPage, setIsChangingPage] = useState(false);
const [showOnlyUnread, setShowOnlyUnread] = useState(searchParams.get("unread") === "true"); const [showOnlyUnread, setShowOnlyUnread] = useState(searchParams.get("unread") === "true");
@@ -34,22 +36,24 @@ export function PaginatedBookGrid({
setIsChangingPage(false); setIsChangingPage(false);
}, [books]); }, [books]);
const handlePageChange = (page: number) => { const handlePageChange = async (page: number) => {
setIsChangingPage(true); setIsChangingPage(true);
// Créer un nouvel objet URLSearchParams pour manipuler les paramètres // Créer un nouvel objet URLSearchParams pour manipuler les paramètres
const params = new URLSearchParams(searchParams); const params = new URLSearchParams(searchParams.toString());
params.set("page", page.toString()); params.set("page", page.toString());
if (showOnlyUnread) { if (showOnlyUnread) {
params.set("unread", "true"); params.set("unread", "true");
} }
// Rediriger vers la nouvelle URL avec les paramètres mis à jour // Rediriger vers la nouvelle URL avec les paramètres mis à jour
router.push(`${pathname}?${params.toString()}`); await executeRequest(async () => {
router.push(`${pathname}?${params.toString()}`);
});
}; };
const handleUnreadFilter = () => { const handleUnreadFilter = async () => {
setIsChangingPage(true); setIsChangingPage(true);
const params = new URLSearchParams(searchParams); const params = new URLSearchParams(searchParams.toString());
params.set("page", "1"); // Retourner à la première page lors du changement de filtre params.set("page", "1"); // Retourner à la première page lors du changement de filtre
if (!showOnlyUnread) { if (!showOnlyUnread) {
@@ -59,15 +63,15 @@ export function PaginatedBookGrid({
} }
setShowOnlyUnread(!showOnlyUnread); setShowOnlyUnread(!showOnlyUnread);
router.push(`${pathname}?${params.toString()}`); await executeRequest(async () => {
router.push(`${pathname}?${params.toString()}`);
});
}; };
const handleBookClick = (book: KomgaBook) => { const handleBookClick = async (book: KomgaBook) => {
console.log("PaginatedBookGrid - handleBookClick:", { await executeRequest(async () => {
bookId: book.id, router.push(`/books/${book.id}`);
bookTitle: book.metadata.title,
}); });
router.push(`/books/${book.id}`);
}; };
// Calcul des indices de début et de fin pour l'affichage // Calcul des indices de début et de fin pour l'affichage