Merge pull request #1616 from Nwakaego-Ego/fix/searchprovider-index-rebuild-main

Apply SearchProvider index rebuild fix to main

Author: doradocodes

src/components/SearchProvider/index.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "preact/hooks";
-import Fuse, { type FuseResult } from "fuse.js";
+import Fuse from "fuse.js";
 import SearchResults from "../SearchResults";
 import { defaultLocale } from "@/src/i18n/const";
 
@@ -14,8 +14,12 @@ type SearchResult = {
   title: string;
   relativeUrl: string;
   description?: string;
+  alias?: string;
 };
 
+type SearchIndexEntry = Omit<SearchResult, "id" | "category" | "title">;
+type SearchIndexData = Record<string, Record<string, SearchIndexEntry>>;
+
 /**
  * SearchProvider this component is responsible for handling client-side search.
  * It reads the search term from query params and fetches the search index for the current locale.
@@ -28,6 +32,9 @@ const SearchProvider = ({
 }: SearchProviderProps) => {
   const [searchTerm, setSearchTerm] = useState("");
   const [results, setResults] = useState<SearchResult[]>([]);
+  const [searchIndex, setSearchIndex] = useState<Fuse<SearchResult> | null>(
+    null,
+  );
 
   // Flattens the search index data
 
@@ -48,16 +55,16 @@ const SearchProvider = ({
     }
   }, [searchTerm]);
 
-  // Fetch the search index for the current locale and search for the search term
-  // This effect runs whenever the search term or the current locale changes
+  // Fetch the search index for the current locale
   useEffect(() => {
+    setSearchIndex(null);
+
     if (!currentLocale) {
       console.warn("No locale provided to SearchProvider");
       return;
     }
 
-    if (!searchTerm) return;
-    const flattenData = (data: FuseResult<SearchResult>) => {
+    const flattenData = (data: SearchIndexData) => {
       const flatData: SearchResult[] = [];
       let flatId = 0;
       Object.entries(data).forEach(([category, entries]) => {
@@ -82,12 +89,11 @@ const SearchProvider = ({
       return flatData;
     };
 
-    let flatData;
-
-    fetch(`/search-indices/${currentLocale}.json`)
+    const controller = new AbortController();
+    fetch(`/search-indices/${currentLocale}.json`, { signal: controller.signal })
       .then((response) => response.json())
       .then((data) => {
-        flatData = flattenData(data);
+        const flatData = flattenData(data);
 
         const fuseOptions = {
           includeScore: true,
@@ -100,18 +106,26 @@ const SearchProvider = ({
           threshold: 0.3,
         };
 
-        const fuse = new Fuse(flatData, fuseOptions);
+        setSearchIndex(new Fuse(flatData, fuseOptions));
+      })
+      .catch((error) => {
+        if (error.name !== "AbortError") {
+          console.error("Error fetching or indexing data:", error);
+        }
+      });
 
-        const searchResults = fuse
-          .search(searchTerm)
-          .map((result) => result.item);
+    return () => controller.abort();
+  }, [currentLocale]);
 
-        setResults(searchResults);
-      })
-      .catch((error) =>
-        console.error("Error fetching or indexing data:", error),
-      );
-  }, [searchTerm, currentLocale]);
+  // Search after search term updates
+  useEffect(() => {
+    if (!searchTerm || !searchIndex) {
+      setResults([]);
+      return;
+    }
+
+    setResults(searchIndex.search(searchTerm).map((result) => result.item));
+  }, [searchTerm, searchIndex]);
 
   const handleSearchTermChange = (term?: string) => {
     if (term !== undefined) {

test/components/SearchProvider.test.tsx

@@ -0,0 +1,121 @@
+import {
+  act,
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "@testing-library/preact";
+import { afterEach, expect, it, suite, vi } from "vitest";
+import SearchProvider from "@components/SearchProvider";
+
+const uiTranslations = {
+  Search: "Search",
+  "No Results": "No Results",
+  Reference: "Reference",
+};
+
+const responseWith = (data: unknown) =>
+  ({ json: vi.fn().mockResolvedValue(data) }) as unknown as Response;
+
+suite("SearchProvider", () => {
+  afterEach(() => {
+    cleanup();
+    vi.unstubAllGlobals();
+    history.replaceState(null, "", "/");
+  });
+
+  it("reuses the search index for new terms", async () => {
+    const fetchMock = vi.fn().mockResolvedValue(
+      responseWith({
+        reference: {
+          "createCanvas()": {
+            relativeUrl: "/reference/p5/createCanvas",
+            alias: "createCanvas",
+          },
+          "circle()": {
+            relativeUrl: "/reference/p5/circle",
+            alias: "circle",
+          },
+        },
+      }),
+    );
+    vi.stubGlobal("fetch", fetchMock);
+    history.replaceState(null, "", "/search/?term=createCanvas");
+
+    render(
+      <SearchProvider currentLocale="en" uiTranslations={uiTranslations} />,
+    );
+
+    expect(
+      await screen.findByRole("link", { name: "createCanvas()" }),
+    ).toBeTruthy();
+
+    const searchInput = screen.getByLabelText("Search through site content");
+    fireEvent.input(searchInput, { target: { value: "circle" } });
+    fireEvent.keyDown(searchInput, { key: "Enter" });
+
+    expect(await screen.findByRole("link", { name: "circle()" })).toBeTruthy();
+    expect(fetchMock).toHaveBeenCalledTimes(1);
+  });
+
+  it("clears the old index while a new locale loads", async () => {
+    let resolveSpanishResponse: (response: Response) => void = () => {};
+    const spanishResponse = new Promise<Response>((resolve) => {
+      resolveSpanishResponse = resolve;
+    });
+    const fetchMock = vi
+      .fn()
+      .mockResolvedValueOnce(
+        responseWith({
+          reference: {
+            "English result": {
+              relativeUrl: "/reference/english",
+              alias: "shared",
+            },
+          },
+        }),
+      )
+      .mockReturnValueOnce(spanishResponse);
+    vi.stubGlobal("fetch", fetchMock);
+    history.replaceState(null, "", "/search/?term=shared");
+
+    const { rerender } = render(
+      <SearchProvider currentLocale="en" uiTranslations={uiTranslations} />,
+    );
+
+    expect(
+      await screen.findByRole("link", { name: "English result" }),
+    ).toBeTruthy();
+    const firstRequestSignal = fetchMock.mock.calls[0][1]
+      ?.signal as AbortSignal;
+
+    rerender(
+      <SearchProvider currentLocale="es" uiTranslations={uiTranslations} />,
+    );
+
+    await waitFor(() => expect(firstRequestSignal.aborted).toBe(true));
+    await waitFor(() =>
+      expect(screen.queryByRole("link", { name: "English result" })).toBeNull(),
+    );
+
+    await act(async () => {
+      resolveSpanishResponse(
+        responseWith({
+          reference: {
+            "Spanish result": {
+              relativeUrl: "/reference/spanish",
+              alias: "shared",
+            },
+          },
+        }),
+      );
+    });
+
+    const spanishResult = await screen.findByRole("link", {
+      name: "Spanish result",
+    });
+    expect(spanishResult.getAttribute("href")).toBe("/es/reference/spanish");
+    expect(fetchMock).toHaveBeenCalledTimes(2);
+  });
+});