Infinite scroll

"use client";

import { useEffect, useRef } from "react";
import { useInfiniteQuery } from "@tanstack/react-query";
import { SearchClient } from "@aacsearch/client";

const client = new SearchClient({
	baseUrl: process.env.NEXT_PUBLIC_AACSEARCH_BASE_URL!,
	apiKey: process.env.NEXT_PUBLIC_AACSEARCH_SEARCH_KEY!,
	indexSlug: "products",
});

const PER_PAGE = 24;

export function ProductFeed({ filterBy }: { filterBy?: string }) {
	const sentinelRef = useRef<HTMLDivElement>(null);

	const { data, fetchNextPage, hasNextPage, isFetchingNextPage, status, error } =
		useInfiniteQuery({
			queryKey: ["product-feed", filterBy ?? ""],
			initialPageParam: 1,
			queryFn: ({ pageParam, signal }) =>
				client.search(
					{
						q: "*",
						filterBy,
						page: pageParam,
						perPage: PER_PAGE,
						sortBy: "popularity:desc",
					},
					{ signal },
				),
			getNextPageParam: (lastPage, allPages) => {
				const loadedSoFar = allPages.reduce((sum, p) => sum + p.hits.length, 0);
				return loadedSoFar < lastPage.found ? allPages.length + 1 : undefined;
			},
		});

	useEffect(() => {
		const sentinel = sentinelRef.current;
		if (!sentinel) return;

		const observer = new IntersectionObserver(
			(entries) => {
				if (entries[0].isIntersecting && hasNextPage && !isFetchingNextPage) {
					fetchNextPage();
				}
			},
			{ rootMargin: "400px" },
		);

		observer.observe(sentinel);
		return () => observer.disconnect();
	}, [hasNextPage, isFetchingNextPage, fetchNextPage]);

	if (status === "pending") return <SkeletonGrid />;
	if (status === "error") return <ErrorBanner error={error} />;

	const allHits = data.pages.flatMap((p) => p.hits);

	return (
		<>
			<div className="product-grid">
				{allHits.map((hit) => (
					<ProductCard key={hit.document.id} product={hit.document} />
				))}
			</div>
			<div ref={sentinelRef} className="sentinel" aria-hidden="true">
				{isFetchingNextPage && <LoadingSpinner />}
				{!hasNextPage && allHits.length > 0 && <p>You've reached the end.</p>}
			</div>
		</>
	);
}

"use client";
import { useEffect } from "react";
import { useRouter } from "next/navigation";

export function useScrollRestore(key: string) {
	useEffect(() => {
		const saved = sessionStorage.getItem(`scroll:${key}`);
		if (saved) window.scrollTo(0, Number(saved));

		const onScroll = () => {
			sessionStorage.setItem(`scroll:${key}`, String(window.scrollY));
		};
		window.addEventListener("scroll", onScroll, { passive: true });
		return () => window.removeEventListener("scroll", onScroll);
	}, [key]);
}

useInfiniteQuery({
	queryKey: ["product-feed", filterBy],
	staleTime: 5 * 60 * 1000, // 5 minutes — feed is "fresh enough"
	gcTime: 10 * 60 * 1000,
	// ...
});

import { useVirtualizer } from "@tanstack/react-virtual";

const virtualizer = useVirtualizer({
	count: allHits.length,
	getScrollElement: () => containerRef.current,
	estimateSize: () => 320,
	overscan: 5,
});