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

refactor: simplify preferences handling and enhance pagination functionality in series grid

Browse Source
This commit is contained in:
Julien Froidefond
2025-04-01 07:01:40 +02:00
parent a2c7519ac5
commit 31b5930705
11 changed files with 201 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/components/common/CompactModeButton.tsx Normal file
View File

@@ -0,0 +1,37 @@
import { useDisplayPreferences } from "@/hooks/useDisplayPreferences";
import { useTranslate } from "@/hooks/useTranslate";
import { LayoutGrid, LayoutTemplate } from "lucide-react";
interface CompactModeButtonProps {
onToggle?: (isCompact: boolean) => void;
}
export function CompactModeButton({ onToggle }: CompactModeButtonProps) {
const { isCompact, handleCompactToggle } = useDisplayPreferences();
const { t } = useTranslate();
const handleClick = async () => {
const newCompactState = !isCompact;
await handleCompactToggle(newCompactState);
onToggle?.(newCompactState);
};
return (
<button
onClick={handleClick}
className="inline-flex items-center gap-2 px-2 py-1.5 text-sm font-medium rounded-lg hover:bg-accent hover:text-accent-foreground whitespace-nowrap"
>
{isCompact ? (
<>
<LayoutTemplate className="h-4 w-4" />
{t("series.filters.normal")}
</>
) : (
<>
<LayoutGrid className="h-4 w-4" />
{t("series.filters.compact")}
</>
)}
</button>
);
}

37
src/components/common/PageSizeSelect.tsx Normal file
View File

@@ -0,0 +1,37 @@
import { useDisplayPreferences } from "@/hooks/useDisplayPreferences";
import { LayoutList } from "lucide-react";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
interface PageSizeSelectProps {
onSizeChange?: (size: number) => void;
}
export function PageSizeSelect({ onSizeChange }: PageSizeSelectProps) {
const { itemsPerPage, handlePageSizeChange } = useDisplayPreferences();
const handleChange = async (value: string) => {
const size = parseInt(value);
await handlePageSizeChange(size);
onSizeChange?.(size);
};
return (
<Select value={itemsPerPage.toString()} onValueChange={handleChange}>
<SelectTrigger className="w-[80px]">
<LayoutList className="h-4 w-4 mr-2" />
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="20">20</SelectItem>
<SelectItem value="50">50</SelectItem>
<SelectItem value="100">100</SelectItem>
</SelectContent>
</Select>
);
}

21
src/components/common/UnreadFilterButton.tsx Normal file
View File

@@ -0,0 +1,21 @@
import { useTranslate } from "@/hooks/useTranslate";
import { Filter } from "lucide-react";
interface UnreadFilterButtonProps {
showOnlyUnread: boolean;
onToggle: () => void;
}
export function UnreadFilterButton({ showOnlyUnread, onToggle }: UnreadFilterButtonProps) {
const { t } = useTranslate();
return (
<button
onClick={onToggle}
className="inline-flex items-center gap-2 px-2 py-1.5 text-sm font-medium rounded-lg hover:bg-accent hover:text-accent-foreground whitespace-nowrap"
>
<Filter className="h-4 w-4" />
{showOnlyUnread ? t("series.filters.showAll") : t("series.filters.unread")}
</button>
);
}

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

