Fix missing confirmation when unfollowing from hover card in web UI (#30879)
This commit is contained in:
		
							parent
							
								
									b728c0e8ce
								
							
						
					
					
						commit
						d3f504245c
					
				| 
						 | 
				
			
			@ -1,6 +1,6 @@
 | 
			
		|||
import { useCallback, useEffect } from 'react';
 | 
			
		||||
 | 
			
		||||
import { useIntl, defineMessages } from 'react-intl';
 | 
			
		||||
import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
 | 
			
		||||
 | 
			
		||||
import { useIdentity } from '@/mastodon/identity_context';
 | 
			
		||||
import {
 | 
			
		||||
| 
						 | 
				
			
			@ -19,10 +19,6 @@ const messages = defineMessages({
 | 
			
		|||
  follow: { id: 'account.follow', defaultMessage: 'Follow' },
 | 
			
		||||
  followBack: { id: 'account.follow_back', defaultMessage: 'Follow back' },
 | 
			
		||||
  mutual: { id: 'account.mutual', defaultMessage: 'Mutual' },
 | 
			
		||||
  cancel_follow_request: {
 | 
			
		||||
    id: 'account.cancel_follow_request',
 | 
			
		||||
    defaultMessage: 'Withdraw follow request',
 | 
			
		||||
  },
 | 
			
		||||
  edit_profile: { id: 'account.edit_profile', defaultMessage: 'Edit profile' },
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			@ -65,11 +61,28 @@ export const FollowButton: React.FC<{
 | 
			
		|||
    if (accountId === me) {
 | 
			
		||||
      return;
 | 
			
		||||
    } else if (relationship.following || relationship.requested) {
 | 
			
		||||
      dispatch(unfollowAccount(accountId));
 | 
			
		||||
      dispatch(
 | 
			
		||||
        openModal({
 | 
			
		||||
          modalType: 'CONFIRM',
 | 
			
		||||
          modalProps: {
 | 
			
		||||
            message: (
 | 
			
		||||
              <FormattedMessage
 | 
			
		||||
                id='confirmations.unfollow.message'
 | 
			
		||||
                defaultMessage='Are you sure you want to unfollow {name}?'
 | 
			
		||||
                values={{ name: <strong>@{account?.acct}</strong> }}
 | 
			
		||||
              />
 | 
			
		||||
            ),
 | 
			
		||||
            confirm: intl.formatMessage(messages.unfollow),
 | 
			
		||||
            onConfirm: () => {
 | 
			
		||||
              dispatch(unfollowAccount(accountId));
 | 
			
		||||
            },
 | 
			
		||||
          },
 | 
			
		||||
        }),
 | 
			
		||||
      );
 | 
			
		||||
    } else {
 | 
			
		||||
      dispatch(followAccount(accountId));
 | 
			
		||||
    }
 | 
			
		||||
  }, [dispatch, accountId, relationship, account, signedIn]);
 | 
			
		||||
  }, [dispatch, intl, accountId, relationship, account, signedIn]);
 | 
			
		||||
 | 
			
		||||
  let label;
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			@ -79,13 +92,11 @@ export const FollowButton: React.FC<{
 | 
			
		|||
    label = intl.formatMessage(messages.edit_profile);
 | 
			
		||||
  } else if (!relationship) {
 | 
			
		||||
    label = <LoadingIndicator />;
 | 
			
		||||
  } else if (relationship.requested) {
 | 
			
		||||
    label = intl.formatMessage(messages.cancel_follow_request);
 | 
			
		||||
  } else if (relationship.following && relationship.followed_by) {
 | 
			
		||||
    label = intl.formatMessage(messages.mutual);
 | 
			
		||||
  } else if (!relationship.following && relationship.followed_by) {
 | 
			
		||||
    label = intl.formatMessage(messages.followBack);
 | 
			
		||||
  } else if (relationship.following) {
 | 
			
		||||
  } else if (relationship.following || relationship.requested) {
 | 
			
		||||
    label = intl.formatMessage(messages.unfollow);
 | 
			
		||||
  } else {
 | 
			
		||||
    label = intl.formatMessage(messages.follow);
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -94,7 +94,7 @@ const messageForFollowButton = relationship => {
 | 
			
		|||
    return messages.mutual;
 | 
			
		||||
  } else if (!relationship.get('following') && relationship.get('followed_by')) {
 | 
			
		||||
    return messages.followBack;
 | 
			
		||||
  } else if (relationship.get('following')) {
 | 
			
		||||
  } else if (relationship.get('following') || relationship.get('requested')) {
 | 
			
		||||
    return messages.unfollow;
 | 
			
		||||
  } else {
 | 
			
		||||
    return messages.follow;
 | 
			
		||||
| 
						 | 
				
			
			@ -291,10 +291,8 @@ class Header extends ImmutablePureComponent {
 | 
			
		|||
    if (me !== account.get('id')) {
 | 
			
		||||
      if (signedIn && !account.get('relationship')) { // Wait until the relationship is loaded
 | 
			
		||||
        actionBtn = <Button disabled><LoadingIndicator /></Button>;
 | 
			
		||||
      } else if (account.getIn(['relationship', 'requested'])) {
 | 
			
		||||
        actionBtn = <Button text={intl.formatMessage(messages.cancel_follow_request)} title={intl.formatMessage(messages.requested)} onClick={this.props.onFollow} />;
 | 
			
		||||
      } else if (!account.getIn(['relationship', 'blocking'])) {
 | 
			
		||||
        actionBtn = <Button disabled={account.getIn(['relationship', 'blocked_by'])} className={classNames({ 'button--destructive': account.getIn(['relationship', 'following']) })} text={intl.formatMessage(messageForFollowButton(account.get('relationship')))} onClick={signedIn ? this.props.onFollow : this.props.onInteractionModal} />;
 | 
			
		||||
        actionBtn = <Button disabled={account.getIn(['relationship', 'blocked_by'])} className={classNames({ 'button--destructive': (account.getIn(['relationship', 'following']) || account.getIn(['relationship', 'requested'])) })} text={intl.formatMessage(messageForFollowButton(account.get('relationship')))} onClick={signedIn ? this.props.onFollow : this.props.onInteractionModal} />;
 | 
			
		||||
      } else if (account.getIn(['relationship', 'blocking'])) {
 | 
			
		||||
        actionBtn = <Button text={intl.formatMessage(messages.unblock, { name: account.get('username') })} onClick={this.props.onBlock} />;
 | 
			
		||||
      }
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -25,7 +25,6 @@ import { makeGetAccount, getAccountHidden } from '../../../selectors';
 | 
			
		|||
import Header from '../components/header';
 | 
			
		||||
 | 
			
		||||
const messages = defineMessages({
 | 
			
		||||
  cancelFollowRequestConfirm: { id: 'confirmations.cancel_follow_request.confirm', defaultMessage: 'Withdraw request' },
 | 
			
		||||
  unfollowConfirm: { id: 'confirmations.unfollow.confirm', defaultMessage: 'Unfollow' },
 | 
			
		||||
  blockDomainConfirm: { id: 'confirmations.domain_block.confirm', defaultMessage: 'Block entire domain' },
 | 
			
		||||
});
 | 
			
		||||
| 
						 | 
				
			
			@ -45,7 +44,7 @@ const makeMapStateToProps = () => {
 | 
			
		|||
const mapDispatchToProps = (dispatch, { intl }) => ({
 | 
			
		||||
 | 
			
		||||
  onFollow (account) {
 | 
			
		||||
    if (account.getIn(['relationship', 'following'])) {
 | 
			
		||||
    if (account.getIn(['relationship', 'following']) || account.getIn(['relationship', 'requested'])) {
 | 
			
		||||
      dispatch(openModal({
 | 
			
		||||
        modalType: 'CONFIRM',
 | 
			
		||||
        modalProps: {
 | 
			
		||||
| 
						 | 
				
			
			@ -54,15 +53,6 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
 | 
			
		|||
          onConfirm: () => dispatch(unfollowAccount(account.get('id'))),
 | 
			
		||||
        },
 | 
			
		||||
      }));
 | 
			
		||||
    } else if (account.getIn(['relationship', 'requested'])) {
 | 
			
		||||
      dispatch(openModal({
 | 
			
		||||
        modalType: 'CONFIRM',
 | 
			
		||||
        modalProps: {
 | 
			
		||||
          message: <FormattedMessage id='confirmations.cancel_follow_request.message' defaultMessage='Are you sure you want to withdraw your request to follow {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />,
 | 
			
		||||
          confirm: intl.formatMessage(messages.cancelFollowRequestConfirm),
 | 
			
		||||
          onConfirm: () => dispatch(unfollowAccount(account.get('id'))),
 | 
			
		||||
        },
 | 
			
		||||
      }));
 | 
			
		||||
    } else {
 | 
			
		||||
      dispatch(followAccount(account.get('id')));
 | 
			
		||||
    }
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
		Reference in New Issue