add url mutation to search, fix placeholder

Author: tondeee

components/ApiGrid.tsx

@@ -88,7 +88,7 @@ export function ApiGrid({ gridColumns, pageSize }: ApiGridProps) {
   return (
     <section id="apis-list" className="cards">
       {initialLoading ? (
-        <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-4 mt-4">
+        <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-4 ">
           {Array.from({ length: Math.min(pageSize, gridColumns * 2) }).map(
             (_, index) => (
               <CardSkeleton key={`skeleton-loading-${index}`} />
@@ -97,7 +97,7 @@ export function ApiGrid({ gridColumns, pageSize }: ApiGridProps) {
         </div>
       ) : (
         <>
-          <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-4 mt-4">
+          <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-4 ">
             {hits.length > 0 ? (
               hits.map((hit, index) => (
                 <Card key={`${hit.objectID}-${index}`} model={hit} />
@@ -110,7 +110,7 @@ export function ApiGrid({ gridColumns, pageSize }: ApiGridProps) {
           </div>
 
           {loadingMore && (
-            <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-4 mt-4">
+            <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-4 ">
               {Array.from({ length: Math.min(pageSize, gridColumns) }).map(
                 (_, index) => (
                   <CardSkeleton key={`skeleton-more-${index}`} />

components/SearchClientComponent.tsx

@@ -1,13 +1,12 @@
 "use client";
 
-import React, { useEffect, Suspense } from "react";
+import React, { Suspense } from "react";
 import { useSearchParams } from "next/navigation";
 import { useGridLayout } from "@/hooks/useGridLayout";
-import { useApiSearch } from "@/hooks/useApiSearch";
 import { LoadingSkeleton } from "@/components/LoadingSkeleton";
 import { ApiGrid } from "@/components/ApiGrid";
 import { liteClient as algoliasearch } from "algoliasearch/lite";
-import { InstantSearch, Hits } from "react-instantsearch";
+import { InstantSearch } from "react-instantsearch";
 import { SearchSection } from "@/components/SearchSection";
 
 const searchClient = algoliasearch(
@@ -16,12 +15,10 @@ const searchClient = algoliasearch(
 );
 
 interface SearchClientComponentProps {
-  repoStarCounts: Record<string, number>;
   providerSlug?: string;
 }
 
 function SearchClientComponentInner({
-  repoStarCounts,
   providerSlug,
 }: SearchClientComponentProps) {
   const searchParams = useSearchParams();
@@ -32,17 +29,6 @@ function SearchClientComponentInner({
 
   const { gridColumns, pageSize } = useGridLayout();
 
-  useEffect(() => {
-    Object.entries(repoStarCounts).forEach(([name, stars]) => {
-      const elements = document.querySelectorAll(
-        `[data-proj="${name}"].stars-count`
-      );
-      elements.forEach((el) => {
-        if (el) el.textContent = stars.toString();
-      });
-    });
-  }, [repoStarCounts]);
-
   return (
     <div className="container mx-auto px-4 relative">
       <div className="relative z-10">
@@ -66,15 +52,11 @@ function SearchClientComponentInner({
 }
 
 export default function SearchClientComponent({
-  repoStarCounts,
   providerSlug,
 }: SearchClientComponentProps) {
   return (
     <Suspense fallback={<LoadingSkeleton pageSize={30} />}>
-      <SearchClientComponentInner
-        repoStarCounts={repoStarCounts}
-        providerSlug={providerSlug}
-      />
+      <SearchClientComponentInner providerSlug={providerSlug} />
     </Suspense>
   );
 }

components/SearchSection.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import { SearchIcon } from "lucide-react";
-import React, { useEffect } from "react";
+import React, { useEffect, useRef } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
 import {
   SearchBox,
   useInstantSearch,
@@ -10,23 +11,48 @@ import {
 } from "react-instantsearch";
 
 export function SearchSection() {
-  const { results } = useInstantSearch({});
-  const { query } = useSearchBox();
+  const { results } = useInstantSearch();
+  const { query, refine } = useSearchBox();
+  const isInitialMount = useRef(true);
+  const router = useRouter();
+  const searchParams = useSearchParams();
 
   useEffect(() => {
-    console.log(results);
-  }, [results]);
+    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]);
 
   return (
-    <div id="search" className="mb-8 max-w-3xl mx-auto">
+    <div className="max-w-3xl mx-auto">
       <div className="border-2 border-gray-200 rounded-xl transition-all duration-200 shadow-sm hover:shadow-md">
         <div className="flex items-center">
           <div className="relative flex-1">
             <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none z-10">
               <SearchIcon className="h-5 w-5 text-gray-400" />
             </div>
             <SearchBox
-              placeholder={`Search through APIs...`}
+              placeholder={`Search through ${results.nbHits.toLocaleString()} APIs...`}
               classNames={{
                 form: "relative",
                 input:
@@ -48,11 +74,18 @@ export function SearchSection() {
           </div>
         </div>
       </div>
-      {query && (
-        <div className="mt-3 text-lg text-gray-600 text-center">
+      <div
+        className="my-3 min-h-[1.75rem] text-lg text-gray-600 text-center"
+        aria-live="polite"
+      >
+        <span
+          className={`inline-block transition-opacity duration-200 ${
+            query ? "opacity-100" : "opacity-0"
+          }`}
+        >
           {results.nbHits.toLocaleString()} APIs found
-        </div>
-      )}
+        </span>
+      </div>
     </div>
   );
 }