fix(search): normalize client pagination state

src/components/search/SearchResults.test.tsx

@@ -0,0 +1,59 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+import { SearchResults } from "./SearchResults";
+
+const navigation = vi.hoisted(() => ({
+  searchParams: new URLSearchParams(),
+  push: vi.fn(),
+  replace: vi.fn(),
+}));
+
+vi.mock("next/navigation", () => ({
+  useRouter: () => ({ push: navigation.push, replace: navigation.replace }),
+  useSearchParams: () => navigation.searchParams,
+}));
+
+vi.mock("@/components/gigs/GigCard", () => ({
+  GigCard: () => <div>Gig result</div>,
+}));
+
+const mockFetch = vi.fn();
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  navigation.searchParams = new URLSearchParams("q=typescript&type=gigs&page=-4");
+  mockFetch.mockResolvedValue({
+    ok: true,
+    json: async () => ({
+      query: "typescript",
+      type: "gigs",
+      results: {
+        gigs: {
+          data: [{ id: "gig-1", title: "TypeScript help" }],
+          total: 20,
+          page: 1,
+          limit: 10,
+          hasMore: true,
+        },
+      },
+    }),
+  });
+  globalThis.fetch = mockFetch;
+});
+
+describe("SearchResults", () => {
+  it("normalizes malformed URL pages before fetching and rendering pagination", async () => {
+    render(<SearchResults />);
+
+    await waitFor(() => {
+      expect(mockFetch).toHaveBeenCalledWith(
+        "/api/search?q=typescript&type=gigs&page=1&limit=10"
+      );
+    });
+
+    expect(await screen.findByText("Page 1 of 2")).toBeInTheDocument();
+    expect(navigation.replace).toHaveBeenCalledWith(
+      "/search?q=typescript&type=gigs"
+    );
+  });
+});

src/components/search/SearchResults.tsx

@@ -10,6 +10,7 @@ import { Button } from "@/components/ui/button";
 import { SearchInput } from "./SearchInput";
 import { SearchTypeTabs, type SearchTab } from "./SearchTypeTabs";
 import Link from "next/link";
+import { parsePageParam } from "@/lib/pagination";
 
 interface PaginatedData<T> {
   data: T[];
@@ -34,7 +35,8 @@ export function SearchResults() {
   const searchParams = useSearchParams();
   const queryParam = searchParams.get("q") || "";
   const typeParam = (searchParams.get("type") || "all") as SearchTab;
-  const pageParam = Number(searchParams.get("page")) || 1;
+  const rawPageParam = searchParams.get("page");
+  const pageParam = parsePageParam(rawPageParam, 100_000);
 
   const [loading, setLoading] = useState(false);
   const [data, setData] = useState<SearchResponse | null>(null);
@@ -72,12 +74,22 @@ export function SearchResults() {
 
   // Fetch on mount and when URL params change
   useEffect(() => {
+    if (rawPageParam !== null && rawPageParam !== String(pageParam)) {
+      const params = new URLSearchParams(searchParams.toString());
+      if (pageParam > 1) {
+        params.set("page", String(pageParam));
+      } else {
+        params.delete("page");
+      }
+      router.replace(`/search?${params.toString()}`);
+    }
+
     setActiveTab(typeParam);
     setPage(pageParam);
     if (queryParam) {
       fetchResults(queryParam, typeParam, pageParam);
     }
-  }, [queryParam, typeParam, pageParam, fetchResults]);
+  }, [queryParam, typeParam, rawPageParam, pageParam, searchParams, router, fetchResults]);
 
   const updateUrl = (q: string, type: SearchTab, p: number) => {
     const params = new URLSearchParams();