Refactor: Replace all display name usage for new component (#36137)

app/javascript/mastodon/components/display_name/default.tsx

@@ -0,0 +1,36 @@
+import { useMemo } from 'react';
+import type { ComponentPropsWithoutRef, FC } from 'react';
+
+import { Skeleton } from '../skeleton';
+
+import type { DisplayNameProps } from './index';
+import { DisplayNameWithoutDomain } from './no-domain';
+
+export const DisplayNameDefault: FC<
+  Omit<DisplayNameProps, 'variant'> & ComponentPropsWithoutRef<'span'>
+> = ({ account, localDomain, className, ...props }) => {
+  const username = useMemo(() => {
+    if (!account) {
+      return null;
+    }
+    let acct = account.get('acct');
+
+    if (!acct.includes('@') && localDomain) {
+      acct = `${acct}@${localDomain}`;
+    }
+    return `@${acct}`;
+  }, [account, localDomain]);
+
+  return (
+    <DisplayNameWithoutDomain
+      account={account}
+      className={className}
+      {...props}
+    >
+      {' '}
+      <span className='display-name__account'>
+        {username ?? <Skeleton width='7ch' />}
+      </span>
+    </DisplayNameWithoutDomain>
+  );
+};

app/javascript/mastodon/components/display_name/display_name.stories.tsx

@@ -18,8 +18,6 @@ const meta = {
     username: 'mastodon@mastodon.social',
     name: 'Test User 🧪',
     loading: false,
-    simple: false,
-    noDomain: false,
     localDomain: 'mastodon.social',
   },
   tags: [],
@@ -50,13 +48,13 @@ export const Loading: Story = {
 
 export const NoDomain: Story = {
   args: {
-    noDomain: true,
+    variant: 'noDomain',
   },
 };
 
 export const Simple: Story = {
   args: {
-    simple: true,
+    variant: 'simple',
   },
 };
 
@@ -76,6 +74,6 @@ export const Linked: Story = {
           acct: username,
         })
       : undefined;
-    return <LinkedDisplayName {...args} account={account} />;
+    return <LinkedDisplayName {...args} displayProps={{ account }} />;
   },
 };

app/javascript/mastodon/components/display_name/index.tsx

@@ -1,110 +1,37 @@
 import type { ComponentPropsWithoutRef, FC } from 'react';
-import { useMemo } from 'react';
 
-import classNames from 'classnames';
 import type { LinkProps } from 'react-router-dom';
 import { Link } from 'react-router-dom';
 
-import { EmojiHTML } from '@/mastodon/features/emoji/emoji_html';
 import type { Account } from '@/mastodon/models/account';
-import { isModernEmojiEnabled } from '@/mastodon/utils/environment';
 
-import { Skeleton } from '../skeleton';
+import { DisplayNameDefault } from './default';
+import { DisplayNameWithoutDomain } from './no-domain';
+import { DisplayNameSimple } from './simple';
 
