fix search param handling

package.json

@@ -1,6 +1,6 @@
 {
   "name": "simple-staking",
-  "version": "0.3.21",
+  "version": "0.3.22",
   "private": true,
   "scripts": {
     "dev": "next dev",

src/app/components/Staking/FinalityProviders/FinalityProviderSearch.tsx

@@ -1,36 +1,19 @@
-import { useDebounce } from "@uidotdev/usehooks";
-import { useSearchParams } from "next/navigation";
-import React, { useEffect, useState } from "react";
+"use client";
+
+import React from "react";
 import { FiSearch } from "react-icons/fi";
 
 interface FinalityProviderSearchProps {
+  searchValue: string;
   onSearch: (searchTerm: string) => void;
 }
 
 export const FinalityProviderSearch: React.FC<FinalityProviderSearchProps> = ({
+  searchValue,
   onSearch,
 }) => {
-  // Get the finality provider from the search params
-  const searchParams = useSearchParams();
-  const initialSearchFp = searchParams.get("fp");
-
-  const [searchTerm, setSearchTerm] = useState(initialSearchFp || "");
-  const debouncedSearchTerm = useDebounce(searchTerm, 300);
-
-  // Effect for handling initial search
-  useEffect(() => {
-    if (initialSearchFp) {
-      onSearch(initialSearchFp);
-    }
-  }, [initialSearchFp, onSearch]);
-
-  // Effect for handling subsequent searches
-  useEffect(() => {
-    onSearch(debouncedSearchTerm);
-  }, [debouncedSearchTerm, onSearch]);
-
   const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setSearchTerm(e.target.value);
+    onSearch(e.target.value);
   };
 
   return (
@@ -39,10 +22,11 @@ export const FinalityProviderSearch: React.FC<FinalityProviderSearchProps> = ({
         <div className="absolute inset-y-0 left-0 flex items-center justify-center w-10">
           <FiSearch className="text-sm md:text-lg" />
         </div>
+
         <input
           type="text"
           placeholder="Search by Name or Public Key"
-          value={searchTerm}
+          value={searchValue}
           onChange={handleSearch}
           className="w-full pl-10 pr-4 py-2 text-sm bg-transparent border-b border-gray-300 focus:outline-none focus:border-primary"
         />

src/app/components/Staking/FinalityProviders/FinalityProviders.tsx

@@ -92,9 +92,8 @@ export const FinalityProviders: React.FC<FinalityProvidersProps> = ({
     handleError,
   ]);
 
-  const { handleSearch, filteredProviders } = useFinalityProvidersData(
-    fps?.finalityProviders,
-  );
+  const { searchValue, handleSearch, filteredProviders } =
+    useFinalityProvidersData(fps?.finalityProviders);
 
   if (!fps?.finalityProviders?.length) {
     return <LoadingView />;
@@ -106,7 +105,10 @@ export const FinalityProviders: React.FC<FinalityProvidersProps> = ({
         <strong>Step-1:</strong> Select a finality provider
       </p>
       <div className="flex gap-3">
-        <FinalityProviderSearch onSearch={handleSearch} />
+        <FinalityProviderSearch
+          searchValue={searchValue}
+          onSearch={handleSearch}
+        />
       </div>
       <div className="hidden gap-2 px-4 lg:grid lg:grid-cols-stakingFinalityProvidersDesktop">
         <p>Finality Provider</p>

src/app/hooks/finalityProviders/useFinalityProvidersData.ts

@@ -1,33 +1,40 @@
-import { useCallback, useEffect, useState } from "react";
+"use client";
+
+import { useDebounce } from "@uidotdev/usehooks";
+import { useSearchParams } from "next/navigation";
+import { useCallback, useMemo, useState } from "react";
 
 import { FinalityProvider as FinalityProviderInterface } from "@/app/types/finalityProviders";
 
 export const useFinalityProvidersData = (
   initialProviders: FinalityProviderInterface[] | undefined,
 ) => {
-  const [filteredProviders, setFilteredProviders] = useState(initialProviders);
+  const searchParams = useSearchParams();
+  const [searchTerm, setSearchTerm] = useState(searchParams.get("fp") || "");
+  const debouncedSearchTerm = useDebounce(searchTerm, 300);
 
-  useEffect(() => {
-    setFilteredProviders(initialProviders);
-  }, [initialProviders]);
+  const filteredProviders = useMemo(
+    () =>
+      initialProviders?.filter((fp) => {
+        const matchesMoniker = fp.description?.moniker
+          ?.toLowerCase()
+          .includes(debouncedSearchTerm.toLowerCase());
+        const matchesPk = fp.btcPk
+          .toLowerCase()
+          .includes(debouncedSearchTerm.toLowerCase());
 
-  const handleSearch = useCallback(
-    (searchTerm: string) => {
-      const filtered = initialProviders?.filter(
-        (fp) =>
-          fp.description?.moniker
-            ?.toLowerCase()
-            .includes(searchTerm.toLowerCase()) ||
-          fp.btcPk.toLowerCase().includes(searchTerm.toLowerCase()),
-      );
-      setFilteredProviders(filtered);
-    },
-    [initialProviders],
+        return matchesMoniker || matchesPk;
+      }),
+    [initialProviders, debouncedSearchTerm],
   );
 
+  const handleSearch = useCallback((searchValue: string) => {
+    setSearchTerm(searchValue);
+  }, []);
+
   return {
     filteredProviders,
-    setFilteredProviders,
     handleSearch,
+    searchValue: searchTerm,
   };
 };