update serach component to use build in routing history for url mutation

Author: tondeee

components/SearchClientComponent.tsx

@@ -1,46 +1,56 @@
 "use client";
 
 import React, { Suspense } from "react";
-import { useSearchParams } from "next/navigation";
 import { useGridLayout } from "@/hooks/useGridLayout";
 import { LoadingSkeleton } from "@/components/LoadingSkeleton";
 import { ApiGrid } from "@/components/ApiGrid";
 import { liteClient as algoliasearch } from "algoliasearch/lite";
 import { InstantSearch } from "react-instantsearch";
 import { SearchSection } from "@/components/SearchSection";
+import { history } from "instantsearch.js/es/lib/routers";
 
 const searchClient = algoliasearch(
   "D29MLR0AMY",
-  "03da9918f8ebfdb40e9b37cfd43ed8c4",
+  "03da9918f8ebfdb40e9b37cfd43ed8c4"
 );
 
+const indexName = "prod_apis_guru";
+
+const routing = {
+  router: history(),
+  stateMapping: {
+    stateToRoute(uiState: any) {
+      const indexUiState = uiState[indexName] || {};
+      return {
+        query: indexUiState.query || undefined,
+      };
+    },
+    routeToState(routeState: any) {
+      return {
+        [indexName]: {
+          query: routeState.query || "",
+        },
+      };
+    },
+  },
+};
+
 interface SearchClientComponentProps {
   providerSlug?: string;
 }
 
 function SearchClientComponentInner({
   providerSlug,
 }: SearchClientComponentProps) {
-  const searchParams = useSearchParams();
-  const initialSearchTerm = searchParams?.get("q") || "";
-  const initialCombinedSearchTerm = providerSlug
-    ? `${providerSlug} ${initialSearchTerm}`.trim()
-    : initialSearchTerm;
-
   const { gridColumns, pageSize } = useGridLayout();
 
   return (
     <div className="container mx-auto px-4 relative">
       <div className="relative z-10">
         <InstantSearch
-          indexName="prod_apis_guru"
+          indexName={indexName}
           searchClient={searchClient}
-          initialUiState={{
-            prod_apis_guru: {
-              query: initialCombinedSearchTerm,
-              sortBy: "prod_apis_guru_by_name_asc",
-            },
-          }}
+          routing={routing}
         >
           <SearchSection />
 

components/SearchSection.tsx

@@ -1,8 +1,7 @@
 "use client";
 
 import { SearchIcon } from "lucide-react";
-import React, { useEffect, useRef } from "react";
-import { useRouter, useSearchParams } from "next/navigation";
+import React from "react";
 import {
   SearchBox,
   useInstantSearch,
@@ -12,36 +11,7 @@ import {
 
 export function SearchSection() {
   const { results } = useInstantSearch();
-  const { query, refine } = useSearchBox();
-  const isInitialMount = useRef(true);
-  const router = useRouter();
-  const searchParams = useSearchParams();
-
-  useEffect(() => {
-    if (isInitialMount.current) {
-      const initialQuery = searchParams.get("query") || "";
-      if (initialQuery !== query) {
-        refine(initialQuery);
-      }
-      isInitialMount.current = false;
-    }
-  }, [refine, searchParams]);
-
-  useEffect(() => {
-    if (isInitialMount.current) return;
-
-    const currentQuery = searchParams.get("query") || "";
-
-    if (currentQuery !== query) {
-      const params = new URLSearchParams(searchParams);
-      if (query) {
-        params.set("query", query);
-      } else {
-        params.delete("query");
-      }
-      router.push(`?${params.toString()}`, { scroll: false });
-    }
-  }, [query, router, searchParams]);
+  const { query } = useSearchBox();
 
   return (
     <div className="max-w-3xl mx-auto">
@@ -89,3 +59,4 @@ export function SearchSection() {
     </div>
   );
 }
+