[feat ArkProjectNFTs#163] extract react-query usage into custom hooks

apps/arkmarket/src/hooks/useCollectionActivity.tsx

@@ -0,0 +1,31 @@
+import { useInfiniteQuery, keepPreviousData } from "@tanstack/react-query";
+
+import type { ActivityType } from "~/types";
+import type { CollectionActivityApiResponse } from "~/lib/getCollectionActivity";
+
+import { getCollectionActivity } from "~/lib/getCollectionActivity";
+
+interface useCollectionActivityProps {
+  collectionAddress: string;
+  filters: ActivityType[];
+}
+
+export default function useCollectionActivity({ collectionAddress, filters }: useCollectionActivityProps) {
+
+  const result = useInfiniteQuery({
+    queryKey: ["collectionActivity", collectionAddress, ...filters],
+    refetchInterval: 10_000,
+    placeholderData: keepPreviousData,
+    getNextPageParam: (lastPage: CollectionActivityApiResponse) =>
+      lastPage.next_page,
+    initialPageParam: undefined,
+    queryFn: ({ pageParam }) =>
+      getCollectionActivity({
+        page: pageParam,
+        collectionAddress,
+        activityFilters: filters,
+      }),
+  });
+
+  return result;
+}

apps/arkmarket/src/hooks/useCollectionTokens.tsx

@@ -0,0 +1,46 @@
+import { useSuspenseInfiniteQuery } from "@tanstack/react-query";
+
+import type {
+  CollectionSortBy,
+  CollectionSortDirection,
+  CollectionTokensApiResponse,
+} from "~/lib/getCollectionTokens";
+import type { ViewType } from "~/components/view-type-toggle-group";
+import type { Filters } from "~/types";
+
+import { getCollectionTokens } from "~/lib/getCollectionTokens";
+
+interface useCollectionTokensProps {
+  collectionAddress: string;
+  sortBy: CollectionSortBy;
+  sortDirection: CollectionSortDirection;
+  viewType: ViewType;
+  filters: Filters;
+}
+
+const REFETCH_INTERVAL = 10_000;
+
+export default function useCollectionTokens({ collectionAddress, sortDirection, sortBy, filters }: useCollectionTokensProps) {
+  const result = useSuspenseInfiniteQuery({
+    queryKey: [
+      "collectionTokens",
+      sortDirection,
+      sortBy,
+      collectionAddress,
+      filters,
+    ],
+    refetchInterval: REFETCH_INTERVAL,
+    getNextPageParam: (lastPage: CollectionTokensApiResponse) =>
+      lastPage.next_page,
+    initialPageParam: undefined as number | undefined,
+    queryFn: ({ pageParam }) =>
+      getCollectionTokens({
+        collectionAddress,
+        page: pageParam,
+        sortDirection,
+        sortBy,
+        filters,
+      }),
+  });
+  return result;
+}

apps/arkmarket/src/hooks/useCollectionTraits.tsx

@@ -0,0 +1,19 @@
+import { useQuery } from "@tanstack/react-query";
+
+import getCollectionTraits from "~/lib/getCollectionTraits"
+
+interface useCollectionTraitsProps {
+  address: string;
+}
+
+export default function useCollectionTraits({ address }: useCollectionTraitsProps) {
+  const result = useQuery({
+    queryKey: ["collectionTraits", address],
+    queryFn: () => 
+      getCollectionTraits({ 
+        collectionAddress:address 
+      }),
+  });
+
+  return result;
+}

apps/arkmarket/src/hooks/useCollectionTraitsSuspense.tsx

@@ -0,0 +1,16 @@
+import { useSuspenseQuery } from "@tanstack/react-query";
+
+import getCollectionTraits from "~/lib/getCollectionTraits";
+
+interface useCollectionTraitsSuspenseProps {
+  collectionAddress: string;
+
+}
+
+export default function useCollectionTraitsSuspense({ collectionAddress }: useCollectionTraitsSuspenseProps) {
+  const result = useSuspenseQuery({
+    queryKey: ["collectionTraits", collectionAddress],
+    queryFn: () => getCollectionTraits({ collectionAddress }),
+  });
+  return result;
+}

apps/arkmarket/src/hooks/useSearchCollection.tsx

@@ -0,0 +1,19 @@
+import { useQuery, keepPreviousData } from "@tanstack/react-query";
+
+import getCollectionSearch from "~/lib/getCollectionSearch"
+
+interface useSearchCollectionProps {
+  inputDebouncedValue: string;
+}
+
+export default function useSearchCollection({ inputDebouncedValue }: useSearchCollectionProps) {
+  const result = useQuery({
+    queryKey: ["searchCollection", inputDebouncedValue],
+    refetchInterval: false,
+    placeholderData: keepPreviousData,
+    queryFn: () => getCollectionSearch({ searchQuery: inputDebouncedValue }),
+    enabled: inputDebouncedValue.length >= 3,
+  });
+
+  return result;
+}

apps/arkmarket/src/hooks/useSystemStatus.tsx

@@ -0,0 +1,18 @@
+import { useQuery, keepPreviousData } from "@tanstack/react-query";
+
+import getSystemStatus from "~/lib/getSystemStatus"
+
+interface useSystemStatusProps {}
+
+const REFETCH_INTERVAL = 15_000;
+
+export default function useSystemStatus({}: useSystemStatusProps) {
+  const result = useQuery({
+    queryKey: ["systemStatus"],
+    queryFn: getSystemStatus,
+    refetchInterval: REFETCH_INTERVAL,
+    initialData: { status: "ok" },
+  });
+
+  return result;
+}

apps/arkmarket/src/hooks/useTokenActivity.tsx

@@ -0,0 +1,28 @@
+import { useInfiniteQuery, keepPreviousData } from "@tanstack/react-query";
+
+import type { TokenActivityApiResponse } from "~/lib/getTokenActivity";
+
+import getTokenActivity from "~/lib/getTokenActivity";
+
+interface useTokenActivityProps {
+  contractAddress: string;
+  tokenId: string;
+}
+
+const REFETCH_INTERVAL = 10_000;
+
+export default function useTokenActivity({ contractAddress, tokenId }: useTokenActivityProps) {
+
+  const result = useInfiniteQuery({
+    queryKey: ["tokenActivity", contractAddress, tokenId],
+    refetchInterval: REFETCH_INTERVAL,
+    // getNextPageParam: (lastPage) => lastPage.next_page,
+    getNextPageParam: (lastPage?: TokenActivityApiResponse) =>
+      lastPage?.next_page,
+    initialPageParam: undefined,
+    queryFn: ({ pageParam }) =>
+      getTokenActivity({ contractAddress, tokenId, page: pageParam }),
+  });
+
+  return result;
+}

apps/arkmarket/src/hooks/useTokenOffers.tsx

@@ -0,0 +1,31 @@
+import { useInfiniteQuery, keepPreviousData } from "@tanstack/react-query";
+
+import type { Token } from "~/types";
+import type { TokenOffersApiResponse } from "~/lib/getTokenOffers";
+
+import { getTokenOffers } from "~/lib/getTokenOffers";
+
+interface useTokenOffersProps {
+  token: Token,
+}
+
+const REFETCH_INTERVAL = 10_000;
+
+export default function useTokenOffers({ token }: useTokenOffersProps) {
+
+  const result = useInfiniteQuery({
+    queryKey: ["tokenOffers", token.collection_address, token.token_id],
+    refetchInterval: REFETCH_INTERVAL,
+    getNextPageParam: (lastPage: TokenOffersApiResponse) => lastPage.next_page,
+    placeholderData: keepPreviousData,
+    initialPageParam: undefined,
+    queryFn: ({ pageParam }) =>
+      getTokenOffers({
+        contractAddress: token.collection_address,
+        tokenId: token.token_id,
+        page: pageParam,
+      }),
+  });
+
+  return result;
+}

apps/arkmarket/src/hooks/useWalletActivity.tsx

@@ -0,0 +1,33 @@
+import { useInfiniteQuery, keepPreviousData } from "@tanstack/react-query";
+
+import type { ActivityType } from "~/types";
+import type { PortfolioActivityApiResponse } from "~/lib/getPortfolioActivity";
+
+import { getPortfolioActivity } from "~/lib/getPortfolioActivity";
+
+interface useWalletActivityProps {
+  walletAddress: string;
+  activityFilters: ActivityType[];
+}
+
+const REFETCH_INTERVAL = 10_000;
+
+export default function useWalletActivity({ walletAddress, activityFilters }: useWalletActivityProps) {
+
+  const result = useInfiniteQuery({
+    queryKey: ["walletActivity", walletAddress, ...activityFilters],
+    refetchInterval: REFETCH_INTERVAL,
+    placeholderData: keepPreviousData,
+    getNextPageParam: (lastPage: PortfolioActivityApiResponse) =>
+      lastPage.next_page,
+    initialPageParam: undefined,
+    queryFn: ({ pageParam }) =>
+      getPortfolioActivity({
+        page: pageParam,
+        walletAddress,
+        activityFilters,
+      }),
+  });
+
+  return result;
+}

apps/arkmarket/src/hooks/useWalletCollections.tsx

@@ -0,0 +1,33 @@
+import { useInfiniteQuery } from "@tanstack/react-query";
+
+import type { WalletCollectionsApiResponse } from "~/app/wallet/[walletAddress]/queries/getWalletData";
+
+import { getWalletCollections } from "~/app/wallet/[walletAddress]/queries/getWalletData";
+
+interface useWalletCollectionsProps {
+  walletAddress: string;
+}
+
+const REFETCH_INTERVAL = 10_000;
+
+export default function useWalletCollections({ walletAddress }: useWalletCollectionsProps) {
+
+  const result = useInfiniteQuery({
+    queryKey: ["walletCollections", walletAddress],
+    refetchInterval: REFETCH_INTERVAL,
+    getNextPageParam: (lastPage: WalletCollectionsApiResponse) =>
+      lastPage.next_page,
+    // initialData: {
+    //   pages: [walletCollectionsInitialData],
+    //   pageParams: [],
+    // },
+    initialPageParam: undefined,
+    queryFn: ({ pageParam }) =>
+      getWalletCollections({
+        page: pageParam,
+        walletAddress,
+      }),
+  });
+
+  return result;
+}

apps/arkmarket/src/hooks/useWalletOffers.tsx

@@ -0,0 +1,36 @@
+import { useInfiniteQuery, keepPreviousData } from "@tanstack/react-query";
+
+import type {
+  PortfolioOffersApiResponse,
+  PortfolioOffersTypeValues,
+} from "~/lib/getPortfolioOffers";
+
+import { getPortfolioOffers } from "~/lib/getPortfolioOffers";
+
+interface useWalletOffersProps {
+  walletAddress: string;
+  offerType: PortfolioOffersTypeValues;
+  isOwner: boolean;
+}
+
+const REFETCH_INTERVAL = 10_000;
+
+export default function useWalletOffers({ walletAddress, offerType }: useWalletOffersProps) {
+
+  const result = useInfiniteQuery({
+    queryKey: ["walletOffers", walletAddress, offerType],
+    refetchInterval: REFETCH_INTERVAL,
+    placeholderData: keepPreviousData,
+    getNextPageParam: (lastPage: PortfolioOffersApiResponse) =>
+      lastPage.next_page,
+    initialPageParam: undefined,
+    queryFn: ({ pageParam }) =>
+      getPortfolioOffers({
+        page: pageParam,
+        walletAddress,
+        offerType,
+      }),
+  });
+
+  return result;
+}

apps/arkmarket/src/hooks/useWalletTokens.tsx

@@ -0,0 +1,39 @@
+import { useInfiniteQuery, keepPreviousData } from "@tanstack/react-query";
+
+import type { WalletTokensApiResponse } from "~/app/wallet/[walletAddress]/queries/getWalletData";
+
+import { getWalletTokens } from "~/app/wallet/[walletAddress]/queries/getWalletData";
+
+
+interface useWalletTokensProps {
+  walletAddress: string;
+  collectionFilter: string | null,
+
+}
+
+const REFETCH_INTERVAL = 10_000;
+
+export default function useWalletTokens({ walletAddress, collectionFilter }: useWalletTokensProps) {
+
+  const result = useInfiniteQuery({
+    queryKey: ["walletTokens", collectionFilter, walletAddress],
+    refetchInterval: REFETCH_INTERVAL,
+    placeholderData: keepPreviousData,
+    getNextPageParam: (lastPage: WalletTokensApiResponse) => lastPage.next_page,
+    // initialData: isSSR
+    //   ? {
+    //       pages: [walletTokensInitialData],
+    //       pageParams: [],
+    //     }
+    //   : undefined,
+    initialPageParam: undefined,
+    queryFn: ({ pageParam }) =>
+      getWalletTokens({
+        page: pageParam,
+        walletAddress,
+        collectionAddress: collectionFilter,
+      }),
+  });
+
+  return result;
+}