@@ -4,19 +4,15 @@ import { SeriesGrid } from "./SeriesGrid";
import { Pagination } from "@/components/ui/Pagination";
import { useRouter, usePathname, useSearchParams } from "next/navigation";
import { useState, useEffect } from "react";
import { Loader2, Filter, LayoutGrid, LayoutList, LayoutTemplate } from "lucide-react";
import { Loader2 } from "lucide-react";
import { cn } from "@/lib/utils";
import type { KomgaSeries } from "@/types/komga";
import { SearchInput } from "./SearchInput";
import { useTranslate } from "@/hooks/useTranslate";
import { useDisplayPreferences } from "@/hooks/useDisplayPreferences";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { PageSizeSelect } from "@/components/common/PageSizeSelect";
import { CompactModeButton } from "@/components/common/CompactModeButton";
import { UnreadFilterButton } from "@/components/common/UnreadFilterButton";
interface PaginatedSeriesGridProps {
series: KomgaSeries[];
@@ -40,15 +36,13 @@ export function PaginatedSeriesGrid({
const searchParams = useSearchParams();
const [isChangingPage, setIsChangingPage] = useState(false);
const [showOnlyUnread, setShowOnlyUnread] = useState(initialShowOnlyUnread);
const { isCompact, itemsPerPage, handleCompactToggle, handlePageSizeChange } =
useDisplayPreferences();
const { isCompact, itemsPerPage } = useDisplayPreferences();
const { t } = useTranslate();
const updateUrlParams = async (updates: Record<string, string | null>) => {
setIsChangingPage(true);
const params = new URLSearchParams(searchParams.toString());
// Mettre à jour les paramètres
Object.entries(updates).forEach(([key, value]) => {
if (value === null) {
params.delete(key);
@@ -90,21 +84,17 @@ export function PaginatedSeriesGrid({
});
};
const handleCompactToggleClick = async () => {
const newCompactState = !isCompact;
await handleCompactToggle(newCompactState);
const handleCompactToggle = async (newCompactState: boolean) => {
await updateUrlParams({
page: "1",
compact: newCompactState.toString(),
});
};
const handlePageSizeChangeClick = async (value: string) => {
const size = parseInt(value);
await handlePageSizeChange(size);
const handlePageSizeChange = async (size: number) => {
await updateUrlParams({
page: "1",
size: value,
size: size.toString(),
});
};
@@ -124,46 +114,17 @@ export function PaginatedSeriesGrid({
return (
<div className="space-y-8">
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<div className="w-full sm:w-auto sm:flex-1">
<SearchInput placeholder={t("series.filters.search")} />
</div>
<div className="flex items-center gap-2">
<p className="text-sm text-muted-foreground">{getShowingText()}</p>
<Select value={itemsPerPage.toString()} onValueChange={handlePageSizeChangeClick}>
<SelectTrigger className="w-[80px]">
<LayoutList className="h-4 w-4 mr-2" />
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="20">20</SelectItem>
<SelectItem value="50">50</SelectItem>
<SelectItem value="100">100</SelectItem>
</SelectContent>
</Select>
<button
onClick={handleCompactToggleClick}
className="inline-flex items-center gap-2 px-2 py-1.5 text-sm font-medium rounded-lg hover:bg-accent hover:text-accent-foreground whitespace-nowrap"
>
{isCompact ? (
<>
<LayoutTemplate className="h-4 w-4" />
{t("series.filters.normal")}
</>
) : (
<>
<LayoutGrid className="h-4 w-4" />
{t("series.filters.compact")}
</>
)}
</button>
<button
onClick={handleUnreadFilter}
className="inline-flex items-center gap-2 px-2 py-1.5 text-sm font-medium rounded-lg hover:bg-accent hover:text-accent-foreground whitespace-nowrap"
>
<Filter className="h-4 w-4" />
{showOnlyUnread ? t("series.filters.showAll") : t("series.filters.unread")}
</button>
<div className="flex flex-col gap-4">
<p className="text-sm text-muted-foreground text-right">{getShowingText()}</p>
<div className="flex flex-col sm:flex-row sm:items-center gap-4">
<div className="w-full">
<SearchInput placeholder={t("series.filters.search")} />
</div>
<div className="flex items-center justify-end gap-2">
<PageSizeSelect onSizeChange={handlePageSizeChange} />
<CompactModeButton onToggle={handleCompactToggle} />
<UnreadFilterButton showOnlyUnread={showOnlyUnread} onToggle={handleUnreadFilter} />
</div>
</div>
</div>

2
src/components/library/SearchInput.tsx
View File

@@ -34,7 +34,7 @@ export const SearchInput = ({ placeholder }: SearchInputProps) => {
}, 300);
return (
<div className="relative w-full max-w-sm">
<div className="relative w-full max-w-md">
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
<Input
type={isPending ? "text" : "search"}

21
src/components/series/BookGrid.tsx
View File

@@ -4,13 +4,15 @@ import type { KomgaBook } from "@/types/komga";
import { BookCover } from "@/components/ui/book-cover";
import { useState, useEffect } from "react";
import { useTranslate } from "@/hooks/useTranslate";
import { cn } from "@/lib/utils";
interface BookGridProps {
books: KomgaBook[];
onBookClick: (book: KomgaBook) => void;
isCompact?: boolean;
}
export function BookGrid({ books, onBookClick }: BookGridProps) {
export function BookGrid({ books, onBookClick, isCompact = false }: BookGridProps) {
const [localBooks, setLocalBooks] = useState(books);
const { t } = useTranslate();
@@ -21,10 +23,11 @@ export function BookGrid({ books, onBookClick }: BookGridProps) {
if (!localBooks.length) {
return (
<div className="text-center p-8">
<p className="text-muted-foreground">{t("books.empty")}</p>
<p className="text-muted-foreground whitespace-pre-line">{t("books.empty")}</p>
</div>
);
}
const handleOnSuccess = (book: KomgaBook, action: "read" | "unread") => {
if (action === "read") {
setLocalBooks(
@@ -58,12 +61,22 @@ export function BookGrid({ books, onBookClick }: BookGridProps) {
};
return (
<div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6">
<div
className={cn(
"grid gap-4",
isCompact
? "grid-cols-3 sm:grid-cols-4 lg:grid-cols-6"
: "grid-cols-2 sm:grid-cols-3 lg:grid-cols-5"
)}
>
{localBooks.map((book) => {
return (
<div
key={book.id}
className="group relative aspect-[2/3] overflow-hidden rounded-lg bg-muted"
className={cn(
"group relative aspect-[2/3] overflow-hidden rounded-lg bg-muted",
isCompact ? "hover:scale-105 transition-transform" : ""
)}
>
<div
onClick={() => onBookClick(book)}

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

@@ -4,17 +4,20 @@ import { BookGrid } from "./BookGrid";
import { Pagination } from "@/components/ui/Pagination";
import { useRouter, usePathname, useSearchParams } from "next/navigation";
import { useState, useEffect } from "react";
import { Loader2, Filter } from "lucide-react";
import { Loader2 } from "lucide-react";
import { cn } from "@/lib/utils";
import type { KomgaBook } from "@/types/komga";
import { useTranslate } from "@/hooks/useTranslate";
import { useDisplayPreferences } from "@/hooks/useDisplayPreferences";
import { PageSizeSelect } from "@/components/common/PageSizeSelect";
import { CompactModeButton } from "@/components/common/CompactModeButton";
import { UnreadFilterButton } from "@/components/common/UnreadFilterButton";
interface PaginatedBookGridProps {
books: KomgaBook[];
currentPage: number;
totalPages: number;
totalElements: number;
pageSize: number;
defaultShowOnlyUnread: boolean;
showOnlyUnread: boolean;
}
@@ -24,7 +27,6 @@ export function PaginatedBookGrid({
currentPage,
totalPages,
totalElements,
pageSize,
defaultShowOnlyUnread,
showOnlyUnread: initialShowOnlyUnread,
}: PaginatedBookGridProps) {
@@ -33,55 +35,75 @@ export function PaginatedBookGrid({
const searchParams = useSearchParams();
const [isChangingPage, setIsChangingPage] = useState(false);
const [showOnlyUnread, setShowOnlyUnread] = useState(initialShowOnlyUnread);
const { isCompact, itemsPerPage } = useDisplayPreferences();
const { t } = useTranslate();
// Réinitialiser l'état de chargement quand les tomes changent
const updateUrlParams = async (updates: Record<string, string | null>) => {
setIsChangingPage(true);
const params = new URLSearchParams(searchParams.toString());
Object.entries(updates).forEach(([key, value]) => {
if (value === null) {
params.delete(key);
} else {
params.set(key, value);
}
});
await router.push(`${pathname}?${params.toString()}`);
};
// Reset loading state when books change
useEffect(() => {
setIsChangingPage(false);
}, [books]);
// Mettre à jour l'état local quand la prop change
// Update local state when prop changes
useEffect(() => {
setShowOnlyUnread(initialShowOnlyUnread);
}, [initialShowOnlyUnread]);
// Appliquer le filtre par défaut au chargement initial
// Apply default filter on initial load
useEffect(() => {
if (defaultShowOnlyUnread && !searchParams.has("unread")) {
const params = new URLSearchParams(searchParams.toString());
params.set("page", "1");
params.set("unread", "true");
router.push(`${pathname}?${params.toString()}`);
updateUrlParams({ page: "1", unread: "true" });
}
}, [defaultShowOnlyUnread, pathname, router, searchParams]);
const handlePageChange = async (page: number) => {
setIsChangingPage(true);
const params = new URLSearchParams(searchParams.toString());
params.set("page", page.toString());
params.set("unread", showOnlyUnread.toString());
await router.push(`${pathname}?${params.toString()}`);
await updateUrlParams({ page: page.toString() });
};
const handleUnreadFilter = async () => {
setIsChangingPage(true);
const params = new URLSearchParams(searchParams.toString());
params.set("page", "1");
const newUnreadState = !showOnlyUnread;
setShowOnlyUnread(newUnreadState);
params.set("unread", newUnreadState.toString());
await updateUrlParams({
page: "1",
unread: newUnreadState ? "true" : "false",
});
};
await router.push(`${pathname}?${params.toString()}`);
const handleCompactToggle = async (newCompactState: boolean) => {
await updateUrlParams({
page: "1",
compact: newCompactState.toString(),
});
};
const handlePageSizeChange = async (size: number) => {
await updateUrlParams({
page: "1",
size: size.toString(),
});
};
const handleBookClick = (book: KomgaBook) => {
router.push(`/books/${book.id}`);
};
// Calcul des indices de début et de fin pour l'affichage
const startIndex = (currentPage - 1) * pageSize + 1;
const endIndex = Math.min(currentPage * pageSize, totalElements);
// Calculate start and end indices for display
const startIndex = (currentPage - 1) * itemsPerPage + 1;
const endIndex = Math.min(currentPage * itemsPerPage, totalElements);
const getShowingText = () => {
if (!totalElements) return t("books.empty");
@@ -95,19 +117,17 @@ export function PaginatedBookGrid({
return (
<div className="space-y-8 py-8">
<div className="flex items-center justify-between flex-wrap gap-4">
<p className="text-sm text-muted-foreground flex-1 min-w-[200px]">{getShowingText()}</p>
<button
onClick={handleUnreadFilter}
className="inline-flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-lg hover:bg-accent hover:text-accent-foreground whitespace-nowrap ml-auto"
>
<Filter className="h-4 w-4" />
{showOnlyUnread ? t("books.filters.showAll") : t("books.filters.unread")}
</button>
<div className="flex flex-col gap-4">
<p className="text-sm text-muted-foreground text-right">{getShowingText()}</p>
<div className="flex items-center justify-end gap-2">
<PageSizeSelect onSizeChange={handlePageSizeChange} />
<CompactModeButton onToggle={handleCompactToggle} />
<UnreadFilterButton showOnlyUnread={showOnlyUnread} onToggle={handleUnreadFilter} />
</div>
</div>
<div className="relative">
{/* Indicateur de chargement */}
{/* Loading indicator */}
{isChangingPage && (
<div className="absolute inset-0 flex items-center justify-center bg-background/50 backdrop-blur-sm z-10">
<div className="flex items-center gap-2 px-4 py-2 rounded-full bg-background border shadow-sm">
@@ -117,14 +137,14 @@ export function PaginatedBookGrid({
</div>
)}
{/* Grille avec animation de transition */}
{/* Grid with transition animation */}
<div
className={cn(
"transition-opacity duration-200",
isChangingPage ? "opacity-25" : "opacity-100"
)}
>
<BookGrid books={books} onBookClick={handleBookClick} />
<BookGrid books={books} onBookClick={handleBookClick} isCompact={isCompact} />
</div>
</div>