feat: persistance des filtres server-side via cookies
All checks were successful
Deploy with Docker Compose / deploy (push) Successful in 47s

Remplace localStorage par des cookies pour la persistance des filtres.
Le proxy restaure les filtres sauvegardés côté serveur, éliminant le flash au chargement.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-26 22:45:48 +01:00
parent 274b605a27
commit 072d6870fe
2 changed files with 60 additions and 36 deletions

View File

@@ -39,7 +39,19 @@ interface LiveSearchFormProps {
debounceMs?: number;
}
const STORAGE_KEY_PREFIX = "filters:";
/** Convert a basePath to a cookie name: /series → filters_series */
function filterCookieName(basePath: string): string {
return `filters_${basePath.replace(/^\//, "").replace(/\//g, "_")}`;
}
function setCookie(name: string, value: string, days = 365) {
const expires = new Date(Date.now() + days * 864e5).toUTCString();
document.cookie = `${name}=${encodeURIComponent(value)};path=/;expires=${expires};SameSite=Lax`;
}
function deleteCookie(name: string) {
document.cookie = `${name}=;path=/;expires=Thu, 01 Jan 1970 00:00:00 GMT`;
}
export function LiveSearchForm({ fields, basePath, debounceMs = 300 }: LiveSearchFormProps) {
const router = useRouter();
@@ -47,9 +59,8 @@ export function LiveSearchForm({ fields, basePath, debounceMs = 300 }: LiveSearc
const { t } = useTranslation();
const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
const formRef = useRef<HTMLFormElement>(null);
const restoredRef = useRef(false);
const storageKey = `${STORAGE_KEY_PREFIX}${basePath}`;
const cookieName = filterCookieName(basePath);
const buildUrl = useCallback((): string => {
if (!formRef.current) return basePath;
@@ -72,9 +83,13 @@ export function LiveSearchForm({ fields, basePath, debounceMs = 300 }: LiveSearc
if (str) filters[key] = str;
}
try {
localStorage.setItem(storageKey, JSON.stringify(filters));
if (Object.keys(filters).length > 0) {
setCookie(cookieName, JSON.stringify(filters));
} else {
deleteCookie(cookieName);
}
} catch {}
}, [storageKey]);
}, [cookieName]);
const navigate = useCallback((immediate: boolean) => {
if (timerRef.current) clearTimeout(timerRef.current);
@@ -89,33 +104,6 @@ export function LiveSearchForm({ fields, basePath, debounceMs = 300 }: LiveSearc
}
}, [router, buildUrl, debounceMs, saveFilters]);
// Restore filters from localStorage on mount if URL has no filters
useEffect(() => {
if (restoredRef.current) return;
restoredRef.current = true;
const hasUrlFilters = fields.some((f) => {
const val = searchParams.get(f.name);
return val && val.trim() !== "";
});
if (hasUrlFilters) return;
try {
const saved = localStorage.getItem(storageKey);
if (!saved) return;
const filters: Record<string, string> = JSON.parse(saved);
const fieldNames = new Set(fields.map((f) => f.name));
const params = new URLSearchParams();
for (const [key, value] of Object.entries(filters)) {
if (fieldNames.has(key) && value) params.set(key, value);
}
const qs = params.toString();
if (qs) {
router.replace(`${basePath}?${qs}` as any);
}
} catch {}
}, []); // eslint-disable-line react-hooks/exhaustive-deps
useEffect(() => {
return () => {
if (timerRef.current) clearTimeout(timerRef.current);
@@ -199,7 +187,7 @@ export function LiveSearchForm({ fields, basePath, debounceMs = 300 }: LiveSearc
type="button"
onClick={() => {
formRef.current?.reset();
try { localStorage.removeItem(storageKey); } catch {}
try { deleteCookie(cookieName); } catch {}
router.replace(basePath as any);
}}
className="

View File

@@ -8,8 +8,16 @@ function getSecret(): Uint8Array {
return new TextEncoder().encode(secret);
}
/** Paths where filter persistence is active */
const FILTER_PATHS = ["/series", "/books", "/authors"];
/** Convert a basePath to a cookie name: /series → filters_series */
function filterCookieName(basePath: string): string {
return `filters_${basePath.replace(/^\//, "").replace(/\//g, "_")}`;
}
export async function proxy(req: NextRequest) {
const { pathname } = req.nextUrl;
const { pathname, searchParams } = req.nextUrl;
// Skip auth for login page and auth API routes
if (pathname.startsWith("/login") || pathname.startsWith("/api/auth")) {
@@ -20,10 +28,38 @@ export async function proxy(req: NextRequest) {
if (token) {
try {
await jwtVerify(token, getSecret());
return NextResponse.next();
} catch {
// Token invalid or expired
// Token invalid or expired — redirect to login
const loginUrl = new URL("/login", req.url);
loginUrl.searchParams.set("from", pathname);
return NextResponse.redirect(loginUrl);
}
// Restore saved filters from cookie for filter pages
if (FILTER_PATHS.includes(pathname)) {
const nonPaginationParams = Array.from(searchParams.entries()).filter(
([key]) => key !== "page" && key !== "limit"
);
if (nonPaginationParams.length === 0) {
const cookieName = filterCookieName(pathname);
const cookie = req.cookies.get(cookieName);
if (cookie?.value) {
try {
const filters: Record<string, string> = JSON.parse(cookie.value);
const entries = Object.entries(filters).filter(([, v]) => v && v.trim());
if (entries.length > 0) {
const url = req.nextUrl.clone();
for (const [key, value] of entries) {
url.searchParams.set(key, value);
}
return NextResponse.redirect(url);
}
} catch {}
}
}
}
return NextResponse.next();
}
const loginUrl = new URL("/login", req.url);