From 322e812f9eea24a4774cae2b26a189b91351ce9b Mon Sep 17 00:00:00 2001 From: mkljczk Date: Sat, 15 Mar 2025 20:39:58 +0100 Subject: [PATCH] pl-fe: migrate scrobbles to queryoptions Signed-off-by: mkljczk --- .../api/hooks/accounts/use-account-lookup.ts | 10 +------- .../src/components/account-hover-card.tsx | 5 ++-- .../components/panels/profile-info-panel.tsx | 5 ++-- .../src/queries/accounts/account-scrobble.ts | 13 +++++++++++ .../queries/accounts/use-account-scrobble.ts | 23 ------------------- 5 files changed, 20 insertions(+), 36 deletions(-) create mode 100644 packages/pl-fe/src/queries/accounts/account-scrobble.ts delete mode 100644 packages/pl-fe/src/queries/accounts/use-account-scrobble.ts diff --git a/packages/pl-fe/src/api/hooks/accounts/use-account-lookup.ts b/packages/pl-fe/src/api/hooks/accounts/use-account-lookup.ts index 6b6619d74..153187211 100644 --- a/packages/pl-fe/src/api/hooks/accounts/use-account-lookup.ts +++ b/packages/pl-fe/src/api/hooks/accounts/use-account-lookup.ts @@ -8,8 +8,6 @@ import { useFeatures } from 'pl-fe/hooks/use-features'; import { useLoggedIn } from 'pl-fe/hooks/use-logged-in'; import { type Account, normalizeAccount } from 'pl-fe/normalizers/account'; -import { useAccountScrobble } from '../../../queries/accounts/use-account-scrobble'; - import { useRelationship } from './use-relationship'; import type { Account as BaseAccount } from 'pl-api'; @@ -37,11 +35,6 @@ const useAccountLookup = (acct: string | undefined, opts: UseAccountLookupOpts = isLoading: isRelationshipLoading, } = useRelationship(account?.id, { enabled: withRelationship }); - const { - scrobble, - isLoading: isScrobbleLoading, - } = useAccountScrobble(account?.id); - const isBlocked = account?.relationship?.blocked_by === true; const isUnavailable = (me === account?.id) ? false : (isBlocked && !features.blockersVisible); @@ -55,10 +48,9 @@ const useAccountLookup = (acct: string | undefined, opts: UseAccountLookupOpts = ...result, isLoading: result.isLoading, isRelationshipLoading, - isScrobbleLoading, isUnauthorized, isUnavailable, - account: account ? { ...account, relationship, scrobble } : undefined, + account: account ? { ...account, relationship } : undefined, }; }; diff --git a/packages/pl-fe/src/components/account-hover-card.tsx b/packages/pl-fe/src/components/account-hover-card.tsx index a9c93f4fd..b1d9b29b9 100644 --- a/packages/pl-fe/src/components/account-hover-card.tsx +++ b/packages/pl-fe/src/components/account-hover-card.tsx @@ -1,4 +1,5 @@ import { autoUpdate, flip, shift, useFloating, useTransitionStyles } from '@floating-ui/react'; +import { useQuery } from '@tanstack/react-query'; import clsx from 'clsx'; import React, { useEffect } from 'react'; import { useIntl, FormattedMessage } from 'react-intl'; @@ -16,7 +17,7 @@ import ActionButton from 'pl-fe/features/ui/components/action-button'; import { UserPanel } from 'pl-fe/features/ui/util/async-components'; import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch'; import { useAppSelector } from 'pl-fe/hooks/use-app-selector'; -import { useAccountScrobble } from 'pl-fe/queries/accounts/use-account-scrobble'; +import { accountScrobbleQueryOptions } from 'pl-fe/queries/accounts/account-scrobble'; import { useAccountHoverCardStore } from 'pl-fe/stores/account-hover-card'; import { showAccountHoverCard } from './hover-account-wrapper'; @@ -54,7 +55,7 @@ const AccountHoverCard: React.FC = ({ visible = true }) => { const me = useAppSelector(state => state.me); const { account } = useAccount(accountId || undefined, { withRelationship: true }); - const { scrobble } = useAccountScrobble(accountId || undefined); + const { data: scrobble } = useQuery(accountScrobbleQueryOptions(account?.id)); const badges = getBadges(account); useEffect(() => { diff --git a/packages/pl-fe/src/features/ui/components/panels/profile-info-panel.tsx b/packages/pl-fe/src/features/ui/components/panels/profile-info-panel.tsx index e6147d24e..9d00858e6 100644 --- a/packages/pl-fe/src/features/ui/components/panels/profile-info-panel.tsx +++ b/packages/pl-fe/src/features/ui/components/panels/profile-info-panel.tsx @@ -1,3 +1,4 @@ +import { useQuery } from '@tanstack/react-query'; import React from 'react'; import { defineMessages, useIntl, FormattedMessage } from 'react-intl'; @@ -13,7 +14,7 @@ import Text from 'pl-fe/components/ui/text'; import Emojify from 'pl-fe/features/emoji/emojify'; import { useAppSelector } from 'pl-fe/hooks/use-app-selector'; import { usePlFeConfig } from 'pl-fe/hooks/use-pl-fe-config'; -import { useAccountScrobble } from 'pl-fe/queries/accounts/use-account-scrobble'; +import { accountScrobbleQueryOptions } from 'pl-fe/queries/accounts/account-scrobble'; import { capitalize } from 'pl-fe/utils/strings'; import ProfileFamiliarFollowers from '../profile-familiar-followers'; @@ -42,7 +43,7 @@ const ProfileInfoPanel: React.FC = ({ account, username }) => const me = useAppSelector(state => state.me); const ownAccount = account?.id === me; - const { scrobble } = useAccountScrobble(account?.id); + const { data: scrobble } = useQuery(accountScrobbleQueryOptions(account?.id)); const getStaffBadge = (): React.ReactNode => { if (account?.is_admin) { diff --git a/packages/pl-fe/src/queries/accounts/account-scrobble.ts b/packages/pl-fe/src/queries/accounts/account-scrobble.ts new file mode 100644 index 000000000..193b3f40d --- /dev/null +++ b/packages/pl-fe/src/queries/accounts/account-scrobble.ts @@ -0,0 +1,13 @@ +import { queryOptions } from '@tanstack/react-query'; + +import { getClient } from 'pl-fe/api'; + +const accountScrobbleQueryOptions = (accountId?: string) => queryOptions({ + queryKey: ['scrobbles', accountId!], + queryFn: async () => (await getClient().accounts.getScrobbles(accountId!, { limit: 1 })).items[0] || null, + placeholderData: undefined, + enabled: () => !!accountId && getClient().features.scrobbles, + staleTime: 3 * 60 * 1000, +}); + +export { accountScrobbleQueryOptions }; diff --git a/packages/pl-fe/src/queries/accounts/use-account-scrobble.ts b/packages/pl-fe/src/queries/accounts/use-account-scrobble.ts deleted file mode 100644 index 369d83a54..000000000 --- a/packages/pl-fe/src/queries/accounts/use-account-scrobble.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { useQuery } from '@tanstack/react-query'; - -import { useClient } from 'pl-fe/hooks/use-client'; -import { useFeatures } from 'pl-fe/hooks/use-features'; - -import type { Scrobble } from 'pl-api'; - -const useAccountScrobble = (accountId?: string) => { - const client = useClient(); - const features = useFeatures(); - - const { data: scrobble, ...result } = useQuery({ - queryKey: ['scrobbles', accountId!], - queryFn: async () => (await client.accounts.getScrobbles(accountId!, { limit: 1 })).items[0] || null, - placeholderData: undefined, - enabled: !!accountId && features.scrobbles, - staleTime: 3 * 60 * 1000, - }); - - return { scrobble, ...result }; -}; - -export { useAccountScrobble };