Add unfollow modal (optional) (#4246)

* Add unfollow modal

* unfollowing someone

* remove unnecessary prop

1 files changed, 21 insertions, 3 deletions

diff --git a/app/javascript/mastodon/containers/account_container.js b/app/javascript/mastodon/containers/account_container.js
index 1426bcaa4..ca1efd0e5 100644
--- a/app/javascript/mastodon/containers/account_container.js
+++ b/app/javascript/mastodon/containers/account_container.js
@@ -1,4 +1,6 @@
+import React from 'react';
 import { connect } from 'react-redux';
+import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import { makeGetAccount } from '../selectors';
 import Account from '../components/account';
 import {
@@ -9,6 +11,11 @@ import {
   muteAccount,
   unmuteAccount,
 } from '../actions/accounts';
+import { openModal } from '../actions/modal';
+
+const messages = defineMessages({
+  unfollowConfirm: { id: 'confirmations.unfollow.confirm', defaultMessage: 'Unfollow' },
+});
 
 const makeMapStateToProps = () => {
   const getAccount = makeGetAccount();
@@ -16,15 +23,25 @@ const makeMapStateToProps = () => {
   const mapStateToProps = (state, props) => ({
     account: getAccount(state, props.id),
     me: state.getIn(['meta', 'me']),
+    unfollowModal: state.getIn(['meta', 'unfollow_modal']),
   });
 
   return mapStateToProps;
 };
 
-const mapDispatchToProps = (dispatch) => ({
+const mapDispatchToProps = (dispatch, { intl }) => ({
+
   onFollow (account) {
     if (account.getIn(['relationship', 'following'])) {
-      dispatch(unfollowAccount(account.get('id')));
+      if (this.unfollowModal) {
+        dispatch(openModal('CONFIRM', {
+          message: <FormattedMessage id='confirmations.unfollow.message' defaultMessage='Are you sure you want to unfollow {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />,
+          confirm: intl.formatMessage(messages.unfollowConfirm),
+          onConfirm: () => dispatch(unfollowAccount(account.get('id'))),
+        }));
+      } else {
+        dispatch(unfollowAccount(account.get('id')));
+      }
     } else {
       dispatch(followAccount(account.get('id')));
     }
@@ -45,6 +62,7 @@ const mapDispatchToProps = (dispatch) => ({
       dispatch(muteAccount(account.get('id')));
     }
   },
+
 });
 
-export default connect(makeMapStateToProps, mapDispatchToProps)(Account);
+export default injectIntl(connect(makeMapStateToProps, mapDispatchToProps)(Account));