remove previous search hook, fix display of apis amount found

Author: tondeee

components/ApiGrid.tsx

@@ -1,16 +1,19 @@
 import React, { useEffect, useRef, useCallback } from "react";
-import { useInfiniteHits, useInstantSearch } from "react-instantsearch";
+import {
+  useInfiniteHits,
+  useInstantSearch,
+  useSearchBox,
+} from "react-instantsearch";
 import Card from "./ApiCard";
 import { CardSkeleton } from "@/components/ui/CardSkeleton";
 import { cleanDescription } from "@/utils/textProcessing";
 
 interface ApiGridProps {
-  searchTerm: string;
   gridColumns: number;
   pageSize: number;
 }
+
 const transformItems = (items: any[]) => {
-  console.log("Transforming items:", items);
   return items.map((item) => ({
     ...item,
     name: item.name || item.objectID,
@@ -30,9 +33,10 @@ const transformItems = (items: any[]) => {
   }));
 };
 
-export function ApiGrid({ searchTerm, gridColumns, pageSize }: ApiGridProps) {
+export function ApiGrid({ gridColumns, pageSize }: ApiGridProps) {
+  const { query } = useSearchBox(); // <-- Get current search term
   const { status, error } = useInstantSearch({ catchError: true });
-  const { hits, isLastPage, showMore, results } = useInfiniteHits({
+  const { hits, isLastPage, showMore } = useInfiniteHits({
     transformItems,
     showPrevious: false,
   });
@@ -95,13 +99,12 @@ export function ApiGrid({ searchTerm, gridColumns, pageSize }: ApiGridProps) {
         <>
           <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-4 mt-4">
             {hits.length > 0 ? (
-              hits.map((hit, index) => {
-                console.log("Rendering hit:", hit);
-                return <Card key={`${hit.objectID}-${index}`} model={hit} />;
-              })
+              hits.map((hit, index) => (
+                <Card key={`${hit.objectID}-${index}`} model={hit} />
+              ))
             ) : (
               <div className="col-span-full text-center py-6 bg-gray-50 rounded-lg border border-gray-100">
-                No APIs found matching &quot;{searchTerm}&quot;
+                No APIs found matching &quot;{query}&quot;
               </div>
             )}
           </div>

components/SearchClientComponent.tsx

@@ -31,10 +31,6 @@ function SearchClientComponentInner({
     : initialSearchTerm;
 
   const { gridColumns, pageSize } = useGridLayout();
-  const { searchTerm, setSearchTerm, resetSearch, totalCount } = useApiSearch(
-    initialCombinedSearchTerm,
-    pageSize
-  );
 
   useEffect(() => {
     Object.entries(repoStarCounts).forEach(([name, stars]) => {
@@ -47,10 +43,6 @@ function SearchClientComponentInner({
     });
   }, [repoStarCounts]);
 
-  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setSearchTerm(e.target.value);
-  };
-
   return (
     <div className="container mx-auto px-4 relative">
       <div className="relative z-10">
@@ -59,17 +51,14 @@ function SearchClientComponentInner({
           searchClient={searchClient}
           initialUiState={{
             test_apis_guru: {
+              query: initialCombinedSearchTerm,
               sortBy: "test_apis_guru_by_name_asc",
             },
           }}
         >
-          <SearchSection searchTerm={searchTerm} apiCount={totalCount} />
+          <SearchSection />
 
-          <ApiGrid
-            gridColumns={gridColumns}
-            pageSize={pageSize}
-            searchTerm={searchTerm}
-          />
+          <ApiGrid gridColumns={gridColumns} pageSize={pageSize} />
         </InstantSearch>
       </div>
     </div>

components/SearchSection.tsx

@@ -1,18 +1,10 @@
 import React, { useEffect } from "react";
-import { SearchBox, useInstantSearch } from "react-instantsearch";
+import { SearchBox, useInstantSearch, useSearchBox } from "react-instantsearch";
 
-interface SearchSectionProps {
-  searchTerm: string;
-  apiCount: number;
-
-}
-
-export function SearchSection({
-  searchTerm,
-  apiCount,
- 
-}: SearchSectionProps) {
+export function SearchSection() {
   const { results } = useInstantSearch({});
+  const { query } = useSearchBox();
+
   useEffect(() => {
     console.log(results);
   }, [results]);
@@ -42,13 +34,13 @@ export function SearchSection({
               "w-full pl-12 pr-4 py-2 text-lg border-2 border-gray-200 rounded-xl transition-all duration-200 shadow-sm hover:shadow-md",
             submit: "hidden",
             reset: "hidden",
-            loadingIndicator: "hidden", // Hide the loading indicator
+            loadingIndicator: "hidden",
           }}
         />
       </div>
-      {searchTerm && (
+      {query && (
         <div className="mt-3 text-lg text-gray-600 text-center">
-          {apiCount.toLocaleString()} APIs found
+          {results.nbHits.toLocaleString()} APIs found
         </div>
       )}
     </div>