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…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user