improve fp search to allow search to not scope to showing tab (#611)

* improve fp search to allow search to not scope to showing tab * resolve comments * fix: add filter strategy * fix: issue with useSearchParams hook * resolve comments --------- Co-authored-by: David Totraev <[email protected]>
babylonlabs-io · Jan 15, 2025 · 2858047 · 2858047
1 parent de8bba4
commit 2858047
Show file tree

Hide file tree

Showing 5 changed files with 113 additions and 134 deletions.
diff --git 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 { filter, handleFilter } = useFinalityProviderState();
 
   return (
     <Select
       options={options}
-      onSelect={handleFilter}
+      onSelect={(value) => handleFilter("status", value.toString())}
       placeholder="Select Status"
-      defaultValue={filterValue}
+      value={filter.search ? "" : filter.status}
+      disabled={Boolean(filter.search)}
       renderSelectedOption={(option) => `Showing ${option.label}`}
     />
   );

diff --git a/src/app/components/Staking/FinalityProviders/FinalityProviderSearch.tsx b/src/app/components/Staking/FinalityProviders/FinalityProviderSearch.tsx
@@ -1,21 +1,40 @@
 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 = () => {
-  const { handleSearch, searchValue } = useFinalityProviderState();
+  const { filter, handleFilter } = useFinalityProviderState();
 
   const onSearchChange = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
-      handleSearch(e.target.value);
+      handleFilter("search", e.target.value);
     },
-    [handleSearch],
+    [handleFilter],
   );
 
-  const searchSuffix = (
-    <span className="cursor-pointer">
+  const onClearSearch = useCallback(() => {
+    handleFilter("search", "");
+  }, [handleFilter]);
+
+  const searchSuffix = filter.search ? (
+    <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>
   );
@@ -24,7 +43,7 @@ export const FinalityProviderSearch = () => {
     <Input
       placeholder="Search by Name or Public Key"
       suffix={searchSuffix}
-      value={searchValue}
+      value={filter.search}
       onChange={onSearchChange}
     />
   );

diff --git a/src/app/components/Staking/FinalityProviders/FinalityProviderTable.tsx b/src/app/components/Staking/FinalityProviders/FinalityProviderTable.tsx
@@ -20,10 +20,9 @@ export const FinalityProviderTable = ({
     isFetching,
     finalityProviders,
     hasNextPage,
-    fetchNextPage,
-    searchValue,
-    filterValue,
     hasError,
+    filter,
+    fetchNextPage,
     isRowSelectable,
   } = useFinalityProviderState();
 
@@ -83,7 +82,6 @@ export const FinalityProviderTable = ({
   return (
     <div className="h-[21rem] overflow-y-auto ">
       <Table
-        key={`${searchValue}-${filterValue}`}
         data={tableData}
         columns={finalityProviderColumns}
         loading={isFetching}

diff --git a/src/app/providers.tsx b/src/app/providers.tsx
@@ -5,7 +5,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { ReactQueryStreamedHydration } from "@tanstack/react-query-next-experimental";
 import { ThemeProvider } from "next-themes";
-import React from "react";
+import React, { Suspense } from "react";
 
 import { NotificationContainer } from "./components/Notification/NotificationContainer";
 import { ErrorProvider } from "./context/Error/ErrorContext";
@@ -20,38 +20,40 @@ function Providers({ children }: React.PropsWithChildren) {
   const [client] = React.useState(new QueryClient());
 
   return (
-    <ScrollLocker>
-      <ThemeProvider
-        defaultTheme="light"
-        enableSystem={false}
-        attribute="data-theme"
-      >
-        <QueryClientProvider client={client}>
-          <ErrorProvider>
-            <BbnRpcProvider>
-              <WalletConnectionProvider>
-                <BTCWalletProvider>
-                  <CosmosWalletProvider>
-                    <AppState>
-                      <StakingStatsProvider>
-                        <ReactQueryStreamedHydration>
-                          {children}
-                        </ReactQueryStreamedHydration>
-                      </StakingStatsProvider>
-                    </AppState>
-                  </CosmosWalletProvider>
-                </BTCWalletProvider>
-              </WalletConnectionProvider>
-            </BbnRpcProvider>
-          </ErrorProvider>
-          <ReactQueryDevtools
-            buttonPosition="bottom-left"
-            initialIsOpen={false}
-          />
-        </QueryClientProvider>
-        <NotificationContainer />
-      </ThemeProvider>
-    </ScrollLocker>
+    <Suspense>
+      <ScrollLocker>
+        <ThemeProvider
+          defaultTheme="light"
+          enableSystem={false}
+          attribute="data-theme"
+        >
+          <QueryClientProvider client={client}>
+            <ErrorProvider>
+              <BbnRpcProvider>
+                <WalletConnectionProvider>
+                  <BTCWalletProvider>
+                    <CosmosWalletProvider>
+                      <AppState>
+                        <StakingStatsProvider>
+                          <ReactQueryStreamedHydration>
+                            {children}
+                          </ReactQueryStreamedHydration>
+                        </StakingStatsProvider>
+                      </AppState>
+                    </CosmosWalletProvider>
+                  </BTCWalletProvider>
+                </WalletConnectionProvider>
+              </BbnRpcProvider>
+            </ErrorProvider>
+            <ReactQueryDevtools
+              buttonPosition="bottom-left"
+              initialIsOpen={false}
+            />
+          </QueryClientProvider>
+          <NotificationContainer />
+        </ThemeProvider>
+      </ScrollLocker>
+    </Suspense>
   );
 }