Account: normalize favicon and domain, clean up account.tsx

app/soapbox/components/account.tsx

@@ -5,7 +5,7 @@ import HoverRefWrapper from 'soapbox/components/hover_ref_wrapper';
 import VerificationBadge from 'soapbox/components/verification_badge';
 import ActionButton from 'soapbox/features/ui/components/action_button';
 import { useAppSelector, useOnScreen } from 'soapbox/hooks';
-import { getAcct, getDomain } from 'soapbox/utils/accounts';
+import { getAcct } from 'soapbox/utils/accounts';
 import { displayFqn } from 'soapbox/utils/state';
 
 import RelativeTimestamp from './relative_timestamp';
@@ -91,7 +91,7 @@ const Account = ({
       );
     }
 
-    if (account.get('id') !== me && account.get('relationship', null) !== null) {
+    if (account.id !== me) {
       return <ActionButton account={account} />;
     }
 
@@ -118,8 +118,8 @@ const Account = ({
   if (hidden) {
     return (
       <>
-        {account.get('display_name')}
+        {account.display_name}
-        {account.get('username')}
+        {account.username}
       </>
     );
   }
@@ -128,34 +128,31 @@ const Account = ({
 
   const LinkEl: any = showProfileHoverCard ? Link : 'div';
 
-  const favicon = account.pleroma.get('favicon');
-  const domain = getDomain(account);
-
   return (
     <div data-testid='account' className='flex-shrink-0 group block w-full' ref={overflowRef}>
       <HStack alignItems={actionAlignment} justifyContent='between'>
         <HStack alignItems='center' space={3} grow>
           <ProfilePopper
             condition={showProfileHoverCard}
-            wrapper={(children) => <HoverRefWrapper accountId={account.get('id')} inline>{children}</HoverRefWrapper>}
+            wrapper={(children) => <HoverRefWrapper accountId={account.id} inline>{children}</HoverRefWrapper>}
           >
             <LinkEl
-              to={`/@${account.get('acct')}`}
+              to={`/@${account.acct}`}
-              title={account.get('acct')}
+              title={account.acct}
               onClick={(event: React.MouseEvent) => event.stopPropagation()}
             >
-              <Avatar src={account.get('avatar')} size={avatarSize} />
+              <Avatar src={account.avatar} size={avatarSize} />
             </LinkEl>
           </ProfilePopper>
 
           <div className='flex-grow'>
             <ProfilePopper
               condition={showProfileHoverCard}
-              wrapper={(children) => <HoverRefWrapper accountId={account.get('id')} inline>{children}</HoverRefWrapper>}
+              wrapper={(children) => <HoverRefWrapper accountId={account.id} inline>{children}</HoverRefWrapper>}
             >
               <LinkEl
-                to={`/@${account.get('acct')}`}
+                to={`/@${account.acct}`}
-                title={account.get('acct')}
+                title={account.acct}
                 onClick={(event: React.MouseEvent) => event.stopPropagation()}
               >
                 <div className='flex items-center space-x-1 flex-grow' style={style}>
@@ -163,10 +160,10 @@ const Account = ({
                     size='sm'
                     weight='semibold'
                     truncate
-                    dangerouslySetInnerHTML={{ __html: account.get('display_name_html') }}
+                    dangerouslySetInnerHTML={{ __html: account.display_name_html }}
                   />
 
-                  {account.get('verified') && <VerificationBadge />}
+                  {account.verified && <VerificationBadge />}
                 </div>
               </LinkEl>
             </ProfilePopper>
@@ -174,9 +171,9 @@ const Account = ({
             <HStack alignItems='center' space={1} style={style}>
               <Text theme='muted' size='sm' truncate>@{username}</Text>
 
-              {favicon && (
+              {account.favicon && (
-                <Link to={`/timeline/${domain}`} className='w-4 h-4 flex-none'>
+                <Link to={`/timeline/${account.domain}`} className='w-4 h-4 flex-none' onClick={e => e.stopPropagation()}>
-                  <img src={favicon} alt='' title={domain} className='w-full max-h-full' />
+                  <img src={account.favicon} alt='' title={account.domain} className='w-full max-h-full' />
                 </Link>
               )}
 

app/soapbox/normalizers/__tests__/account-test.js

@@ -177,4 +177,18 @@ describe('normalizeAccount()', () => {
     expect(result.staff).toBe(true);
     expect(result.moderator).toBe(false);
   });
+
+  it('normalizes Pleroma favicon', () => {
+    const account = require('soapbox/__fixtures__/pleroma-account.json');
+    const result = normalizeAccount(account);
+
+    expect(result.favicon).toEqual('https://gleasonator.com/favicon.png');
+  });
+
+  it('adds account domain', () => {
+    const account = require('soapbox/__fixtures__/pleroma-account.json');
+    const result = normalizeAccount(account);
+
+    expect(result.domain).toEqual('gleasonator.com');
+  });
 });

app/soapbox/normalizers/account.ts

@@ -28,6 +28,7 @@ export const AccountRecord = ImmutableRecord({
   created_at: new Date(),
   display_name: '',
   emojis: ImmutableList<Emoji>(),
+  favicon: '',
   fields: ImmutableList<Field>(),
   followers_count: 0,
   following_count: 0,
@@ -52,6 +53,7 @@ export const AccountRecord = ImmutableRecord({
   // Internal fields
   admin: false,
   display_name_html: '',
+  domain: '',
   moderator: false,
   note_emojified: '',
   note_plain: '',
@@ -224,6 +226,16 @@ const normalizeFqn = (account: ImmutableMap<string, any>) => {
   return account.set('fqn', fqn);
 };
 
+const normalizeFavicon = (account: ImmutableMap<string, any>) => {
+  const favicon = account.getIn(['pleroma', 'favicon']) || '';
+  return account.set('favicon', favicon);
+};
+
+const addDomain = (account: ImmutableMap<string, any>) => {
+  const domain = account.get('fqn', '').split('@')[1] || '';
+  return account.set('domain', domain);
+};
+
 const addStaffFields = (account: ImmutableMap<string, any>) => {
   const admin = account.getIn(['pleroma', 'is_admin']) === true;
   const moderator = account.getIn(['pleroma', 'is_moderator']) === true;
@@ -248,6 +260,8 @@ export const normalizeAccount = (account: Record<string, any>) => {
       normalizeBirthday(account);
       normalizeLocation(account);
       normalizeFqn(account);
+      normalizeFavicon(account);
+      addDomain(account);
       addStaffFields(account);
       fixUsername(account);
       fixDisplayName(account);