-interface Props {
+export interface DisplayNameProps {
   account?: Account;
   localDomain?: string;
-  simple?: boolean;
-  noDomain?: boolean;
+  variant?: 'default' | 'simple' | 'noDomain';
 }
 
-export const DisplayName: FC<Props & ComponentPropsWithoutRef<'span'>> = ({
-  account,
-  localDomain,
-  simple = false,
-  noDomain = false,
-  className,
-  ...props
-}) => {
-  const username = useMemo(() => {
-    if (!account || noDomain) {
-      return null;
-    }
-    let acct = account.get('acct');
-
-    if (!acct.includes('@') && localDomain) {
-      acct = `${acct}@${localDomain}`;
-    }
-    return `@${acct}`;
-  }, [account, localDomain, noDomain]);
-
-  if (!account) {
-    if (simple) {
-      return null;
-    }
-    return (
-      <span {...props} className={classNames('display-name', className)}>
-        <bdi>
-          <strong className='display-name__html'>
-            <Skeleton width='10ch' />
-          </strong>
-        </bdi>
-        {!noDomain && (
-          <span className='display-name__account'>
-            &nbsp;
-            <Skeleton width='7ch' />
-          </span>
-        )}
-      </span>
-    );
+export const DisplayName: FC<
+  DisplayNameProps & ComponentPropsWithoutRef<'span'>
+> = ({ variant = 'default', ...props }) => {
+  if (variant === 'simple') {
+    return <DisplayNameSimple {...props} />;
+  } else if (variant === 'noDomain') {
+    return <DisplayNameWithoutDomain {...props} />;
   }
-  const accountName = isModernEmojiEnabled()
-    ? account.get('display_name')
-    : account.get('display_name_html');
-  if (simple) {
-    return (
-      <bdi>
-        <EmojiHTML {...props} htmlString={accountName} shallow as='span' />
-      </bdi>
-    );
-  }
-
-  return (
-    <span {...props} className={classNames('display-name', className)}>
-      <bdi>
-        <EmojiHTML
-          className='display-name__html'
-          htmlString={accountName}
-          shallow
-          as='strong'
-        />
-      </bdi>
-      {username && (
-        <span className='display-name__account'>&nbsp;{username}</span>
-      )}
-    </span>
-  );
+  return <DisplayNameDefault {...props} />;
 };
 
 export const LinkedDisplayName: FC<
-  Props & { asProps?: ComponentPropsWithoutRef<'span'> } & Partial<LinkProps>
-> = ({
-  account,
-  asProps = {},
-  className,
-  localDomain,
-  simple,
-  noDomain,
-  ...linkProps
-}) => {
-  const displayProps = {
-    account,
-    className,
-    localDomain,
-    simple,
-    noDomain,
-    ...asProps,
-  };
+  Omit<LinkProps, 'to'> & {
+    displayProps: DisplayNameProps & ComponentPropsWithoutRef<'span'>;
+  }
+> = ({ displayProps, children, ...linkProps }) => {
+  const { account } = displayProps;
   if (!account) {
     return <DisplayName {...displayProps} />;
   }
@@ -113,9 +40,11 @@ export const LinkedDisplayName: FC<
     <Link
       to={`/@${account.acct}`}
       title={`@${account.acct}`}
+      data-id={account.id}
       data-hover-card-account={account.id}
       {...linkProps}
     >
+      {children}
       <DisplayName {...displayProps} />
     </Link>
   );

app/javascript/mastodon/components/display_name/no-domain.tsx

@@ -0,0 +1,39 @@
+import type { ComponentPropsWithoutRef, FC } from 'react';
+
+import classNames from 'classnames';
+
+import { EmojiHTML } from '@/mastodon/features/emoji/emoji_html';
+import { isModernEmojiEnabled } from '@/mastodon/utils/environment';
+
+import { Skeleton } from '../skeleton';
+
+import type { DisplayNameProps } from './index';
+
+export const DisplayNameWithoutDomain: FC<
+  Omit<DisplayNameProps, 'variant' | 'localDomain'> &
+    ComponentPropsWithoutRef<'span'>
+> = ({ account, className, children, ...props }) => {
+  return (
+    <span {...props} className={classNames('display-name', className)}>
+      <bdi>
+        {account ? (
+          <EmojiHTML
+            className='display-name__html'
+            htmlString={
+              isModernEmojiEnabled()
+                ? account.get('display_name')
+                : account.get('display_name_html')
+            }
+            shallow
+            as='strong'
+          />
+        ) : (
+          <strong className='display-name__html'>
+            <Skeleton width='10ch' />
+          </strong>
+        )}
+      </bdi>
+      {children}
+    </span>
+  );
+};

app/javascript/mastodon/components/display_name/simple.tsx

@@ -0,0 +1,23 @@
+import type { ComponentPropsWithoutRef, FC } from 'react';
+
+import { EmojiHTML } from '@/mastodon/features/emoji/emoji_html';
+import { isModernEmojiEnabled } from '@/mastodon/utils/environment';
+
+import type { DisplayNameProps } from './index';
+
+export const DisplayNameSimple: FC<
+  Omit<DisplayNameProps, 'variant' | 'localDomain'> &
+    ComponentPropsWithoutRef<'span'>
+> = ({ account, ...props }) => {
+  if (!account) {
+    return null;
+  }
+  const accountName = isModernEmojiEnabled()
+    ? account.get('display_name')
+    : account.get('display_name_html');
+  return (
+    <bdi>
+      <EmojiHTML {...props} htmlString={accountName} shallow as='span' />
+    </bdi>
+  );
+};