From 8e126d623bb6a746acadac2d0bc8471c9c7a186d Mon Sep 17 00:00:00 2001
From: jeremy-babylonchain <jeremy.tsang@babylonchain.io>
Date: Thu, 12 Dec 2024 18:27:42 +0800
Subject: [PATCH] fix search param handling

---
 package-lock.json                              |  4 ++--
 package.json                                   |  2 +-
 .../FinalityProviderSearch.tsx                 | 18 ++++--------------
 .../FinalityProviders/FinalityProviders.tsx    | 14 ++++++++++++--
 4 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 21ac8bdd..47ee79ab 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "simple-staking",
-  "version": "0.3.21",
+  "version": "0.3.22",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "simple-staking",
-      "version": "0.3.21",
+      "version": "0.3.22",
       "dependencies": {
         "@babylonlabs-io/btc-staking-ts": "0.3.0",
         "@bitcoin-js/tiny-secp256k1-asmjs": "2.2.3",
diff --git a/package.json b/package.json
index 30e50b8a..cc8613a6 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "simple-staking",
-  "version": "0.3.21",
+  "version": "0.3.22",
   "private": true,
   "scripts": {
     "dev": "next dev",
diff --git a/src/app/components/Staking/FinalityProviders/FinalityProviderSearch.tsx b/src/app/components/Staking/FinalityProviders/FinalityProviderSearch.tsx
index 6889d7e2..6f82ae74 100644
--- a/src/app/components/Staking/FinalityProviders/FinalityProviderSearch.tsx
+++ b/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]);
diff --git a/src/app/components/Staking/FinalityProviders/FinalityProviders.tsx b/src/app/components/Staking/FinalityProviders/FinalityProviders.tsx
index 7794ef13..086aa9c8 100644
--- a/src/app/components/Staking/FinalityProviders/FinalityProviders.tsx
+++ b/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>