From 76ad71220b0aac5c821f196294472a453eac2ed6 Mon Sep 17 00:00:00 2001
From: wjrjerome <wjrjerome@babylonchain.io>
Date: Wed, 27 Nov 2024 20:49:08 +1100
Subject: [PATCH] process the pre-selected FP inside the child component

---
 .../FinalityProviderSearch.tsx                | 22 +++++++++----------
 .../FinalityProviders/FinalityProviders.tsx   |  6 +----
 src/app/components/Staking/Staking.tsx        |  6 -----
 src/app/types/finalityProviders.ts            |  1 -
 4 files changed, 11 insertions(+), 24 deletions(-)

diff --git a/src/app/components/Staking/FinalityProviders/FinalityProviderSearch.tsx b/src/app/components/Staking/FinalityProviders/FinalityProviderSearch.tsx
index 9ee2e998..15c99b95 100644
--- a/src/app/components/Staking/FinalityProviders/FinalityProviderSearch.tsx
+++ b/src/app/components/Staking/FinalityProviders/FinalityProviderSearch.tsx
@@ -1,29 +1,27 @@
 import { useDebounce } from "@uidotdev/usehooks";
+import { useSearchParams } from "next/navigation";
 import React, { useEffect, useState } from "react";
 import { FiSearch } from "react-icons/fi";
 
 interface FinalityProviderSearchProps {
-  initialSearchValue: string | null;
   onSearch: (searchTerm: string) => void;
 }
 
 export const FinalityProviderSearch: React.FC<FinalityProviderSearchProps> = ({
-  initialSearchValue,
   onSearch,
 }) => {
-  const [searchTerm, setSearchTerm] = useState("");
-  const debouncedSearchTerm = useDebounce(searchTerm, 300);
+  // Get the finality provider from the search params
+  const searchParams = useSearchParams();
+  const initialSearchFp = searchParams.get("fp");
 
-  useEffect(() => {
-    onSearch(debouncedSearchTerm);
-  }, [debouncedSearchTerm, onSearch]);
+  const [searchTerm, setSearchTerm] = useState(initialSearchFp);
+  const debouncedSearchTerm = useDebounce(searchTerm, 300);
 
   useEffect(() => {
-    if (initialSearchValue) {
-      setSearchTerm(initialSearchValue);
-      onSearch(initialSearchValue);
+    if (debouncedSearchTerm) {
+      onSearch(debouncedSearchTerm);
     }
-  }, [initialSearchValue, onSearch]);
+  }, [debouncedSearchTerm, onSearch]);
 
   const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
     setSearchTerm(e.target.value);
@@ -38,7 +36,7 @@ export const FinalityProviderSearch: React.FC<FinalityProviderSearchProps> = ({
         <input
           type="text"
           placeholder="Search by Name or Public Key"
-          value={searchTerm}
+          value={searchTerm ?? ""}
           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"
         />
diff --git a/src/app/components/Staking/FinalityProviders/FinalityProviders.tsx b/src/app/components/Staking/FinalityProviders/FinalityProviders.tsx
index 53188d8d..aac6009a 100644
--- a/src/app/components/Staking/FinalityProviders/FinalityProviders.tsx
+++ b/src/app/components/Staking/FinalityProviders/FinalityProviders.tsx
@@ -19,7 +19,6 @@ import { FinalityProvider } from "./FinalityProvider";
 import { FinalityProviderSearch } from "./FinalityProviderSearch";
 
 export const FinalityProviders: React.FC<FinalityProvidersProps> = ({
-  initialSearchValue,
   selectedFinalityProvider,
   onFinalityProviderChange,
   onFinalityProvidersLoad,
@@ -107,10 +106,7 @@ export const FinalityProviders: React.FC<FinalityProvidersProps> = ({
         <strong>Step-1:</strong> Select a finality provider
       </p>
       <div className="flex gap-3">
-        <FinalityProviderSearch
-          initialSearchValue={initialSearchValue}
-          onSearch={handleSearch}
-        />
+        <FinalityProviderSearch onSearch={handleSearch} />
       </div>
       <div className="hidden gap-2 px-4 lg:grid lg:grid-cols-stakingFinalityProvidersDesktop">
         <p>Finality Provider</p>
diff --git a/src/app/components/Staking/Staking.tsx b/src/app/components/Staking/Staking.tsx
index 2754de8f..9ff1df24 100644
--- a/src/app/components/Staking/Staking.tsx
+++ b/src/app/components/Staking/Staking.tsx
@@ -2,7 +2,6 @@
 
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { networks, Transaction } from "bitcoinjs-lib";
-import { useSearchParams } from "next/navigation";
 import { Dispatch, SetStateAction, useEffect, useMemo, useState } from "react";
 import { Tooltip } from "react-tooltip";
 import { useLocalStorage } from "usehooks-ts";
@@ -85,10 +84,6 @@ export const Staking: React.FC<StakingProps> = ({
   btcWalletBalanceSat,
   availableUTXOs,
 }) => {
-  // Get the finality provider from the search params
-  const searchParams = useSearchParams();
-  const initialSearchFp = searchParams.get("fp");
-
   // Staking form state
   const [stakingAmountSat, setStakingAmountSat] = useState(0);
   const [stakingTimeBlocks, setStakingTimeBlocks] = useState(0);
@@ -688,7 +683,6 @@ export const Staking: React.FC<StakingProps> = ({
             onFinalityProvidersLoad={setFinalityProviders}
             selectedFinalityProvider={finalityProvider}
             onFinalityProviderChange={handleChooseFinalityProvider}
-            initialSearchValue={initialSearchFp}
           />
         </div>
         <div className="divider m-0 lg:divider-horizontal lg:m-0" />
diff --git a/src/app/types/finalityProviders.ts b/src/app/types/finalityProviders.ts
index 87306fdc..c1bb1b3a 100644
--- a/src/app/types/finalityProviders.ts
+++ b/src/app/types/finalityProviders.ts
@@ -19,7 +19,6 @@ export interface Description {
 }
 
 export interface FinalityProvidersProps {
-  initialSearchValue: string | null;
   onFinalityProvidersLoad: Dispatch<
     SetStateAction<FinalityProvider[] | undefined>
   >;