Blocking will prevent e-mail notifications from blocked user, blocks in UI

2 files changed, 41 insertions, 9 deletions

diff --git a/app/assets/javascripts/components/features/account/components/action_bar.jsx b/app/assets/javascripts/components/features/account/components/action_bar.jsx
index 309471dd2..aadf168b2 100644
--- a/app/assets/javascripts/components/features/account/components/action_bar.jsx
+++ b/app/assets/javascripts/components/features/account/components/action_bar.jsx
@@ -7,7 +7,8 @@ const ActionBar = React.createClass({
   propTypes: {
     account: ImmutablePropTypes.map.isRequired,
     me: React.PropTypes.number.isRequired,
-    onFollow: React.PropTypes.func.isRequired
+    onFollow: React.PropTypes.func.isRequired,
+    onBlock: React.PropTypes.func.isRequired
   },
 
   mixins: [PureRenderMixin],
@@ -16,25 +17,46 @@ const ActionBar = React.createClass({
     const { account, me } = this.props;
 
     let infoText     = '';
+    let follow       = '';
     let buttonText   = '';
+    let block        = '';
+    let disabled     = false;
 
     if (account.get('id') === me) {
       buttonText = 'This is you!';
+      disabled   = true;
     } else {
-      if (account.getIn(['relationship', 'following'])) {
-        buttonText = 'Unfollow';
+      let blockText = '';
+
+      if (account.getIn(['relationship', 'blocking'])) {
+        buttonText = 'Blocked';
+        disabled   = true;
+        blockText  = 'Unblock';
       } else {
-        buttonText = 'Follow';
-      }
+        if (account.getIn(['relationship', 'following'])) {
+          buttonText = 'Unfollow';
+        } else {
+          buttonText = 'Follow';
+        }
+
+        if (account.getIn(['relationship', 'followed_by'])) {
+          infoText = 'Follows you!';
+        }
 
-      if (account.getIn(['relationship', 'followed_by'])) {
-        infoText = 'Follows you!';
+        blockText = 'Block';
       }
+
+      block = <Button text={blockText} onClick={this.props.onBlock} />;
+    }
+
+    if (!account.getIn(['relationship', 'blocking'])) {
+      follow = <Button text={buttonText} onClick={this.props.onFollow} disabled={disabled} />;
     }
 
     return (
       <div style={{ borderTop: '1px solid #363c4b', borderBottom: '1px solid #363c4b', padding: '10px', lineHeight: '36px', overflow: 'hidden', flex: '0 0 auto' }}>
-        <Button text={buttonText} onClick={this.props.onFollow} disabled={account.get('id') === me} /> <span style={{ color: '#616b86', fontWeight: '500', textTransform: 'uppercase', float: 'right', display: 'block' }}>{infoText}</span>
+        {follow} {block}
+        <span style={{ color: '#616b86', fontWeight: '500', textTransform: 'uppercase', float: 'right', display: 'block' }}>{infoText}</span>
       </div>
     );
   },
diff --git a/app/assets/javascripts/components/features/account/index.jsx b/app/assets/javascripts/components/features/account/index.jsx
index 40c06c545..c2389af2e 100644
--- a/app/assets/javascripts/components/features/account/index.jsx
+++ b/app/assets/javascripts/components/features/account/index.jsx
@@ -5,6 +5,8 @@ import {
   fetchAccount,
   followAccount,
   unfollowAccount,
+  blockAccount,
+  unblockAccount,
   fetchAccountTimeline,
   expandAccountTimeline
 }                            from '../../actions/accounts';
@@ -66,6 +68,14 @@ const Account = React.createClass({
     }
   },
 
+  handleBlock () {
+    if (this.props.account.getIn(['relationship', 'blocking'])) {
+      this.props.dispatch(unblockAccount(this.props.account.get('id')));
+    } else {
+      this.props.dispatch(blockAccount(this.props.account.get('id')));
+    }
+  },
+
   handleReply (status) {
     this.props.dispatch(replyCompose(status));
   },
@@ -104,7 +114,7 @@ const Account = React.createClass({
     return (
       <div style={{ display: 'flex', flexDirection: 'column', 'flex': '0 0 auto', height: '100%' }}>
         <Header account={account} />
-        <ActionBar account={account} me={me} onFollow={this.handleFollow} onUnfollow={this.handleUnfollow} />
+        <ActionBar account={account} me={me} onFollow={this.handleFollow} onBlock={this.handleBlock} />
         <StatusList statuses={statuses} me={me} onScrollToBottom={this.handleScrollToBottom} onReply={this.handleReply} onReblog={this.handleReblog} onFavourite={this.handleFavourite} />
       </div>
     );