diff --git a/app/soapbox/components/account.tsx b/app/soapbox/components/account.tsx index 8c626b3e7..f47d66bfe 100644 --- a/app/soapbox/components/account.tsx +++ b/app/soapbox/components/account.tsx @@ -46,6 +46,8 @@ interface IAccount { actionAlignment?: 'center' | 'top', actionIcon?: string, actionTitle?: string, + /** Override other actions for specificity like mute/unmute. */ + actionType?: 'muting' | 'blocking', avatarSize?: number, hidden?: boolean, hideActions?: boolean, @@ -60,6 +62,7 @@ interface IAccount { const Account = ({ account, + actionType, action, actionIcon, actionTitle, @@ -111,7 +114,7 @@ const Account = ({ } if (account.id !== me) { - return ; + return ; } return null; diff --git a/app/soapbox/features/blocks/index.tsx b/app/soapbox/features/blocks/index.tsx index 90e41bf65..8b56fc262 100644 --- a/app/soapbox/features/blocks/index.tsx +++ b/app/soapbox/features/blocks/index.tsx @@ -48,7 +48,7 @@ const Blocks: React.FC = () => { itemClassName='pb-4' > {accountIds.map((id: string) => - , + , )} diff --git a/app/soapbox/features/mutes/index.tsx b/app/soapbox/features/mutes/index.tsx index 06bf89e21..adaa390e9 100644 --- a/app/soapbox/features/mutes/index.tsx +++ b/app/soapbox/features/mutes/index.tsx @@ -48,7 +48,7 @@ const Mutes: React.FC = () => { itemClassName='pb-4' > {accountIds.map((id: string) => - , + , )} diff --git a/app/soapbox/features/ui/components/action-button.tsx b/app/soapbox/features/ui/components/action-button.tsx index c86283d9f..e79c22567 100644 --- a/app/soapbox/features/ui/components/action-button.tsx +++ b/app/soapbox/features/ui/components/action-button.tsx @@ -17,23 +17,26 @@ import { useAppSelector, useFeatures } from 'soapbox/hooks'; import type { Account as AccountEntity } from 'soapbox/types/entities'; const messages = defineMessages({ - unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' }, + block: { id: 'account.block', defaultMessage: 'Block @{name}' }, + blocked: { id: 'account.blocked', defaultMessage: 'Blocked' }, + edit_profile: { id: 'account.edit_profile', defaultMessage: 'Edit profile' }, follow: { id: 'account.follow', defaultMessage: 'Follow' }, + mute: { id: 'account.mute', defaultMessage: 'Mute @{name}' }, remote_follow: { id: 'account.remote_follow', defaultMessage: 'Remote follow' }, requested: { id: 'account.requested', defaultMessage: 'Awaiting approval. Click to cancel follow request' }, requested_small: { id: 'account.requested_small', defaultMessage: 'Awaiting approval' }, unblock: { id: 'account.unblock', defaultMessage: 'Unblock @{name}' }, + unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' }, unmute: { id: 'account.unmute', defaultMessage: 'Unmute @{name}' }, - edit_profile: { id: 'account.edit_profile', defaultMessage: 'Edit profile' }, - blocked: { id: 'account.blocked', defaultMessage: 'Blocked' }, }); -interface IAccount { +interface iActionButton { account: AccountEntity + actionType?: 'muting' | 'blocking' small?: boolean } -const ActionButton = ({ account, small }: IAccount) => { +const ActionButton = ({ account, actionType, small }: iActionButton) => { const dispatch = useDispatch(); const features = useFeatures(); const intl = useIntl(); @@ -72,6 +75,36 @@ const ActionButton = ({ account, small }: IAccount) => { })); }; + const mutingAction = () => { + const isMuted = account.getIn(['relationship', 'muting']); + const messageKey = isMuted ? messages.unmute : messages.mute; + const text = intl.formatMessage(messageKey, { name: account.get('username') }); + + return ( +