Merge pull request #3018 from pyth-network/fix/price-feeds-search

feat: update search on feeds table

Author: alexcambose

apps/insights/src/components/PriceComponentsCard/index.tsx

@@ -200,6 +200,7 @@ export const ResolvedPriceComponentsCard = <
         }
       }
     },
+    (items) => items,
     {
       defaultPageSize: 50,
       defaultSort: "name",

apps/insights/src/components/PriceFeeds/price-feeds-card.tsx

@@ -14,24 +14,25 @@ import type {
 } from "@pythnetwork/component-library/Table";
 import { Table } from "@pythnetwork/component-library/Table";
 import { useLogger } from "@pythnetwork/component-library/useLogger";
-import { useQueryState, parseAsString } from "nuqs";
+import { matchSorter } from "match-sorter";
+import { parseAsString, useQueryState } from "nuqs";
 import type { ReactNode } from "react";
 import { Suspense, useCallback, useMemo } from "react";
-import { useFilter, useCollator } from "react-aria";
+import { useCollator } from "react-aria";
 
-import styles from "./price-feeds-card.module.scss";
 import { useQueryParamFilterPagination } from "../../hooks/use-query-param-filter-pagination";
 import { Cluster } from "../../services/pyth";
 import { AssetClassBadge } from "../AssetClassBadge";
 import { FeedKey } from "../FeedKey";
 import {
-  SKELETON_WIDTH,
-  LivePrice,
   LiveConfidence,
+  LivePrice,
   LiveValue,
+  SKELETON_WIDTH,
 } from "../LivePrices";
 import { PriceFeedTag } from "../PriceFeedTag";
 import { PriceName } from "../PriceName";
+import styles from "./price-feeds-card.module.scss";
 
 type Props = {
   id: string;
@@ -56,7 +57,6 @@ export const PriceFeedsCard = ({ priceFeeds, ...props }: Props) => (
 const ResolvedPriceFeedsCard = ({ priceFeeds, ...props }: Props) => {
   const logger = useLogger();
   const collator = useCollator();
-  const filter = useFilter({ sensitivity: "base", usage: "search" });
   const [assetClass, setAssetClass] = useQueryState(
     "assetClass",
     parseAsString.withDefault(""),
@@ -83,14 +83,19 @@ const ResolvedPriceFeedsCard = ({ priceFeeds, ...props }: Props) => {
     mkPageLink,
   } = useQueryParamFilterPagination(
     feedsFilteredByAssetClass,
-    (priceFeed, search) => filter.contains(priceFeed.displaySymbol, search),
+    () => true,
     (a, b, { column, direction }) => {
       const field = column === "assetClass" ? "assetClass" : "displaySymbol";
       return (
         (direction === "descending" ? -1 : 1) *
         collator.compare(a[field], b[field])
       );
     },
+    (items, search) => {
+      return matchSorter(items, search, {
+        keys: ["displaySymbol", "symbol", "description", "key"],
+      });
+    },
     { defaultSort: "priceFeedName" },
   );
 

apps/insights/src/components/Publishers/publishers-card.tsx

@@ -124,6 +124,7 @@ const ResolvedPublishersCard = ({
         }
       }
     },
+    (items) => items,
     { defaultSort: "ranking" },
   );
 

apps/insights/src/hooks/use-query-param-filter-pagination.ts

@@ -14,8 +14,9 @@ import { useCallback, useMemo } from "react";
 
 export const useQueryParamFilterPagination = <T>(
   items: T[],
-  predicate: (item: T, term: string) => boolean,
+  predicate: (item: T, search: string) => boolean,
   doSort: (a: T, b: T, descriptor: SortDescriptor) => number,
+  doMutate: (items: T[], search: string) => T[],
   options?: {
     defaultPageSize?: number | undefined;
     defaultSort?: string | undefined;
@@ -100,9 +101,13 @@ export const useQueryParamFilterPagination = <T>(
     [filteredItems, sortDescriptor, doSort],
   );
 
+  const mutatedItems = useMemo(() => {
+    return doMutate(sortedItems, search);
+  }, [doMutate, sortedItems, search]);
+
   const paginatedItems = useMemo(
-    () => sortedItems.slice((page - 1) * pageSize, page * pageSize),
-    [page, pageSize, sortedItems],
+    () => mutatedItems.slice((page - 1) * pageSize, page * pageSize),
+    [page, pageSize, mutatedItems],
   );
 
   const numPages = useMemo(