Merge pull request #3096 from pyth-network/refactor/query-hook

refactor(insights): move useQueryParamFilterPagination to component lib

Author: alexcambose

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

@@ -16,14 +16,14 @@ import type {
 } from "@pythnetwork/component-library/Table";
 import { Table } from "@pythnetwork/component-library/Table";
 import { useLogger } from "@pythnetwork/component-library/useLogger";
+import { useQueryParamFilterPagination } from "@pythnetwork/component-library/useQueryParamsPagination";
 import clsx from "clsx";
 import { useQueryState, parseAsStringEnum, parseAsBoolean } from "nuqs";
 import type { ReactNode } from "react";
 import { Fragment, Suspense, useMemo, useCallback } from "react";
 import { useFilter, useCollator } from "react-aria";
 
 import styles from "./index.module.scss";
-import { useQueryParamFilterPagination } from "../../hooks/use-query-param-filter-pagination";
 import { Cluster } from "../../services/pyth";
 import type { StatusName } from "../../status";
 import {

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

@@ -14,13 +14,13 @@ import type {
 } from "@pythnetwork/component-library/Table";
 import { Table } from "@pythnetwork/component-library/Table";
 import { useLogger } from "@pythnetwork/component-library/useLogger";
+import { useQueryParamFilterPagination } from "@pythnetwork/component-library/useQueryParamsPagination";
 import { matchSorter } from "match-sorter";
 import { parseAsString, useQueryState } from "nuqs";
 import type { ReactNode } from "react";
 import { Suspense, useCallback, useMemo } from "react";
 import { useCollator } from "react-aria";
 
-import { useQueryParamFilterPagination } from "../../hooks/use-query-param-filter-pagination";
 import { Cluster } from "../../services/pyth";
 import { AssetClassBadge } from "../AssetClassBadge";
 import { FeedKey } from "../FeedKey";

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

@@ -16,14 +16,14 @@ import type {
 } from "@pythnetwork/component-library/Table";
 import { Table } from "@pythnetwork/component-library/Table";
 import { useLogger } from "@pythnetwork/component-library/useLogger";
+import { useQueryParamFilterPagination } from "@pythnetwork/component-library/useQueryParamsPagination";
 import clsx from "clsx";
 import { useQueryState, parseAsStringEnum } from "nuqs";
 import type { ReactNode } from "react";
 import { Suspense, useMemo, useCallback } from "react";
 import { useFilter, useCollator } from "react-aria";
 
 import styles from "./publishers-card.module.scss";
-import { useQueryParamFilterPagination } from "../../hooks/use-query-param-filter-pagination";
 import { CLUSTER_NAMES } from "../../services/pyth";
 import {
   ExplainPermissioned,

packages/component-library/package.json

@@ -15,6 +15,10 @@
       "types": "./dist/esm/useData/index.d.ts",
       "default": "./dist/esm/useData/index.js"
     },
+    "./useQueryParamsPagination": {
+      "types": "./dist/esm/useQueryParamsPagination/index.d.ts",
+      "default": "./dist/esm/useQueryParamsPagination/index.js"
+    },
     "./theme": "./dist/esm/theme.scss"
   },
   "scripts": {
@@ -47,6 +51,7 @@
     "modern-normalize": "catalog:",
     "motion": "catalog:",
     "next-themes": "catalog:",
+    "nuqs": "catalog:",
     "pino": "catalog:",
     "react-aria": "catalog:",
     "react-aria-components": "catalog:",

apps/insights/src/hooks/use-query-param-filter-pagination.ts renamed to packages/component-library/src/useQueryParamsPagination/index.ts

@@ -1,7 +1,5 @@
 "use client";
 
-import type { SortDescriptor } from "@pythnetwork/component-library/unstyled/Table";
-import { useLogger } from "@pythnetwork/component-library/useLogger";
 import { usePathname } from "next/navigation";
 import {
   parseAsString,
@@ -12,6 +10,9 @@ import {
 } from "nuqs";
 import { useCallback, useMemo } from "react";
 
+import type { SortDescriptor } from "../unstyled/Table";
+import { useLogger } from "../useLogger";
+
 export const useQueryParamFilterPagination = <T>(
   items: T[],
   predicate: (item: T, search: string) => boolean,