Add infinite scroll on start page (#96)

Author: crudh

src/actions/index.ts

@@ -1,14 +1,17 @@
 "use server";
 
 import { deployEnv } from "@/constants";
-import { searchGifs, shareEvent } from "@/api/klipy";
+import { searchGifs, shareEvent, trendingGifs } from "@/api/klipy";
 import type { GifsResult } from "@/types/Gif";
 
 export const handleSearchGifs = async (
   searchTerm: string,
   next?: string,
 ): Promise<GifsResult> => searchGifs(searchTerm, { next });
 
+export const handleTrendingGifs = async (next?: string): Promise<GifsResult> =>
+  trendingGifs({ next });
+
 export const handleShared = async (
   slug: string,
   searchTerm: string,

src/app/page.spec.ts

@@ -4,6 +4,7 @@ import { test } from "@/test/browser/fixtures";
 import { testLayout } from "@/test/browser/shared";
 import { getTabKey } from "@/test/browser/utils";
 import { mockedTrendingResponse } from "@/test/api/klipy/mocks/trendingResponse";
+import { klipyTrendingHandler } from "@/test/api/klipy";
 
 test("initial render", async ({ page, baseUrl }) => {
   await page.goto(baseUrl);
@@ -19,6 +20,61 @@ test("initial render", async ({ page, baseUrl }) => {
   await expect(gifs).toHaveCount(gifLimit);
 });
 
+test("scrolling to load more gifs", async ({
+  page,
+  baseUrl,
+  requestInterceptor,
+}) => {
+  requestInterceptor.use(
+    klipyTrendingHandler(200, mockedTrendingResponse, { delay: 200 }),
+  );
+
+  await page.goto(baseUrl);
+
+  const gifs = page.getByRole("button", {
+    name: /Load high quality preview of gif with description/,
+  });
+  await expect(gifs).toHaveCount(gifLimit);
+
+  await page.evaluate(() => {
+    window.scrollTo(0, document.body.scrollHeight);
+  });
+
+  await expect(page.getByRole("progressbar")).toBeVisible();
+
+  await expect(gifs).toHaveCount(gifLimit * 2);
+  await expect(page.getByRole("progressbar")).not.toBeVisible();
+});
+
+test("handle error on scroll", async ({
+  page,
+  baseUrl,
+  requestInterceptor,
+}) => {
+  requestInterceptor.use(klipyTrendingHandler(200, mockedTrendingResponse));
+
+  await page.goto(baseUrl);
+
+  const gifs = page.getByRole("button", {
+    name: /Load high quality preview of gif with description/,
+  });
+  await expect(gifs).toHaveCount(gifLimit);
+
+  requestInterceptor.use(klipyTrendingHandler(500, undefined, { delay: 200 }));
+
+  await page.evaluate(() => {
+    window.scrollTo(0, document.body.scrollHeight);
+  });
+
+  await expect(page.getByRole("progressbar")).toBeVisible();
+  await expect(page.getByRole("progressbar")).not.toBeVisible();
+
+  await expect(page.getByText("Failed to load more!")).toBeVisible();
+  await expect(
+    page.getByRole("button", { name: "Try again", exact: true }),
+  ).toBeVisible();
+});
+
 test("selecting a gif and copying the url", async ({
   page,
   baseUrl,

src/app/page.tsx

@@ -1,19 +1,30 @@
+import { handleTrendingGifs } from "@/actions";
 import { trendingGifs } from "@/api/klipy";
-import { GifsGrid } from "@/components/GifsGrid";
 import { GifPreview } from "@/components/GifPreview";
+import { GifsGrid } from "@/components/GifsGrid";
+import { MoreGifs } from "@/components/MoreGifs";
 
 const IndexPage = async () => {
   const gifsResult = await trendingGifs();
 
   return (
     <GifsGrid>
-      {gifsResult.gifs.map((gif, index) => (
-        <GifPreview
-          key={`${gif.id}-${index}`}
-          gif={gif}
-          searchTerm="featured"
+      <GifsGrid>
+        {gifsResult.gifs.map((gif, index) => (
+          <GifPreview
+            key={`${gif.id}-${index}`}
+            gif={gif}
+            searchTerm="trending"
+          />
+        ))}
+      </GifsGrid>
+      {gifsResult.next && (
+        <MoreGifs
+          searchTerm="trending"
+          initialResult={gifsResult}
+          onMoreGifs={handleTrendingGifs}
         />
-      ))}
+      )}
     </GifsGrid>
   );
 };

src/app/search/[searchTerm]/page.tsx

@@ -1,3 +1,4 @@
+import { handleSearchGifs } from "@/actions";
 import { searchGifs } from "@/api/klipy";
 import { GifPreview } from "@/components/GifPreview";
 import { GifsGrid } from "@/components/GifsGrid";
@@ -22,7 +23,11 @@ const SearchResultPage = async ({
         ))}
       </GifsGrid>
       {gifsResult.next && (
-        <MoreGifs searchTerm={searchTerm} initialResult={gifsResult} />
+        <MoreGifs
+          searchTerm={searchTerm}
+          initialResult={gifsResult}
+          onMoreGifs={handleSearchGifs.bind(null, searchTerm)}
+        />
       )}
     </GifsGrid>
   );

src/components/MoreGifs.tsx

@@ -8,7 +8,6 @@ import {
   useRef,
   useState,
 } from "react";
-import { handleSearchGifs } from "@/actions";
 import type { Gif, GifsResult } from "@/types/Gif";
 import { useIntersectionObserver } from "@/hooks/useIntersectionObserver";
 import { GifPreview } from "@/components/GifPreview";
@@ -18,9 +17,11 @@ import { toast } from "sonner";
 export const MoreGifs = ({
   searchTerm,
   initialResult,
+  onMoreGifs,
 }: {
   searchTerm: string;
   initialResult: GifsResult;
+  onMoreGifs: (next?: string) => Promise<GifsResult>;
 }) => {
   const [next, setNext] = useState<string | undefined>(initialResult.next);
   const onLoadMoreRef = useRef<() => void>(null);
@@ -30,7 +31,7 @@ export const MoreGifs = ({
   const [gifs, onLoadMore, isPending] = useActionState<Gif[]>(
     async (previousState) => {
       try {
-        const newGifsResult = await handleSearchGifs(searchTerm, next);
+        const newGifsResult = await onMoreGifs(next);
 
         setNext(newGifsResult.next);
         return [...previousState, ...newGifsResult.gifs];

src/test/api/klipy/index.ts

@@ -8,8 +8,13 @@ import { klipyBaseUrl } from "@/constants";
 export const klipyTrendingHandler = (
   status: number = 200,
   response: KlipyGifResponse = mockedTrendingResponse,
+  options?: { delay: DelayMode | number },
 ) =>
-  http.get(`${klipyBaseUrl}/:apiKey/gifs/trending`, () => {
+  http.get(`${klipyBaseUrl}/:apiKey/gifs/trending`, async () => {
+    if (options?.delay) {
+      await delay(options.delay);
+    }
+
     if (!isOkStatus(status)) return new HttpResponse(null, { status });
 
     return HttpResponse.json(response, { status });