[feat #163] extract react-query usage into custom hooks (#182)

#163 Create custom hooks for react-query usage: ### useQuery: - (was already implemented) useCollection - useCollectionTraits - (was already implemented) useTokenMarketData - useSearchCollection - useSystemStatus - (was already implemented) useBalance - (was already implemented) usePortfolioStats - (was already implemented) usePrices ### useInfiniteQuery: - useCollectionActivity - useTokenActivity - useTokenOffers - useWalletActivity - useWalletCollections - useWalletOffers - useWalletTokens ### useSuspenseQuery: - useCollectionTraits --> renamed to useCollectionTraitsSuspense (there are another hook called useCollectionTraits but with useQuery instead of useSuspenseQuery) ### useSuspenseInfiniteQuery: - useCollectionTokens
ArkProjectNFTs · Oct 19, 2024 · 43dff95 · 43dff95
1 parent b0fcac4
commit 43dff95
Show file tree

Hide file tree

Showing 28 changed files with 390 additions and 217 deletions.
diff --git a/.../arkmarket/src/app/collection/[collectionAddress]/components/collection-activity-data.tsx b/.../arkmarket/src/app/collection/[collectionAddress]/components/collection-activity-data.tsx
@@ -1,14 +1,12 @@
 "use client";
 
 import { useMemo } from "react";
-import { keepPreviousData, useInfiniteQuery } from "@tanstack/react-query";
 
-import type { CollectionActivityApiResponse } from "~/lib/getCollectionActivity";
 import type { ActivityType } from "~/types";
 import useInfiniteWindowScroll from "~/hooks/useInfiniteWindowScroll";
-import { getCollectionActivity } from "~/lib/getCollectionActivity";
 import DesktopCollectionActivityData from "./desktop-collection-activity";
 import MobileCollectionActivity from "./mobile-collection-activity";
+import useCollectionActivity from "~/hooks/useCollectionActivity";
 
 interface CollectionProps {
   collectionAddress: string;
@@ -25,20 +23,7 @@ export default function CollectionActivityData({
     fetchNextPage,
     hasNextPage,
     isFetchingNextPage,
-  } = 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,
-      }),
-  });
+  } = useCollectionActivity({ collectionAddress, filters })
   useInfiniteWindowScroll({
     fetchNextPage,
     hasNextPage,

diff --git a/apps/arkmarket/src/app/collection/[collectionAddress]/components/collection-header.tsx b/apps/arkmarket/src/app/collection/[collectionAddress]/components/collection-header.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 import { useState } from "react";
-import { useQuery } from "@tanstack/react-query";
 
 import { cn, focusableStyles } from "@ark-market/ui";
 import {
@@ -20,9 +19,10 @@ import {
 import type { Collection } from "~/types";
 import CopyButton from "~/components/copy-button";
 import ExternalLink from "~/components/external-link";
-import getCollection from "~/lib/getCollection";
 import CollectionHeaderStats from "./collection-header-stats";
 
+import useCollection from "~/hooks/useCollection";
+
 interface CollectionHeaderProps {
   collectionAddress: string;
   collection: Collection;
@@ -34,12 +34,7 @@ export default function CollectionHeader({
 }: CollectionHeaderProps) {
   const [collapsibleOpen, setCollapsibleOpen] = useState(false);
 
-  const { data } = useQuery({
-    queryKey: ["collection", collectionAddress],
-    queryFn: () => getCollection({ collectionAddress }),
-    initialData: collection,
-    refetchInterval: 15_000,
-  });
+  const { data } = useCollection({ address:collectionAddress })
 
   if (!data) {
     return null;

diff --git a/apps/arkmarket/src/app/collection/[collectionAddress]/components/collection-items-data.tsx b/apps/arkmarket/src/app/collection/[collectionAddress]/components/collection-items-data.tsx
@@ -1,19 +1,17 @@
 "use client";
 
 import { useMemo } from "react";
-import { useSuspenseInfiniteQuery } from "@tanstack/react-query";
 
 import type { ViewType } from "../../../../components/view-type-toggle-group";
 import type {
   CollectionSortBy,
   CollectionSortDirection,
-  CollectionTokensApiResponse,
 } from "~/lib/getCollectionTokens";
 import type { CollectionToken, Filters } from "~/types";
 import useInfiniteWindowScroll from "~/hooks/useInfiniteWindowScroll";
-import { getCollectionTokens } from "~/lib/getCollectionTokens";
 import CollectionItemsDataGridView from "./collection-items-data-grid-view";
 import CollectionItemsDataListView from "./collection-items-data-list-view";
+import useCollectionTokens from "~/hooks/useCollectionTokens";
 
 interface CollectionItemsDataProps {
   collectionAddress: string;
@@ -37,29 +35,7 @@ export default function CollectionItemsData({
     fetchNextPage,
     hasNextPage,
     isFetchingNextPage,
-  } = useSuspenseInfiniteQuery({
-    queryKey: [
-      "collectionTokens",
-      sortDirection,
-      sortBy,
-      collectionAddress,
-      filters,
-      buyNow,
-    ],
-    refetchInterval: 10_000,
-    getNextPageParam: (lastPage: CollectionTokensApiResponse) =>
-      lastPage.next_page,
-    initialPageParam: undefined as number | undefined,
-    queryFn: ({ pageParam }) =>
-      getCollectionTokens({
-        collectionAddress,
-        page: pageParam,
-        sortDirection,
-        sortBy,
-        filters,
-        buyNow,
-      }),
-  });
+  } = useCollectionTokens({ collectionAddress, filters, sortBy, sortDirection, buyNow })
 
   useInfiniteWindowScroll({
     fetchNextPage,

diff --git a/...ket/src/app/collection/[collectionAddress]/components/collection-items-filters-dialog.tsx b/...ket/src/app/collection/[collectionAddress]/components/collection-items-filters-dialog.tsx
@@ -1,13 +1,13 @@
-import { useQuery } from "@tanstack/react-query";
 
 import { Button } from "@ark-market/ui/button";
 import { Dialog, DialogContent, DialogTitle } from "@ark-market/ui/dialog";
 import { ScrollArea } from "@ark-market/ui/scroll-area";
 
 import type { Filters } from "~/types";
-import getCollectionTraits from "~/lib/getCollectionTraits";
 import CollectionItemsFiltersTrait from "./collection-items-filters-trait";
 
+import useCollectionTraits from "~/hooks/useCollectionTraits";
+
 interface CollectionItemsFiltersDialogProps {
   collectionAddress: string;
   filters: Filters;
@@ -25,10 +25,7 @@ export default function CollectionItemsFiltersDialog({
   open,
   setOpen,
 }: CollectionItemsFiltersDialogProps) {
-  const { data } = useQuery({
-    queryKey: ["collectionTraits", collectionAddress],
-    queryFn: () => getCollectionTraits({ collectionAddress }),
-  });
+  const { data } = useCollectionTraits({ address:collectionAddress })
 
   const handleTraitChange = async (name: string, value: string) => {
     const values = filters.traits[name] ?? [];

diff --git a/...rket/src/app/collection/[collectionAddress]/components/collection-items-filters-panel.tsx b/...rket/src/app/collection/[collectionAddress]/components/collection-items-filters-panel.tsx
@@ -1,13 +1,13 @@
 import { useState } from "react";
-import { useSuspenseQuery } from "@tanstack/react-query";
 
 import { SearchInput } from "@ark-market/ui/search-input";
 
 import type { Filters } from "~/types";
-import getCollectionTraits from "~/lib/getCollectionTraits";
 import CollectionItemsFiltersContent from "./collection-items-filters-content";
 import CollectionItemsFiltersTrait from "./collection-items-filters-trait";
 
+import useCollectionTraitsSuspense from "~/hooks/useCollectionTraitsSuspense";
+
 interface CollectionItemsFiltersPanelProps {
   collectionAddress: string;
   filters: Filters;
@@ -25,10 +25,7 @@ export default function CollectionItemsFiltersPanel({
   buyNow,
   setBuyNow,
 }: CollectionItemsFiltersPanelProps) {
-  const { data } = useSuspenseQuery({
-    queryKey: ["collectionTraits", collectionAddress],
-    queryFn: () => getCollectionTraits({ collectionAddress }),
-  });
+  const { data } = useCollectionTraitsSuspense({ collectionAddress })
   const [searchQuery, setSearchQuery] = useState("");
 
   const handleTraitChange = async (name: string, value: string) => {

diff --git a/...ket/src/app/token/[contractAddress]/[tokenId]/components/token-actions-create-listing.tsx b/...ket/src/app/token/[contractAddress]/[tokenId]/components/token-actions-create-listing.tsx
@@ -5,7 +5,6 @@ import { useEffect, useState } from "react";
 import { useCreateAuction, useCreateListing } from "@ark-project/react";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useAccount } from "@starknet-react/core";
-import { useQuery } from "@tanstack/react-query";
 import moment from "moment";
 import { useForm } from "react-hook-form";
 import { formatEther, parseEther } from "viem";
@@ -46,11 +45,12 @@ import { env } from "~/env";
 import usePrices from "~/hooks/usePrices";
 import useTokenMarketdata from "~/hooks/useTokenMarketData";
 import formatAmount from "~/lib/formatAmount";
-import getCollection from "~/lib/getCollection";
 import ToastExecutedTransactionContent from "./toast-executed-transaction-content";
 import ToastRejectedTransactionContent from "./toast-rejected-transaction-content";
 import TokenActionsTokenOverview from "./token-actions-token-overview";
 
+import useCollection from "~/hooks/useCollection";
+
 interface TokenActionsCreateListingProps {
   token: Token | WalletToken;
   small?: boolean;
@@ -69,14 +69,7 @@ export function TokenActionsCreateListing({
   });
   const [isOpen, setIsOpen] = useState(false);
   const [isAuction, setIsAuction] = useState(false);
-  const { data: collection } = useQuery({
-    queryKey: ["collection", token.collection_address],
-    queryFn: () =>
-      getCollection({
-        collectionAddress: token.collection_address,
-      }),
-    refetchInterval: 5_000,
-  });
+  const { data: collection } = useCollection({ address:token.collection_address })
   const { createListing, status } = useCreateListing();
   const { create: createAuction, status: auctionStatus } = useCreateAuction();
   const { toast } = useToast();

diff --git a/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-actions.tsx b/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-actions.tsx
@@ -1,17 +1,16 @@
 "use client";
 
 import { useAccount } from "@starknet-react/core";
-import { useQuery } from "@tanstack/react-query";
 
 import type { PropsWithClassName } from "@ark-market/ui";
 import { areAddressesEqual, cn } from "@ark-market/ui";
 
 import type { Token, TokenMarketData } from "~/types";
-import getTokenMarketData from "~/lib/getTokenMarketData";
 import TokenActionsButtons from "./token-actions-buttons";
 import TokenActionsEmpty from "./token-actions-empty";
 import TokenActionsHeader from "./token-actions-header";
 import TokenActionsPrice from "./token-actions-price";
+import useTokenMarketdata from "~/hooks/useTokenMarketData";
 
 interface TokenActionsProps {
   token: Token;
@@ -25,16 +24,7 @@ export default function TokenActions({
   className,
 }: TokenActionsProps) {
   const { address } = useAccount();
-  const { data } = useQuery({
-    queryKey: ["tokenMarketData", token.collection_address, token.token_id],
-    queryFn: () =>
-      getTokenMarketData({
-        contractAddress: token.collection_address,
-        tokenId: token.token_id,
-      }),
-    refetchInterval: 5_000,
-    initialData: tokenMarketData,
-  });
+  const { data } = useTokenMarketdata({ collectionAddress: token.collection_address, tokenId: token.token_id, initialData: tokenMarketData })
 
   const isOwner = areAddressesEqual(address, data?.owner);
 

diff --git a/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-activity.tsx b/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-activity.tsx
@@ -1,16 +1,14 @@
 "use client";
 
 import { useMemo, useRef } from "react";
-import { useInfiniteQuery } from "@tanstack/react-query";
 
 import type { PropsWithClassName } from "@ark-market/ui";
 import { cn } from "@ark-market/ui";
 
-import type { TokenActivityApiResponse } from "~/lib/getTokenActivity";
 import useInfiniteWindowScroll from "~/hooks/useInfiniteWindowScroll";
-import getTokenActivity from "~/lib/getTokenActivity";
 import DesktopTokenActivity from "./desktop-token-activity";
 import MobileTokenActivity from "./mobile-token-activity";
+import useTokenActivity from "~/hooks/useTokenActivity";
 
 interface TokenActivityProps {
   contractAddress: string;
@@ -28,16 +26,7 @@ export default function TokenActivity({
     fetchNextPage,
     hasNextPage,
     isFetchingNextPage,
-  } = useInfiniteQuery({
-    queryKey: ["tokenActivity", contractAddress, tokenId],
-    refetchInterval: 10_000,
-    // getNextPageParam: (lastPage) => lastPage.next_page,
-    getNextPageParam: (lastPage?: TokenActivityApiResponse) =>
-      lastPage?.next_page,
-    initialPageParam: undefined,
-    queryFn: ({ pageParam }) =>
-      getTokenActivity({ contractAddress, tokenId, page: pageParam }),
-  });
+  } = useTokenActivity({ contractAddress, tokenId })
 
   const totalCount = infiniteData?.pages[0]?.count ?? 0;
   const tokenActivity = useMemo(

diff --git a/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-offers.tsx b/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-offers.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { keepPreviousData, useInfiniteQuery } from "@tanstack/react-query";
 import { useMediaQuery } from "usehooks-ts";
 
 import type { PropsWithClassName } from "@ark-market/ui";
@@ -14,11 +13,10 @@ import {
 } from "@ark-market/ui/collapsible";
 import { ChevronDown, ChevronUp, NoOffer } from "@ark-market/ui/icons";
 
-import type { TokenOffersApiResponse } from "~/lib/getTokenOffers";
 import type { Token, TokenMarketData } from "~/types";
-import { getTokenOffers } from "~/lib/getTokenOffers";
 import TokenOfferList from "./token-offers-list";
 import TokenOffersTable from "./token-offers-table";
+import useTokenOffers from "~/hooks/useTokenOffers";
 
 interface TokenOffersProps {
   token: Token;
@@ -38,19 +36,9 @@ export default function TokenOffers({
     isFetching,
     hasNextPage,
     fetchNextPage,
-  } = useInfiniteQuery({
-    queryKey: ["tokenOffers", token.collection_address, token.token_id],
-    refetchInterval: 10_000,
-    getNextPageParam: (lastPage: TokenOffersApiResponse) => lastPage.next_page,
-    placeholderData: keepPreviousData,
-    initialPageParam: undefined,
-    queryFn: ({ pageParam }) =>
-      getTokenOffers({
-        contractAddress: token.collection_address,
-        tokenId: token.token_id,
-        page: pageParam,
-      }),
-  });
+  } = useTokenOffers({ token })
+
+
   const offersCount = infiniteData?.pages[0]?.count ?? 0;
   const tokenOffers = useMemo(
     () => infiniteData?.pages.flatMap((page) => page.data) ?? [],

diff --git a/apps/arkmarket/src/app/wallet/[walletAddress]/components/portfolio-activity-data.tsx b/apps/arkmarket/src/app/wallet/[walletAddress]/components/portfolio-activity-data.tsx
@@ -1,14 +1,12 @@
 "use client";
 
 import { useMemo } from "react";
-import { keepPreviousData, useInfiniteQuery } from "@tanstack/react-query";
 
-import type { PortfolioActivityApiResponse } from "~/lib/getPortfolioActivity";
 import type { ActivityType } from "~/types";
 import useInfiniteWindowScroll from "~/hooks/useInfiniteWindowScroll";
-import { getPortfolioActivity } from "~/lib/getPortfolioActivity";
 import DesktopPortfolioActivity from "./desktop-portfolio-activity";
 import MobilePortfolioActivity from "./mobile-portfolio-activity";
+import useWalletActivity from "~/hooks/useWalletActivity";
 
 interface PortfolioActivityDataProps {
   walletAddress: string;
@@ -24,20 +22,7 @@ export default function PortfolioActivityData({
     fetchNextPage,
     hasNextPage,
     isFetchingNextPage,
-  } = useInfiniteQuery({
-    queryKey: ["walletActivity", walletAddress, ...activityFilters],
-    refetchInterval: 10_000,
-    placeholderData: keepPreviousData,
-    getNextPageParam: (lastPage: PortfolioActivityApiResponse) =>
-      lastPage.next_page,
-    initialPageParam: undefined,
-    queryFn: ({ pageParam }) =>
-      getPortfolioActivity({
-        page: pageParam,
-        walletAddress,
-        activityFilters,
-      }),
-  });
+  } = useWalletActivity({ activityFilters, walletAddress })
 
   useInfiniteWindowScroll({
     fetchNextPage,