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,30 +1,20 @@
 import { useDebounce } from "@uidotdev/usehooks";
-import { useSearchParams } from "next/navigation";
 import React, { useEffect, useState } from "react";
 import { FiSearch } from "react-icons/fi";
 
 interface FinalityProviderSearchProps {
   onSearch: (searchTerm: string) => void;
+  initialSearchTerm: string;
 }
 
 export const FinalityProviderSearch: React.FC<FinalityProviderSearchProps> = ({
   onSearch,
+  initialSearchTerm,
 }) => {
-  // Get the finality provider from the search params
-  const searchParams = useSearchParams();
-  const initialSearchFp = searchParams.get("fp");
-
-  const [searchTerm, setSearchTerm] = useState(initialSearchFp || "");
+  const [searchTerm, setSearchTerm] = useState(initialSearchTerm);
   const debouncedSearchTerm = useDebounce(searchTerm, 300);
 
-  // Effect for handling initial search
-  useEffect(() => {
-    if (initialSearchFp) {
-      onSearch(initialSearchFp);
-    }
-  }, [initialSearchFp, onSearch]);
-
-  // Effect for handling subsequent searches
+  // Effect for handling searches
   useEffect(() => {
     onSearch(debouncedSearchTerm);
   }, [debouncedSearchTerm, onSearch]);

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

@@ -1,4 +1,5 @@
 import { useInfiniteQuery } from "@tanstack/react-query";
+import { useSearchParams } from "next/navigation";
 import { useEffect } from "react";
 import InfiniteScroll from "react-infinite-scroll-component";
 
@@ -23,6 +24,9 @@ export const FinalityProviders: React.FC<FinalityProvidersProps> = ({
   onFinalityProviderChange,
   onFinalityProvidersLoad,
 }) => {
+  const searchParams = useSearchParams();
+  const initialSearchFp = searchParams.get("fp");
+
   const { isErrorOpen, showError, handleError } = useError();
   const {
     data: fps,
@@ -59,8 +63,11 @@ export const FinalityProviders: React.FC<FinalityProvidersProps> = ({
   });
 
   useEffect(() => {
+    if (fps?.finalityProviders && initialSearchFp) {
+      handleSearch(initialSearchFp);
+    }
     fps?.finalityProviders && onFinalityProvidersLoad(fps.finalityProviders);
-  }, [fps, onFinalityProvidersLoad]);
+  }, [fps, onFinalityProvidersLoad, initialSearchFp]);
 
   useEffect(() => {
     if (
@@ -106,7 +113,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
+          onSearch={handleSearch}
+          initialSearchTerm={initialSearchFp || ""}
+        />
       </div>
       <div className="hidden gap-2 px-4 lg:grid lg:grid-cols-stakingFinalityProvidersDesktop">
         <p>Finality Provider</p>