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 (
+
+ );
+ };
+
+ const blockingAction = () => {
+ const isBlocked = account.getIn(['relationship', 'blocking']);
+ const messageKey = isBlocked ? messages.unblock : messages.block;
+ const text = intl.formatMessage(messageKey, { name: account.get('username') });
+
+ return (
+
+ );
+ };
+
const empty = <>>;
if (!me) {
@@ -99,6 +132,14 @@ const ActionButton = ({ account, small }: IAccount) => {
const isFollowing = account.getIn(['relationship', 'following']);
const blockedBy = account.getIn(['relationship', 'blocked_by']) as boolean;
+ if (actionType) {
+ if (actionType === 'muting') {
+ return mutingAction();
+ } else if (actionType === 'blocking') {
+ return blockingAction();
+ }
+ }
+
if (!account.get('relationship')) {
// Wait until the relationship is loaded
return empty;
@@ -139,16 +180,6 @@ const ActionButton = ({ account, small }: IAccount) => {
onClick={handleBlock}
/>
);
- } else if (account.getIn(['relationship', 'muting'])) {
- // Unmute
- return (
-
- );
}
} else {
// Edit profile