diff --git a/app/soapbox/components/avatar-stack.tsx b/app/soapbox/components/avatar-stack.tsx new file mode 100644 index 0000000000..b7dbb050d8 --- /dev/null +++ b/app/soapbox/components/avatar-stack.tsx @@ -0,0 +1,40 @@ +import clsx from 'clsx'; +import { List as ImmutableList, OrderedSet as ImmutableOrderedSet } from 'immutable'; +import React from 'react'; + +import { Avatar, HStack } from 'soapbox/components/ui'; +import { useAppSelector } from 'soapbox/hooks'; +import { makeGetAccount } from 'soapbox/selectors'; + +import type { Account } from 'soapbox/types/entities'; + +const getAccount = makeGetAccount(); + +interface IAvatarStack { + accountIds: ImmutableOrderedSet + limit?: number +} + +const AvatarStack: React.FC = ({ accountIds, limit = 3 }) => { + const accounts = useAppSelector(state => ImmutableList(accountIds.slice(0, limit).map(accountId => getAccount(state, accountId)).filter(account => account))) as ImmutableList; + + return ( + + {accounts.map((account, i) => ( +
+ +
+ ))} +
+ ); +}; + +export default AvatarStack; diff --git a/app/soapbox/features/ui/components/profile-familiar-followers.tsx b/app/soapbox/features/ui/components/profile-familiar-followers.tsx index 61beea123d..56023f42a5 100644 --- a/app/soapbox/features/ui/components/profile-familiar-followers.tsx +++ b/app/soapbox/features/ui/components/profile-familiar-followers.tsx @@ -5,8 +5,9 @@ import { Link } from 'react-router-dom'; import { fetchAccountFamiliarFollowers } from 'soapbox/actions/familiar-followers'; import { openModal } from 'soapbox/actions/modals'; +import AvatarStack from 'soapbox/components/avatar-stack'; import HoverRefWrapper from 'soapbox/components/hover-ref-wrapper'; -import { Text } from 'soapbox/components/ui'; +import { HStack, Text } from 'soapbox/components/ui'; import VerificationBadge from 'soapbox/components/verification-badge'; import { useAppDispatch, useAppSelector, useFeatures } from 'soapbox/hooks'; import { makeGetAccount } from 'soapbox/selectors'; @@ -30,7 +31,7 @@ const ProfileFamiliarFollowers: React.FC = ({ account if (me && features.familiarFollowers) { dispatch(fetchAccountFamiliarFollowers(account.id)); } - }, []); + }, [account.id]); const openFamiliarFollowersModal = () => { dispatch(openModal('FAMILIAR_FOLLOWERS', { @@ -44,10 +45,18 @@ const ProfileFamiliarFollowers: React.FC = ({ account const accounts: Array = familiarFollowers.map(account => !!account && ( - - + + + + {/* */} - {account.verified && } + {account.verified && } + )).toArray(); @@ -65,15 +74,18 @@ const ProfileFamiliarFollowers: React.FC = ({ account } return ( - - , - }} - /> - + + + + , + }} + /> + + ); };