From db6d38bbd01e3e3851fe0e39e71b38f3ce06ea31 Mon Sep 17 00:00:00 2001 From: Jorge Zerpa Date: Thu, 3 Oct 2024 11:21:52 -0400 Subject: [PATCH] [feat #163] extract react-query usage into custom hooks --- .../src/hooks/useCollectionActivity.tsx | 31 +++++++++++++ .../src/hooks/useCollectionTokens.tsx | 46 +++++++++++++++++++ .../src/hooks/useCollectionTraits.tsx | 19 ++++++++ .../src/hooks/useCollectionTraitsSuspense.tsx | 16 +++++++ .../src/hooks/useSearchCollection.tsx | 19 ++++++++ apps/arkmarket/src/hooks/useSystemStatus.tsx | 18 ++++++++ apps/arkmarket/src/hooks/useTokenActivity.tsx | 28 +++++++++++ apps/arkmarket/src/hooks/useTokenOffers.tsx | 31 +++++++++++++ .../arkmarket/src/hooks/useWalletActivity.tsx | 33 +++++++++++++ .../src/hooks/useWalletCollections.tsx | 33 +++++++++++++ apps/arkmarket/src/hooks/useWalletOffers.tsx | 36 +++++++++++++++ apps/arkmarket/src/hooks/useWalletTokens.tsx | 39 ++++++++++++++++ 12 files changed, 349 insertions(+) create mode 100644 apps/arkmarket/src/hooks/useCollectionActivity.tsx create mode 100644 apps/arkmarket/src/hooks/useCollectionTokens.tsx create mode 100644 apps/arkmarket/src/hooks/useCollectionTraits.tsx create mode 100644 apps/arkmarket/src/hooks/useCollectionTraitsSuspense.tsx create mode 100644 apps/arkmarket/src/hooks/useSearchCollection.tsx create mode 100644 apps/arkmarket/src/hooks/useSystemStatus.tsx create mode 100644 apps/arkmarket/src/hooks/useTokenActivity.tsx create mode 100644 apps/arkmarket/src/hooks/useTokenOffers.tsx create mode 100644 apps/arkmarket/src/hooks/useWalletActivity.tsx create mode 100644 apps/arkmarket/src/hooks/useWalletCollections.tsx create mode 100644 apps/arkmarket/src/hooks/useWalletOffers.tsx create mode 100644 apps/arkmarket/src/hooks/useWalletTokens.tsx diff --git a/apps/arkmarket/src/hooks/useCollectionActivity.tsx b/apps/arkmarket/src/hooks/useCollectionActivity.tsx new file mode 100644 index 00000000..64706de0 --- /dev/null +++ b/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; +} diff --git a/apps/arkmarket/src/hooks/useCollectionTokens.tsx b/apps/arkmarket/src/hooks/useCollectionTokens.tsx new file mode 100644 index 00000000..2f4f1e8e --- /dev/null +++ b/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; +} diff --git a/apps/arkmarket/src/hooks/useCollectionTraits.tsx b/apps/arkmarket/src/hooks/useCollectionTraits.tsx new file mode 100644 index 00000000..c04a85eb --- /dev/null +++ b/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; +} diff --git a/apps/arkmarket/src/hooks/useCollectionTraitsSuspense.tsx b/apps/arkmarket/src/hooks/useCollectionTraitsSuspense.tsx new file mode 100644 index 00000000..4c82e2cf --- /dev/null +++ b/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; +} diff --git a/apps/arkmarket/src/hooks/useSearchCollection.tsx b/apps/arkmarket/src/hooks/useSearchCollection.tsx new file mode 100644 index 00000000..a8090a7c --- /dev/null +++ b/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; +} diff --git a/apps/arkmarket/src/hooks/useSystemStatus.tsx b/apps/arkmarket/src/hooks/useSystemStatus.tsx new file mode 100644 index 00000000..8703cdd4 --- /dev/null +++ b/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; +} diff --git a/apps/arkmarket/src/hooks/useTokenActivity.tsx b/apps/arkmarket/src/hooks/useTokenActivity.tsx new file mode 100644 index 00000000..3c8622e4 --- /dev/null +++ b/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; +} diff --git a/apps/arkmarket/src/hooks/useTokenOffers.tsx b/apps/arkmarket/src/hooks/useTokenOffers.tsx new file mode 100644 index 00000000..6a759eff --- /dev/null +++ b/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; +} diff --git a/apps/arkmarket/src/hooks/useWalletActivity.tsx b/apps/arkmarket/src/hooks/useWalletActivity.tsx new file mode 100644 index 00000000..08d16326 --- /dev/null +++ b/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; +} diff --git a/apps/arkmarket/src/hooks/useWalletCollections.tsx b/apps/arkmarket/src/hooks/useWalletCollections.tsx new file mode 100644 index 00000000..f2f62c15 --- /dev/null +++ b/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; +} diff --git a/apps/arkmarket/src/hooks/useWalletOffers.tsx b/apps/arkmarket/src/hooks/useWalletOffers.tsx new file mode 100644 index 00000000..b528d70f --- /dev/null +++ b/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; +} diff --git a/apps/arkmarket/src/hooks/useWalletTokens.tsx b/apps/arkmarket/src/hooks/useWalletTokens.tsx new file mode 100644 index 00000000..2fde066e --- /dev/null +++ b/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; +}