Infinite Scroll & Feeds

import { useEffect, useRef } from "react";

interface Options {
  onIntersect: () => void;
  enabled?: boolean;
  rootMargin?: string;
}

/** Attach to a sentinel <div> at the bottom of the list. */
export function useIntersectionSentinel({
  onIntersect,
  enabled = true,
  rootMargin = "200px",
}: Options) {
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!enabled || !ref.current) return;

    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) onIntersect();
      },
      { rootMargin },
    );

    observer.observe(ref.current);
    return () => observer.disconnect();
  }, [enabled, onIntersect, rootMargin]);

  return ref;
}

// --- Usage with TanStack Query v5 infinite query ---
import { useInfiniteQuery } from "@tanstack/react-query";

interface Post { id: string; body: string; }
interface Page { items: Post[]; nextCursor: string | null; }

async function fetchFeed({ pageParam = null }: { pageParam?: string | null }): Promise<Page> {
  const url = pageParam ? `/api/feed?after=${pageParam}` : "/api/feed";
  const res = await fetch(url);
  if (!res.ok) throw new Error("fetch failed");
  return res.json();
}

export function Feed() {
  const { data, fetchNextPage, hasNextPage, isFetchingNextPage } =
    useInfiniteQuery({
      queryKey: ["feed"],
      queryFn: fetchFeed,
      initialPageParam: null,
      getNextPageParam: (last) => last.nextCursor ?? undefined,
    });

  const sentinelRef = useIntersectionSentinel({
    onIntersect: fetchNextPage,
    enabled: hasNextPage && !isFetchingNextPage,
  });

  const posts = data?.pages.flatMap((p) => p.items) ?? [];

  return (
    <div>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.body}</li>
        ))}
      </ul>

      {/* Sentinel — invisible; triggers next fetch */}
      <div ref={sentinelRef} aria-hidden="true" />

      {/* Accessible fallback for keyboard / SR users */}
      {hasNextPage && (
        <button
          onClick={() => fetchNextPage()}
          disabled={isFetchingNextPage}
        >
          {isFetchingNextPage ? "Loading…" : "Load more"}
        </button>
      )}
    </div>
  );
}