refactor: Remove duplicated AvatarGroup CSS and familiar followers cleanup (#34681)

app/javascript/mastodon/components/__tests__/avatar-test.jsx

@@ -1,11 +1,13 @@
-import { fromJS } from 'immutable';
 
 import renderer from 'react-test-renderer';
 
+import { accountDefaultValues, createAccountFromServerJSON } from '@/mastodon/models/account';
+
 import { Avatar } from '../avatar';
 
 describe('<Avatar />', () => {
-  const account = fromJS({
+  const account = createAccountFromServerJSON({
+    ...accountDefaultValues,
     username: 'alice',
     acct: 'alice',
     display_name: 'Alice',

app/javascript/mastodon/components/avatar.tsx

@@ -1,17 +1,21 @@
 import { useState, useCallback } from 'react';
 
 import classNames from 'classnames';
+import { Link } from 'react-router-dom';
 
 import { useHovering } from 'mastodon/hooks/useHovering';
 import { autoPlayGif } from 'mastodon/initial_state';
 import type { Account } from 'mastodon/models/account';
 
 interface Props {
-  account: Account | undefined; // FIXME: remove `undefined` once we know for sure its always there
-  size: number;
+  account:
+    | Pick<Account, 'id' | 'acct' | 'avatar' | 'avatar_static'>
+    | undefined; // FIXME: remove `undefined` once we know for sure its always there
+  size?: number;
   style?: React.CSSProperties;
   inline?: boolean;
   animate?: boolean;
+  withLink?: boolean;
   counter?: number | string;
   counterBorderColor?: string;
 }
@@ -21,6 +25,7 @@ export const Avatar: React.FC<Props> = ({
   animate = autoPlayGif,
   size = 20,
   inline = false,
+  withLink = false,
   style: styleFromParent,
   counter,
   counterBorderColor,
@@ -35,10 +40,7 @@ export const Avatar: React.FC<Props> = ({
     height: `${size}px`,
   };
 
-  const src =
-    hovering || animate
-      ? account?.get('avatar')
-      : account?.get('avatar_static');
+  const src = hovering || animate ? account?.avatar : account?.avatar_static;
 
   const handleLoad = useCallback(() => {
     setLoading(false);
@@ -48,7 +50,7 @@ export const Avatar: React.FC<Props> = ({
     setError(true);
   }, [setError]);
 
-  return (
+  const avatar = (
     <div
       className={classNames('account__avatar', {
         'account__avatar--inline': inline,
@@ -72,4 +74,18 @@ export const Avatar: React.FC<Props> = ({
       )}
     </div>
   );
+
+  if (withLink) {
+    return (
+      <Link
+        to={`/@${account?.acct}`}
+        title={`@${account?.acct}`}
+        data-hover-card-account={account?.id}
+      >
+        {avatar}
+      </Link>
+    );
+  }
+
+  return avatar;
 };

app/javascript/mastodon/components/avatar_group.tsx

@@ -1,34 +1,17 @@
 import classNames from 'classnames';
-import { Link } from 'react-router-dom';
 
-import { Avatar } from 'mastodon/components/avatar';
-import { useAppSelector } from 'mastodon/store';
-
-const AvatarWrapper: React.FC<{ accountId: string }> = ({ accountId }) => {
-  const account = useAppSelector((state) => state.accounts.get(accountId));
-
-  if (!account) return null;
-
-  return (
-    <Link
-      to={`/@${account.acct}`}
-      title={`@${account.acct}`}
-      data-hover-card-account={account.id}
-    >
-      <Avatar account={account} size={28} />
-    </Link>
-  );
-};
+/**
+ * Wrapper for displaying a number of Avatar components horizontally,
+ * either spaced out (default) or overlapping (using the `compact` prop).
+ */
 
 export const AvatarGroup: React.FC<{
-  accountIds: string[];
   compact?: boolean;
-}> = ({ accountIds, compact = false }) => (
+  children: React.ReactNode;
+}> = ({ children, compact = false }) => (
   <div
     className={classNames('avatar-group', { 'avatar-group--compact': compact })}
   >
-    {accountIds.map((accountId) => (
-      <AvatarWrapper key={accountId} accountId={accountId} />
-    ))}
+    {children}
   </div>
 );