diff --git a/app/soapbox/features/ui/components/action-button.tsx b/app/soapbox/features/ui/components/action-button.tsx index e79c225672..51348ee1de 100644 --- a/app/soapbox/features/ui/components/action-button.tsx +++ b/app/soapbox/features/ui/components/action-button.tsx @@ -30,13 +30,21 @@ const messages = defineMessages({ unmute: { id: 'account.unmute', defaultMessage: 'Unmute @{name}' }, }); -interface iActionButton { +interface IActionButton { + /** Target account for the action. */ account: AccountEntity + /** Type of action to prioritize, eg on Blocks and Mutes pages. */ actionType?: 'muting' | 'blocking' + /** Displays shorter text on the "Awaiting approval" button. */ small?: boolean } -const ActionButton = ({ account, actionType, small }: iActionButton) => { +/** + * Circumstantial action button (usually "Follow") to display on accounts. + * May say "Unblock" or something else, depending on the relationship and + * `actionType` prop. + */ +const ActionButton: React.FC = ({ account, actionType, small }) => { const dispatch = useDispatch(); const features = useFeatures(); const intl = useIntl(); @@ -45,40 +53,41 @@ const ActionButton = ({ account, actionType, small }: iActionButton) => { const handleFollow = () => { if (account.getIn(['relationship', 'following']) || account.getIn(['relationship', 'requested'])) { - dispatch(unfollowAccount(account.get('id'))); + dispatch(unfollowAccount(account.id)); } else { - dispatch(followAccount(account.get('id'))); + dispatch(followAccount(account.id)); } }; const handleBlock = () => { if (account.getIn(['relationship', 'blocking'])) { - dispatch(unblockAccount(account.get('id'))); + dispatch(unblockAccount(account.id)); } else { - dispatch(blockAccount(account.get('id'))); + dispatch(blockAccount(account.id)); } }; const handleMute = () => { if (account.getIn(['relationship', 'muting'])) { - dispatch(unmuteAccount(account.get('id'))); + dispatch(unmuteAccount(account.id)); } else { - dispatch(muteAccount(account.get('id'))); + dispatch(muteAccount(account.id)); } }; const handleRemoteFollow = () => { dispatch(openModal('UNAUTHORIZED', { action: 'FOLLOW', - account: account.get('id'), - ap_id: account.get('url'), + account: account.id, + ap_id: account.url, })); }; + /** Handles actionType='muting' */ const mutingAction = () => { const isMuted = account.getIn(['relationship', 'muting']); const messageKey = isMuted ? messages.unmute : messages.mute; - const text = intl.formatMessage(messageKey, { name: account.get('username') }); + const text = intl.formatMessage(messageKey, { name: account.username }); return (