pl-fe: migrate scrobbles to queryoptions

Signed-off-by: mkljczk <git@mkljczk.pl>

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,
   };
 };
 

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<IAccountHoverCard> = ({ 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(() => {

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<IProfileInfoPanel> = ({ 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) {

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 };

packages/pl-fe/src/queries/accounts/use-account-scrobble.ts

@@ -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<Scrobble>({
-    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 };