feat: implement infinite grid loading with server-side pagination and client-side integration

This commit is contained in:
Michael committed 2026-04-02 18:39:29 +02:00
1 parent 49928e9c08
commit b39e010903
3 files changed
+8 -2

No files matched your search

+2
View File
@@ -22,10 +22,12 @@ export async function GET(request: NextRequest) {
const search = searchParams.get("search") ?? undefined;
const gamme = searchParams.get("gamme") ?? undefined;
const code3 = searchParams.get("code3") ?? undefined;
const magasin = searchParams.get("magasin") ?? undefined;
try {
const result = await getProductRows({
codeFournisseur,
magasin,
page: isNaN(page) ? 0 : page,
pageSize: isNaN(pageSize) ? 200 : pageSize,
offset: offset !== undefined && !isNaN(offset) ? offset : undefined,
@@ -52,6 +52,7 @@ export function GridClient({ initialRows, initialTotal, codeFournisseur, nomFour
const { total, isLoadingMore, hasMore, loadNextPage, stopLoading, progress } = useInfiniteGrid({
codeFournisseur,
magasin: magasin || "TOTAL",
initialTotal,
pageSize: 10000,
onPageLoaded: handlePageLoaded
+5 -2
View File
@@ -7,6 +7,7 @@ export interface InfiniteGridOptions {
codeFournisseur: string | null;
initialTotal: number;
pageSize?: number;
magasin?: string;
search?: string;
gamme?: string | null;
code3?: string | null;
@@ -28,6 +29,7 @@ export function useInfiniteGrid({
codeFournisseur,
initialTotal,
pageSize = 10000,
magasin,
search,
gamme,
code3,
@@ -58,9 +60,10 @@ export function useInfiniteGrid({
if (search) params.set("search", search);
if (gamme) params.set("gamme", gamme);
if (code3) params.set("code3", code3);
if (magasin) params.set("magasin", magasin);
return `/api/grid/rows?${params.toString()}`;
},
[codeFournisseur, pageSize, search, gamme, code3]
[codeFournisseur, pageSize, search, gamme, code3, magasin]
);
useEffect(() => {
@@ -70,7 +73,7 @@ export function useInfiniteGrid({
setIsStopped(false);
loadedPagesRef.current = new Set([0]);
fetchIdRef.current += 1;
}, [codeFournisseur, initialTotal, search, gamme, code3]);
}, [codeFournisseur, initialTotal, search, gamme, code3, magasin]);
const loadNextPage = useCallback(async () => {
if (!codeFournisseur || isLoadingMore || isStopped) return;