From ca34b0cd2602ab383d8606d2631a681e9f64dda0 Mon Sep 17 00:00:00 2001
From: jeremy-babylonchain <jeremy.tsang@babylonchain.io>
Date: Thu, 9 Jan 2025 13:01:37 +0700
Subject: [PATCH] improve fp search to allow search to not scope to showing tab

---
 .../FinalityProviderFilter.tsx                |  5 +-
 .../FinalityProviderSearch.tsx                | 23 +++++++-
 src/app/state/FinalityProviderState.tsx       | 58 +++++++++++--------
 3 files changed, 58 insertions(+), 28 deletions(-)

diff --git a/src/app/components/Staking/FinalityProviders/FinalityProviderFilter.tsx b/src/app/components/Staking/FinalityProviders/FinalityProviderFilter.tsx
index ed4abb4c..c3d8e2ff 100644
--- a/src/app/components/Staking/FinalityProviders/FinalityProviderFilter.tsx
+++ b/src/app/components/Staking/FinalityProviders/FinalityProviderFilter.tsx
@@ -8,14 +8,15 @@ const options = [
 ];
 
 export const FinalityProviderFilter = () => {
-  const { filterValue, handleFilter } = useFinalityProviderState();
+  const { filterValue, handleFilter, searchValue } = useFinalityProviderState();
 
   return (
     <Select
       options={options}
       onSelect={handleFilter}
       placeholder="Select Status"
-      defaultValue={filterValue}
+      value={searchValue ? "" : filterValue}
+      disabled={Boolean(searchValue)}
       renderSelectedOption={(option) => `Showing ${option.label}`}
     />
   );
diff --git a/src/app/components/Staking/FinalityProviders/FinalityProviderSearch.tsx b/src/app/components/Staking/FinalityProviders/FinalityProviderSearch.tsx
index a5388572..c5e678eb 100644
--- a/src/app/components/Staking/FinalityProviders/FinalityProviderSearch.tsx
+++ b/src/app/components/Staking/FinalityProviders/FinalityProviderSearch.tsx
@@ -1,7 +1,9 @@
 import { Input } from "@babylonlabs-io/bbn-core-ui";
+import Image from "next/image";
 import { useCallback } from "react";
 import { RiSearchLine } from "react-icons/ri";
 
+import cancelCircle from "@/app/assets/cancel-circle.svg";
 import { useFinalityProviderState } from "@/app/state/FinalityProviderState";
 
 export const FinalityProviderSearch = () => {
@@ -14,8 +16,25 @@ export const FinalityProviderSearch = () => {
     [handleSearch],
   );
 
-  const searchSuffix = (
-    <span className="cursor-pointer">
+  const onClearSearch = useCallback(() => {
+    handleSearch("");
+  }, [handleSearch]);
+
+  const searchSuffix = searchValue ? (
+    <button
+      onClick={onClearSearch}
+      className="flex items-center hover:opacity-80 transition-opacity"
+    >
+      <Image
+        src={cancelCircle}
+        alt="Clear search"
+        width={18}
+        height={18}
+        className="opacity-50 hover:opacity-100 transition-opacity"
+      />
+    </button>
+  ) : (
+    <span className="text-primary-dark/50">
       <RiSearchLine size={20} />
     </span>
   );
diff --git a/src/app/state/FinalityProviderState.tsx b/src/app/state/FinalityProviderState.tsx
index d3afccd0..1272d4e9 100644
--- a/src/app/state/FinalityProviderState.tsx
+++ b/src/app/state/FinalityProviderState.tsx
@@ -3,7 +3,6 @@ import { useSearchParams } from "next/navigation";
 import {
   Suspense,
   useCallback,
-  useEffect,
   useMemo,
   useState,
   type PropsWithChildren,
@@ -70,11 +69,15 @@ function FinalityProviderStateInner({ children }: PropsWithChildren) {
   const searchParams = useSearchParams();
   const fpParam = searchParams.get("fp");
 
-  const [searchValue, setSearchValue] = useState("");
+  const [searchValue, setSearchValue] = useState(fpParam || "");
   const [filterValue, setFilterValue] = useState<string | number>(
     fpParam ? "" : "active",
   );
   const [sortState, setSortState] = useState<SortState>({});
+  const [previousFilterValue, setPreviousFilterValue] = useState<
+    string | number
+  >("active");
+  const [isInitialLoad, setIsInitialLoad] = useState(true);
 
   const debouncedSearch = useDebounce(searchValue, 300);
 
@@ -85,9 +88,26 @@ function FinalityProviderStateInner({ children }: PropsWithChildren) {
       name: debouncedSearch,
     });
 
-  const handleSearch = useCallback((searchTerm: string) => {
-    setSearchValue(searchTerm);
-  }, []);
+  const handleSearch = useCallback(
+    (searchTerm: string) => {
+      if (!searchValue && searchTerm) {
+        setPreviousFilterValue(filterValue);
+      }
+
+      setSearchValue(searchTerm);
+
+      if (!(isInitialLoad && fpParam && searchTerm === fpParam)) {
+        if (searchTerm) {
+          setFilterValue("");
+        } else {
+          setFilterValue(previousFilterValue);
+        }
+      } else {
+        setIsInitialLoad(false);
+      }
+    },
+    [searchValue, filterValue, previousFilterValue, isInitialLoad, fpParam],
+  );
 
   const handleSort = useCallback((sortField: string) => {
     setSortState(({ field, direction }) =>
@@ -105,6 +125,7 @@ function FinalityProviderStateInner({ children }: PropsWithChildren) {
 
   const handleFilter = useCallback((value: string | number) => {
     setFilterValue(value);
+    setPreviousFilterValue(value);
   }, []);
 
   const isRowSelectable = useCallback((row: FinalityProvider) => {
@@ -120,18 +141,6 @@ function FinalityProviderStateInner({ children }: PropsWithChildren) {
     return data.finalityProviders.filter((fp: FinalityProvider) => {
       if (!fp) return false;
 
-      const isActive = fp.state === FinalityProviderStateEnum.ACTIVE;
-      const isInactive = inactiveStatuses.has(fp.state);
-
-      const statusMatch =
-        filterValue === "active"
-          ? isActive
-          : filterValue === "inactive"
-            ? isInactive
-            : true;
-
-      if (!statusMatch) return false;
-
       if (searchValue) {
         const searchLower = searchValue.toLowerCase();
         return (
@@ -141,7 +150,14 @@ function FinalityProviderStateInner({ children }: PropsWithChildren) {
         );
       }
 
-      return true;
+      const isActive = fp.state === FinalityProviderStateEnum.ACTIVE;
+      const isInactive = inactiveStatuses.has(fp.state);
+
+      return filterValue === "active"
+        ? isActive
+        : filterValue === "inactive"
+          ? isInactive
+          : true;
     });
   }, [data?.finalityProviders, filterValue, searchValue]);
 
@@ -151,12 +167,6 @@ function FinalityProviderStateInner({ children }: PropsWithChildren) {
     [data?.finalityProviders],
   );
 
-  useEffect(() => {
-    if (fpParam && data?.finalityProviders) {
-      handleSearch(fpParam);
-    }
-  }, [fpParam, data?.finalityProviders, handleSearch]);
-
   const state = useMemo(
     () => ({
       searchValue,