@decocms/blocks 7.32.1 → 7.33.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decocms/blocks",
-  "version": "7.32.1",
+  "version": "7.33.0",
   "type": "module",
   "engines": {
     "node": ">=24"

package/src/hooks/index.ts

@@ -15,6 +15,7 @@ export {
 	type FitOptions,
 } from "./Image";
 export { Picture, Source, type PictureProps, type SourceProps } from "./Picture";
+export { useLoadMore } from "./useLoadMore";
 export {
 	ProductJsonLd,
 	PLPJsonLd,

package/src/hooks/useLoadMore.test.ts

@@ -0,0 +1,205 @@
+import { createElement } from "react";
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { describe, expect, it, vi, beforeEach, afterEach } from "vitest";
+import { useLoadMore, getNextPageUrl } from "./useLoadMore";
+
+// ---------------------------------------------------------------------------
+// Minimal hook runner for jsdom (no @testing-library/react dependency)
+// ---------------------------------------------------------------------------
+
+function makeHookRunner<T>(useHookFn: () => T) {
+	let value!: T;
+	let root!: Root;
+	const container = document.createElement("div");
+	document.body.appendChild(container);
+
+	const Wrapper = () => {
+		value = useHookFn();
+		return null;
+	};
+
+	return {
+		async mount() {
+			await act(async () => {
+				root = createRoot(container);
+				root.render(createElement(Wrapper));
+			});
+			return value;
+		},
+		get current(): T {
+			return value;
+		},
+		async rerender() {
+			await act(async () => {
+				root.render(createElement(Wrapper));
+			});
+			return value;
+		},
+		async unmount() {
+			await act(async () => root.unmount());
+			container.remove();
+		},
+	};
+}
+
+// ---------------------------------------------------------------------------
+// Test data
+// ---------------------------------------------------------------------------
+
+const PAGE1 = { products: ["a"], pageInfo: { nextPage: "/s?page=2" } };
+const PAGE2 = { products: ["b"], pageInfo: { nextPage: undefined } };
+const FLAT_NEXT = { products: ["c"], nextPage: "/s?page=2" };
+
+// ---------------------------------------------------------------------------
+// getNextPageUrl (pure helper)
+// ---------------------------------------------------------------------------
+
+describe("getNextPageUrl", () => {
+	it("reads pageInfo.nextPage", () => {
+		expect(getNextPageUrl(PAGE1)).toBe("/s?page=2");
+	});
+
+	it("returns undefined when pageInfo.nextPage is absent", () => {
+		expect(getNextPageUrl(PAGE2)).toBeUndefined();
+	});
+
+	it("falls back to flat nextPage", () => {
+		expect(getNextPageUrl(FLAT_NEXT)).toBe("/s?page=2");
+	});
+
+	it("returns undefined for non-objects", () => {
+		expect(getNextPageUrl(null)).toBeUndefined();
+		expect(getNextPageUrl("string")).toBeUndefined();
+	});
+});
+
+// ---------------------------------------------------------------------------
+// useLoadMore (actual hook via React render)
+// ---------------------------------------------------------------------------
+
+describe("useLoadMore", () => {
+	beforeEach(() => {
+		vi.stubGlobal("location", { href: "https://site.com/s?q=telha" });
+	});
+	afterEach(() => {
+		vi.unstubAllGlobals();
+	});
+
+	it("accumulates pages and flips hasMore off on last page", async () => {
+		vi.stubGlobal(
+			"fetch",
+			vi.fn(() => Promise.resolve({ ok: true, json: async () => PAGE2 })),
+		);
+
+		const runner = makeHookRunner(() =>
+			useLoadMore(PAGE1, "apps/vtex.ts/loaders/plp.ts"),
+		);
+		await runner.mount();
+
+		expect(runner.current.pages).toEqual([PAGE1]);
+		expect(runner.current.hasMore).toBe(true);
+
+		await act(async () => {
+			await runner.current.loadMore();
+		});
+
+		expect(runner.current.pages).toEqual([PAGE1, PAGE2]);
+		expect(runner.current.hasMore).toBe(false);
+		await runner.unmount();
+	});
+
+	it("calls /deco/invoke with absolute __pageUrl and __pagePath", async () => {
+		const captured: string[] = [];
+		vi.stubGlobal(
+			"fetch",
+			vi.fn((_url: string, init: RequestInit) => {
+				captured.push(init.body as string);
+				return Promise.resolve({ ok: true, json: async () => PAGE2 });
+			}),
+		);
+
+		const runner = makeHookRunner(() =>
+			useLoadMore(PAGE1, "apps/vtex.ts/loaders/plp.ts"),
+		);
+		await runner.mount();
+		await act(async () => { await runner.current.loadMore(); });
+
+		const body = JSON.parse(captured[0]);
+		expect(body.props.__pageUrl).toBe("https://site.com/s?page=2");
+		expect(body.props.__pagePath).toBe("/s");
+		await runner.unmount();
+	});
+
+	it("sets error state on failed invoke, does not throw", async () => {
+		vi.stubGlobal(
+			"fetch",
+			vi.fn(() => Promise.resolve({ ok: false, status: 500 })),
+		);
+
+		const runner = makeHookRunner(() =>
+			useLoadMore(PAGE1, "apps/vtex.ts/loaders/plp.ts"),
+		);
+		await runner.mount();
+		await act(async () => { await runner.current.loadMore(); });
+
+		expect(runner.current.error).toBeInstanceOf(Error);
+		expect(runner.current.error?.message).toContain("500");
+		// pages unchanged
+		expect(runner.current.pages).toEqual([PAGE1]);
+		await runner.unmount();
+	});
+
+	it("resets pages when resetKey changes", async () => {
+		vi.stubGlobal(
+			"fetch",
+			vi.fn(() => Promise.resolve({ ok: true, json: async () => PAGE2 })),
+		);
+
+		let resetKey = "url-a";
+		const runner = makeHookRunner(() =>
+			useLoadMore(PAGE1, "apps/vtex.ts/loaders/plp.ts", resetKey),
+		);
+		await runner.mount();
+
+		// accumulate one page
+		await act(async () => { await runner.current.loadMore(); });
+		expect(runner.current.pages).toHaveLength(2);
+
+		// simulate filter change: resetKey changes, initial stays PAGE1 for simplicity
+		resetKey = "url-b";
+		await runner.rerender();
+
+		expect(runner.current.pages).toEqual([PAGE1]);
+		expect(runner.current.hasMore).toBe(true);
+		await runner.unmount();
+	});
+
+	it("prevents double-submission (inflight guard)", async () => {
+		let resolveFirst!: () => void;
+		vi.stubGlobal(
+			"fetch",
+			vi.fn(
+				() =>
+					new Promise<{ ok: boolean; json: () => Promise<typeof PAGE2> }>((resolve) => {
+						resolveFirst = () => resolve({ ok: true, json: async () => PAGE2 });
+					}),
+			),
+		);
+
+		const runner = makeHookRunner(() =>
+			useLoadMore(PAGE1, "apps/vtex.ts/loaders/plp.ts"),
+		);
+		await runner.mount();
+
+		// fire two rapid clicks (no await between them)
+		const p1 = act(async () => { runner.current.loadMore(); });
+		const p2 = act(async () => { runner.current.loadMore(); });
+		resolveFirst();
+		await Promise.all([p1, p2]);
+
+		// fetch must be called only once
+		expect(vi.mocked(fetch)).toHaveBeenCalledTimes(1);
+		await runner.unmount();
+	});
+});

package/src/hooks/useLoadMore.ts

@@ -0,0 +1,98 @@
+import { useState, useEffect, useCallback, useRef } from "react";
+
+/**
+ * Extract the next-page URL from a loader result.
+ * Handles both conventions used by commerce loaders:
+ * - pageInfo.nextPage (VTEX, Blog, most standard loaders)
+ * - nextPage (flat, some legacy loaders)
+ */
+export function getNextPageUrl(data: unknown): string | undefined {
+	if (!data || typeof data !== "object") return undefined;
+	const d = data as Record<string, unknown>;
+	if (d.pageInfo && typeof d.pageInfo === "object") {
+		const pi = d.pageInfo as Record<string, unknown>;
+		if (typeof pi.nextPage === "string" && pi.nextPage) return pi.nextPage;
+	}
+	if (typeof d.nextPage === "string" && d.nextPage) return d.nextPage;
+	return undefined;
+}
+
+/**
+ * Accumulates pages of loader data for "Ver mais" / load-more pagination.
+ *
+ * Fresh's `usePartialSection({ mode: "append" })` appended HTML without a
+ * page reload. This hook is the TanStack equivalent: it calls the loader
+ * via POST /deco/invoke — passing the nextPage URL as `__pageUrl` so the
+ * loader reconstructs query, sort, and filter state from it — then pushes
+ * the result into local state.
+ *
+ * Usage in a migrated section:
+ * ```tsx
+ * "use client"
+ * const { pages, loadMore, loading, hasMore, error } = useLoadMore(
+ *   props.page ?? { products: [], pageInfo: {} },
+ *   "apps/vtex.ts/loaders/intelligentSearch/productListingPage.ts",
+ *   pageUrl // resetKey: pass the current page URL so accumulated pages reset on filter/sort change
+ * )
+ * const allProducts = pages.flatMap(p => p.products ?? [])
+ * ```
+ *
+ * The component must be `"use client"` because this hook uses useState.
+ *
+ * @param resetKey - When this value changes, accumulated pages reset to [initial].
+ *   Pass the current page URL (or any value that changes on filter/sort navigation)
+ *   to clear the accumulated product list when the user changes filters.
+ *   Without resetKey, add `key={pageUrl}` to the section element instead.
+ */
+export function useLoadMore<T>(initial: T, loaderKey: string, resetKey?: unknown) {
+	const [pages, setPages] = useState<T[]>([initial]);
+	const [loading, setLoading] = useState(false);
+	const [error, setError] = useState<Error | null>(null);
+	// useRef guard prevents two rapid clicks both passing the !loading check
+	// before the async state update propagates (React state is not synchronous).
+	const inflight = useRef(false);
+	// Skip the reset effect on first mount — pages are already seeded from useState.
+	const isFirstRender = useRef(true);
+
+	useEffect(() => {
+		if (isFirstRender.current) {
+			isFirstRender.current = false;
+			return;
+		}
+		setPages([initial]);
+		setError(null);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [resetKey]);
+
+	const lastPage = pages[pages.length - 1];
+	const nextPageRel = getNextPageUrl(lastPage);
+	const hasMore = Boolean(nextPageRel);
+
+	const loadMore = useCallback(async () => {
+		if (!nextPageRel || inflight.current) return;
+		inflight.current = true;
+		setLoading(true);
+		setError(null);
+		try {
+			const abs = new URL(nextPageRel, location.href);
+			const res = await fetch("/deco/invoke", {
+				method: "POST",
+				headers: { "content-type": "application/json" },
+				body: JSON.stringify({
+					key: loaderKey,
+					props: { __pageUrl: abs.href, __pagePath: abs.pathname },
+				}),
+			});
+			if (!res.ok) throw new Error(`invoke ${res.status} for ${loaderKey}`);
+			const next = (await res.json()) as T;
+			setPages((prev) => [...prev, next]);
+		} catch (e) {
+			setError(e instanceof Error ? e : new Error(String(e)));
+		} finally {
+			inflight.current = false;
+			setLoading(false);
+		}
+	}, [nextPageRel, loaderKey]);
+
+	return { pages, loadMore, loading, hasMore, error };
+}