pl-fe: remove makeGetAccount

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>

packages/pl-fe/src/actions/compose.ts

@@ -7,7 +7,7 @@ import emojiSearch from 'pl-fe/features/emoji/search';
 import { Language } from 'pl-fe/features/preferences';
 import { queryClient } from 'pl-fe/queries/client';
 import { cancelDraftStatus } from 'pl-fe/queries/statuses/use-draft-statuses';
-import { selectAccount, selectOwnAccount, makeGetAccount } from 'pl-fe/selectors';
+import { selectAccount, selectOwnAccount } from 'pl-fe/selectors';
 import { tagHistory } from 'pl-fe/settings';
 import { useModalsStore } from 'pl-fe/stores/modals';
 import { useSettingsStore } from 'pl-fe/stores/settings';
@@ -107,8 +107,6 @@ const COMPOSE_HASHTAG_CASING_SUGGESTION_IGNORE = 'COMPOSE_HASHTAG_CASING_SUGGEST
 
 const COMPOSE_REDACTING_OVERWRITE_CHANGE = 'COMPOSE_REDACTING_OVERWRITE_CHANGE' as const;
 
-const getAccount = makeGetAccount();
-
 const messages = defineMessages({
   scheduleError: { id: 'compose.invalid_schedule', defaultMessage: 'You must schedule a post at least 5 minutes out.' },
   success: { id: 'compose.submit_success', defaultMessage: 'Your post was sent!' },
@@ -303,7 +301,7 @@ const handleComposeSubmit = (dispatch: AppDispatch, getState: () => RootState, c
 
   const state = getState();
 
-  const accountUrl = getAccount(state, state.me as string)!.url;
+  const accountUrl = selectOwnAccount(state)!.url;
   const draftId = getState().compose[composeId]!.draft_id;
 
   dispatch(submitComposeSuccess(composeId, data));

packages/pl-fe/src/actions/importer.ts

@@ -2,6 +2,7 @@ import { importEntities as importEntityStoreEntities } from 'pl-fe/entity-store/
 import { Entities } from 'pl-fe/entity-store/entities';
 import { normalizeGroup } from 'pl-fe/normalizers/group';
 import { queryClient } from 'pl-fe/queries/client';
+import { selectAccount } from 'pl-fe/selectors';
 
 import type { Account as BaseAccount, Group as BaseGroup, Poll as BasePoll, Relationship as BaseRelationship, Status as BaseStatus } from 'pl-api';
 import type { AppDispatch, RootState } from 'pl-fe/store';
@@ -70,7 +71,7 @@ const importEntities = (entities: {
   const statuses: Record<string, BaseStatus> = {};
 
   const processAccount = (account: BaseAccount, withSelf = true) => {
-    if (!override && state.entities[Entities.ACCOUNTS]?.store[account.id]) return;
+    if (!override && selectAccount(state, account.id)) return;
 
     if (withSelf) accounts[account.id] = account;
 

packages/pl-fe/src/actions/settings.ts

@@ -4,7 +4,7 @@ import { patchMe } from 'pl-fe/actions/me';
 import { getClient } from 'pl-fe/api';
 import { NODE_ENV } from 'pl-fe/build-config';
 import messages from 'pl-fe/messages';
-import { makeGetAccount } from 'pl-fe/selectors';
+import { selectOwnAccount } from 'pl-fe/selectors';
 import KVStore from 'pl-fe/storage/kv-store';
 import { useSettingsStore } from 'pl-fe/stores/settings';
 import toast from 'pl-fe/toast';
@@ -76,7 +76,7 @@ const updateSettingsStore = (settings: any) =>
         },
       }));
     } else {
-      const accountUrl = makeGetAccount()(state, state.me as string)!.url;
+      const accountUrl = selectOwnAccount(state)!.url;
 
       return updateAuthAccount(accountUrl, settings);
     }

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

@@ -51,7 +51,6 @@ const useAccount = (accountId?: string, opts: UseAccountOpts = {}) => {
 
   return {
     ...result,
-    isLoading: result.isLoading,
     isRelationshipLoading,
     isUnauthorized,
     isUnavailable,

packages/pl-fe/src/components/avatar-stack.tsx

@@ -23,7 +23,7 @@ const AvatarStack: React.FC<IAvatarStack> = ({ accountIds, limit = 3 }) => {
           style={{ zIndex: limit - i }}
         >
           <Avatar
-            className='ring-1 ring-white dark:ring-primary-900'
+            className='!rounded-full ring-1 ring-white dark:ring-primary-900'
             src={account.avatar}
             alt={account.avatar_description}
             size={20}

packages/pl-fe/src/components/ui/avatar.tsx

@@ -102,7 +102,7 @@ const Avatar = (props: IAvatar) => {
         style={style}
         className={clsx('relative rounded-lg bg-gray-200 leading-[0] dark:bg-gray-900', isCat && 'avatar__cat', className)}
       >
-        <div className='absolute inset-0 z-[1] flex items-center justify-center rounded-lg bg-gray-200 dark:bg-gray-900'>
+        <div className='absolute inset-0 z-[1] flex items-center justify-center rounded-[inherit] bg-gray-200 dark:bg-gray-900'>
           <Icon
             src={require('@phosphor-icons/core/regular/image-square.svg')}
             className='size-4 text-gray-500 dark:text-gray-700'
@@ -121,7 +121,7 @@ const Avatar = (props: IAvatar) => {
   return (
     <StillImage
       className={clsx('rounded-lg leading-[0]', isCat && 'avatar__cat bg-gray-200 dark:bg-gray-900', className)}
-      innerClassName='rounded-lg text-sm'
+      innerClassName='rounded-[inherit] text-sm'
       style={style}
       src={src}
       alt={altText}

packages/pl-fe/src/features/draft-statuses/builder.tsx

@@ -1,8 +1,8 @@
 import { statusSchema } from 'pl-api';
 import * as v from 'valibot';
 
-import { Entities } from 'pl-fe/entity-store/entities';
 import { normalizeStatus } from 'pl-fe/normalizers/status';
+import { selectOwnAccount } from 'pl-fe/selectors';
 
 import type { DraftStatus } from 'pl-fe/queries/statuses/use-draft-statuses';
 import type { RootState } from 'pl-fe/store';
@@ -20,8 +20,7 @@ const buildPoll = (draftStatus: DraftStatus) => {
 };
 
 const buildStatus = (state: RootState, draftStatus: DraftStatus) => {
-  const me = state.me as string;
-  const account = state.entities[Entities.ACCOUNTS]?.store[me];
+  const account = selectOwnAccount(state);
 
   const status = v.parse(statusSchema, {
     id: 'draft',

packages/pl-fe/src/features/scheduled-statuses/builder.tsx

@@ -1,14 +1,13 @@
 import { statusSchema, type ScheduledStatus } from 'pl-api';
 import * as v from 'valibot';
 
-import { Entities } from 'pl-fe/entity-store/entities';
 import { normalizeStatus } from 'pl-fe/normalizers/status';
+import { selectOwnAccount } from 'pl-fe/selectors';
 
 import type { RootState } from 'pl-fe/store';
 
 const buildStatus = (state: RootState, scheduledStatus: ScheduledStatus) => {
-  const me = state.me as string;
-  const account = state.entities[Entities.ACCOUNTS]?.store[me];
+  const account = selectOwnAccount(state);
 
   const poll = scheduledStatus.params.poll ? {
     id: `${scheduledStatus.id}-poll`,

packages/pl-fe/src/features/ui/components/profile-familiar-followers.tsx

@@ -2,20 +2,41 @@ import React from 'react';
 import { FormattedList, FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 
+import { useAccount } from 'pl-fe/api/hooks/accounts/use-account';
 import AvatarStack from 'pl-fe/components/avatar-stack';
 import HoverAccountWrapper from 'pl-fe/components/hover-account-wrapper';
 import HStack from 'pl-fe/components/ui/hstack';
 import Text from 'pl-fe/components/ui/text';
 import VerificationBadge from 'pl-fe/components/verification-badge';
 import Emojify from 'pl-fe/features/emoji/emojify';
-import { useAppSelector } from 'pl-fe/hooks/use-app-selector';
 import { useFamiliarFollowers } from 'pl-fe/queries/accounts/use-familiar-followers';
-import { makeGetAccount } from 'pl-fe/selectors';
 import { useModalsActions } from 'pl-fe/stores/modals';
 
 import type { Account } from 'pl-fe/normalizers/account';
 
-const getAccount = makeGetAccount();
+interface IFamiliarFollowerLink {
+  id: string;
+}
+
+const FamiliarFollowerLink: React.FC<IFamiliarFollowerLink> = ({ id }) => {
+  const { account } = useAccount(id);
+
+  if (!account) return null;
+
+  return (
+    <Link className='mention inline-block' to={`/@${account.acct}`} key={account.id}>
+      <HoverAccountWrapper accountId={account.id} element='span'>
+        <HStack space={1} alignItems='center' grow>
+          <Text size='sm' theme='primary' truncate>
+            <Emojify text={account.display_name} emojis={account.emojis} />
+          </Text>
+
+          {account.verified && <VerificationBadge />}
+        </HStack>
+      </HoverAccountWrapper>
+    </Link>
+  );
+};
 
 interface IProfileFamiliarFollowers {
   account: Account;
@@ -24,7 +45,7 @@ interface IProfileFamiliarFollowers {
 const ProfileFamiliarFollowers: React.FC<IProfileFamiliarFollowers> = ({ account }) => {
   const { openModal } = useModalsActions();
   const { data: familiarFollowerIds = [] } = useFamiliarFollowers(account.id);
-  const familiarFollowers = useAppSelector(state => familiarFollowerIds.slice(0, 2).map(accountId => getAccount(state, accountId)));
+  const displayedFamiliarFollowerIds = familiarFollowerIds.slice(0, 2);
 
   const openFamiliarFollowersModal = () => {
     openModal('FAMILIAR_FOLLOWERS', {
@@ -36,19 +57,9 @@ const ProfileFamiliarFollowers: React.FC<IProfileFamiliarFollowers> = ({ account
     return null;
   }
 
-  const accounts: Array<React.ReactNode> = familiarFollowers.map(account => !!account && (
-    <Link className='mention inline-block' to={`/@${account.acct}`}>
-      <HoverAccountWrapper accountId={account.id} key={account.id} element='span'>
-        <HStack space={1} alignItems='center' grow>
-          <Text size='sm' theme='primary' truncate>
-            <Emojify text={account.display_name} emojis={account.emojis} />
-          </Text>
-
-          {account.verified && <VerificationBadge />}
-        </HStack>
-      </HoverAccountWrapper>
-    </Link>
-  )).filter(Boolean);
+  const accounts: Array<React.ReactNode> = displayedFamiliarFollowerIds.map(accountId => (
+    <FamiliarFollowerLink id={accountId} key={accountId} />
+  ));
 
   if (familiarFollowerIds.length > 2) {
     accounts.push(
@@ -56,7 +67,7 @@ const ProfileFamiliarFollowers: React.FC<IProfileFamiliarFollowers> = ({ account
         <FormattedMessage
           id='account.familiar_followers.more'
           defaultMessage='{count, plural, one {# other} other {# others}} you follow'
-          values={{ count: familiarFollowerIds.length - familiarFollowers.length }}
+          values={{ count: familiarFollowerIds.length - displayedFamiliarFollowerIds.length }}
         />
       </span>,
     );

packages/pl-fe/src/features/ui/util/pending-status-builder.ts

@@ -3,13 +3,11 @@ import { statusSchema } from 'pl-api';
 import * as v from 'valibot';
 
 import { normalizeStatus } from 'pl-fe/normalizers/status';
-import { makeGetAccount } from 'pl-fe/selectors';
+import { selectOwnAccount } from 'pl-fe/selectors';
 
 import type { PendingStatus } from 'pl-fe/reducers/pending-statuses';
 import type { RootState } from 'pl-fe/store';
 
-const getAccount = makeGetAccount();
-
 const buildMentions = (pendingStatus: PendingStatus) => {
   if (pendingStatus.in_reply_to_id) {
     return (pendingStatus.to || []).map(acct => ({ acct }));
@@ -30,8 +28,7 @@ const buildPoll = (pendingStatus: PendingStatus) => {
 };
 
 const buildStatus = (state: RootState, pendingStatus: PendingStatus, idempotencyKey: string) => {
-  const me = state.me as string;
-  const account = getAccount(state, me);
+  const account = selectOwnAccount(state)!;
   const inReplyToId = pendingStatus.in_reply_to_id;
 
   const status = {

packages/pl-fe/src/hooks/use-own-account.ts

@@ -1,22 +1,12 @@
-import { useCallback } from 'react';
+import { useAccount } from 'pl-fe/api/hooks/accounts/use-account';
 
-import { makeGetAccount } from 'pl-fe/selectors';
-
-import { useAppSelector } from './use-app-selector';
+import { useLoggedIn } from './use-logged-in';
 
 /** Get the logged-in account from the store, if any. */
 const useOwnAccount = () => {
-  const getAccount = useCallback(makeGetAccount(), []);
+  const { me } = useLoggedIn();
 
-  const account = useAppSelector((state) => {
-    const { me } = state;
-
-    if (typeof me === 'string') {
-      return getAccount(state, me);
-    }
-  });
-
-  return { account: account || undefined };
+  return useAccount(typeof me === 'string' ? me : undefined);
 };
 
 export {

packages/pl-fe/src/modals/familiar-followers-modal.tsx

@@ -1,25 +1,22 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
+import { useAccount } from 'pl-fe/api/hooks/accounts/use-account';
 import ScrollableList from 'pl-fe/components/scrollable-list';
 import Modal from 'pl-fe/components/ui/modal';
 import Spinner from 'pl-fe/components/ui/spinner';
 import AccountContainer from 'pl-fe/containers/account-container';
 import Emojify from 'pl-fe/features/emoji/emojify';
-import { useAppSelector } from 'pl-fe/hooks/use-app-selector';
 import { useFamiliarFollowers } from 'pl-fe/queries/accounts/use-familiar-followers';
-import { makeGetAccount } from 'pl-fe/selectors';
 
 import type { BaseModalProps } from 'pl-fe/features/ui/components/modal-root';
 
-const getAccount = makeGetAccount();
-
 interface FamiliarFollowersModalProps {
   accountId: string;
 }
 
 const FamiliarFollowersModal: React.FC<BaseModalProps & FamiliarFollowersModalProps> = ({ accountId, onClose }) => {
-  const account = useAppSelector(state => getAccount(state, accountId));
+  const { account } = useAccount(accountId);
   const { data: familiarFollowerIds } = useFamiliarFollowers(accountId);
 
   const onClickClose = () => {

packages/pl-fe/src/selectors/index.ts

@@ -7,7 +7,7 @@ import { validId } from 'pl-fe/utils/auth';
 import ConfigDB from 'pl-fe/utils/config-db';
 import { shouldFilter } from 'pl-fe/utils/timelines';
 
-import type { Filter, FilterResult, NotificationGroup, Relationship } from 'pl-api';
+import type { Filter, FilterResult, NotificationGroup } from 'pl-api';
 import type { EntityStore } from 'pl-fe/entity-store/types';
 import type { Account } from 'pl-fe/normalizers/account';
 import type { Group } from 'pl-fe/normalizers/group';
@@ -30,25 +30,6 @@ const selectOwnAccount = (state: RootState) => {
   }
 };
 
-const getAccountBase = (state: RootState, accountId: string) => state.entities[Entities.ACCOUNTS]?.store[accountId] as Account | undefined;
-const getAccountRelationship = (state: RootState, accountId: string) => state.entities[Entities.RELATIONSHIPS]?.store[accountId] as Relationship | undefined;
-const getAccountMeta = (state: RootState, accountId: string) => state.accounts_meta[accountId];
-
-const makeGetAccount = () => createSelector([
-  getAccountBase,
-  getAccountRelationship,
-  getAccountMeta,
-], (account, relationship, meta) => {
-  if (!account) return null;
-  return {
-    ...account,
-    relationship,
-    __meta: { meta, ...account.__meta },
-    // @ts-ignore
-    is_admin: meta?.role ? (meta.role.permissions & 0x1) === 0x1 : account.is_admin,
-  };
-});
-
 const toServerSideType = (columnType: string): Filter['context'][0] => {
   switch (columnType) {
     case 'home':
@@ -309,7 +290,6 @@ export {
   selectAccount,
   selectAccounts,
   selectOwnAccount,
-  makeGetAccount,
   getFilters,
   regexFromFilters,
   makeGetStatus,