pl-fe: separate scrobble query from account query

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

packages/pl-fe/src/api/hooks/accounts/use-account-lookup.ts

@@ -16,7 +16,6 @@ import type { Account as BaseAccount } from 'pl-api';
 
 interface UseAccountLookupOpts {
   withRelationship?: boolean;
-  withScrobble?: boolean;
 }
 
 const useAccountLookup = (acct: string | undefined, opts: UseAccountLookupOpts = {}) => {
@@ -24,7 +23,7 @@ const useAccountLookup = (acct: string | undefined, opts: UseAccountLookupOpts =
   const features = useFeatures();
   const history = useHistory();
   const { me } = useLoggedIn();
-  const { withRelationship, withScrobble } = opts;
+  const { withRelationship } = opts;
 
   const { entity: account, isUnauthorized, ...result } = useEntityLookup<BaseAccount, Account>(
     Entities.ACCOUNTS,
@@ -41,7 +40,7 @@ const useAccountLookup = (acct: string | undefined, opts: UseAccountLookupOpts =
   const {
     scrobble,
     isLoading: isScrobbleLoading,
-  } = useAccountScrobble(account?.id, { enabled: withScrobble });
+  } = useAccountScrobble(account?.id);
 
   const isBlocked = account?.relationship?.blocked_by === true;
   const isUnavailable = (me === account?.id) ? false : (isBlocked && !features.blockersVisible);

packages/pl-fe/src/api/hooks/accounts/use-account.ts

@@ -9,15 +9,12 @@ 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';
 
 interface UseAccountOpts {
   withRelationship?: boolean;
-  withScrobble?: boolean;
 }
 
 const useAccount = (accountId?: string, opts: UseAccountOpts = {}) => {
@@ -25,7 +22,7 @@ const useAccount = (accountId?: string, opts: UseAccountOpts = {}) => {
   const history = useHistory();
   const features = useFeatures();
   const { me } = useLoggedIn();
-  const { withRelationship, withScrobble } = opts;
+  const { withRelationship } = opts;
 
   const { entity, isUnauthorized, ...result } = useEntity<BaseAccount, Account>(
     [Entities.ACCOUNTS, accountId!],
@@ -40,11 +37,6 @@ const useAccount = (accountId?: string, opts: UseAccountOpts = {}) => {
     isLoading: isRelationshipLoading,
   } = useRelationship(accountId, { enabled: withRelationship });
 
-  const {
-    scrobble,
-    isLoading: isScrobbleLoading,
-  } = useAccountScrobble(accountId, { enabled: withScrobble });
-
   const isBlocked = entity?.relationship?.blocked_by === true;
   const isUnavailable = (me === entity?.id) ? false : (isBlocked && !features.blockersVisible);
 
@@ -52,12 +44,11 @@ const useAccount = (accountId?: string, opts: UseAccountOpts = {}) => {
     () => entity ? {
       ...entity,
       relationship,
-      scrobble,
       __meta: { meta, ...entity.__meta },
       // @ts-ignore
       is_admin: meta?.role ? (meta.role.permissions & 0x1) === 0x1 : entity.is_admin,
     } : undefined,
-    [entity, relationship, scrobble],
+    [entity, relationship],
   );
 
   useEffect(() => {
@@ -70,7 +61,6 @@ const useAccount = (accountId?: string, opts: UseAccountOpts = {}) => {
     ...result,
     isLoading: result.isLoading,
     isRelationshipLoading,
-    isScrobbleLoading,
     isUnauthorized,
     isUnavailable,
     account,

packages/pl-fe/src/components/account-hover-card.tsx

@@ -16,6 +16,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 { useAccountHoverCardStore } from 'pl-fe/stores/account-hover-card';
 
 import { showAccountHoverCard } from './hover-account-wrapper';
@@ -52,7 +53,8 @@ const AccountHoverCard: React.FC<IAccountHoverCard> = ({ visible = true }) => {
   const { accountId, ref, updateAccountHoverCard, closeAccountHoverCard } = useAccountHoverCardStore();
 
   const me = useAppSelector(state => state.me);
-  const { account } = useAccount(accountId || undefined, { withRelationship: true, withScrobble: true });
+  const { account } = useAccount(accountId || undefined, { withRelationship: true });
+  const { scrobble } = useAccountScrobble(accountId || undefined);
   const badges = getBadges(account);
 
   useEffect(() => {
@@ -151,9 +153,7 @@ const AccountHoverCard: React.FC<IAccountHoverCard> = ({ visible = true }) => {
               </HStack>
             ) : null}
 
-            {!!account.scrobble && (
-              <Scrobble scrobble={account.scrobble} />
-            )}
+            {!!scrobble && <Scrobble scrobble={scrobble} />}
 
             {account.note.length > 0 && (
               <Text

packages/pl-fe/src/features/ui/components/panels/profile-info-panel.tsx

@@ -13,13 +13,13 @@ 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 { capitalize } from 'pl-fe/utils/strings';
 
 import ProfileFamiliarFollowers from '../profile-familiar-followers';
 import ProfileField from '../profile-field';
 import ProfileStats from '../profile-stats';
 
-import type { Scrobble as ScrobbleEntity } from 'pl-api';
 import type { Account } from 'pl-fe/normalizers/account';
 
 const messages = defineMessages({
@@ -30,7 +30,7 @@ const messages = defineMessages({
 });
 
 interface IProfileInfoPanel {
-  account?: Account & { scrobble?: ScrobbleEntity };
+  account?: Account;
   /** Username from URL params, in case the account isn't found. */
   username: string;
 }
@@ -42,6 +42,8 @@ const ProfileInfoPanel: React.FC<IProfileInfoPanel> = ({ account, username }) =>
   const me = useAppSelector(state => state.me);
   const ownAccount = account?.id === me;
 
+  const { scrobble } = useAccountScrobble(account?.id);
+
   const getStaffBadge = (): React.ReactNode => {
     if (account?.is_admin) {
       return <Badge slug='admin' title={<FormattedMessage id='account_moderation_modal.roles.admin' defaultMessage='Admin' />} key='staff' />;
@@ -203,7 +205,7 @@ const ProfileInfoPanel: React.FC<IProfileInfoPanel> = ({ account, username }) =>
           {renderBirthday()}
         </div>
 
-        {account.scrobble && <Scrobble scrobble={account.scrobble} />}
+        {scrobble && <Scrobble scrobble={scrobble} />}
 
         {ownAccount ? null : <ProfileFamiliarFollowers account={account} />}
       </Stack>

packages/pl-fe/src/layouts/profile-layout.tsx

@@ -35,7 +35,7 @@ const ProfileLayout: React.FC<IProfileLayout> = ({ params, children }) => {
   const history = useHistory();
   const username = params?.username || '';
 
-  const { account } = useAccountLookup(username, { withRelationship: true, withScrobble: true });
+  const { account } = useAccountLookup(username, { withRelationship: true });
 
   const me = useAppSelector(state => state.me);
   const features = useFeatures();

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

@@ -5,20 +5,15 @@ import { useFeatures } from 'pl-fe/hooks/use-features';
 
 import type { Scrobble } from 'pl-api';
 
-interface UseScrobblesOpts {
-  enabled?: boolean;
-}
-
-const useAccountScrobble = (accountId?: string, opts: UseScrobblesOpts = {}) => {
+const useAccountScrobble = (accountId?: string) => {
   const client = useClient();
   const features = useFeatures();
-  const { enabled = false } = opts;
 
   const { data: scrobble, ...result } = useQuery<Scrobble>({
     queryKey: ['scrobbles', accountId!],
     queryFn: async () => (await client.accounts.getScrobbles(accountId!, { limit: 1 })).items[0] || null,
     placeholderData: undefined,
-    enabled: enabled && !!accountId && features.scrobbles,
+    enabled: !!accountId && features.scrobbles,
     staleTime: 3 * 60 * 1000,
   });
 

packages/pl-hooks/lib/hooks/accounts/use-account.ts

@@ -16,7 +16,6 @@ interface Account extends NormalizedAccount {
 
 interface UseAccountOpts {
   withRelationship?: boolean;
-  withScrobble?: boolean;
   withMoveTarget?: boolean;
 }