Allow to subscribe to an account

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

app/soapbox/actions/accounts.js

@@ -40,6 +40,14 @@ export const ACCOUNT_UNMUTE_REQUEST = 'ACCOUNT_UNMUTE_REQUEST';
 export const ACCOUNT_UNMUTE_SUCCESS = 'ACCOUNT_UNMUTE_SUCCESS';
 export const ACCOUNT_UNMUTE_FAIL    = 'ACCOUNT_UNMUTE_FAIL';
 
+export const ACCOUNT_SUBSCRIBE_REQUEST = 'ACCOUNT_SUBSCRIBE_REQUEST';
+export const ACCOUNT_SUBSCRIBE_SUCCESS = 'ACCOUNT_SUBSCRIBE_SUCCESS';
+export const ACCOUNT_SUBSCRIBE_FAIL    = 'ACCOUNT_SUBSCRIBE_FAIL';
+
+export const ACCOUNT_UNSUBSCRIBE_REQUEST = 'ACCOUNT_UNSUBSCRIBE_REQUEST';
+export const ACCOUNT_UNSUBSCRIBE_SUCCESS = 'ACCOUNT_UNSUBSCRIBE_SUCCESS';
+export const ACCOUNT_UNSUBSCRIBE_FAIL    = 'ACCOUNT_UNSUBSCRIBE_FAIL';
+
 export const ACCOUNT_PIN_REQUEST = 'ACCOUNT_PIN_REQUEST';
 export const ACCOUNT_PIN_SUCCESS = 'ACCOUNT_PIN_SUCCESS';
 export const ACCOUNT_PIN_FAIL    = 'ACCOUNT_PIN_FAIL';
@@ -410,6 +418,78 @@ export function unmuteAccountFail(error) {
 };
 
 
+export function subscribeAccount(id, notifications) {
+  return (dispatch, getState) => {
+    if (!isLoggedIn(getState)) return;
+
+    dispatch(subscribeAccountRequest(id));
+
+    api(getState).post(`/api/v1/pleroma/accounts/${id}/subscribe`, { notifications }).then(response => {
+      // Pass in entire statuses map so we can use it to filter stuff in different parts of the reducers
+      dispatch(subscribeAccountSuccess(response.data, getState().get('statuses')));
+    }).catch(error => {
+      dispatch(subscribeAccountFail(id, error));
+    });
+  };
+};
+
+export function unsubscribeAccount(id) {
+  return (dispatch, getState) => {
+    if (!isLoggedIn(getState)) return;
+
+    dispatch(unsubscribeAccountRequest(id));
+
+    api(getState).post(`/api/v1/pleroma/accounts/${id}/unsubscribe`).then(response => {
+      dispatch(unsubscribeAccountSuccess(response.data));
+    }).catch(error => {
+      dispatch(unsubscribeAccountFail(id, error));
+    });
+  };
+};
+
+export function subscribeAccountRequest(id) {
+  return {
+    type: ACCOUNT_SUBSCRIBE_REQUEST,
+    id,
+  };
+};
+
+export function subscribeAccountSuccess(relationship, statuses) {
+  return {
+    type: ACCOUNT_SUBSCRIBE_SUCCESS,
+    relationship,
+    statuses,
+  };
+};
+
+export function subscribeAccountFail(error) {
+  return {
+    type: ACCOUNT_SUBSCRIBE_FAIL,
+    error,
+  };
+};
+
+export function unsubscribeAccountRequest(id) {
+  return {
+    type: ACCOUNT_UNSUBSCRIBE_REQUEST,
+    id,
+  };
+};
+
+export function unsubscribeAccountSuccess(relationship) {
+  return {
+    type: ACCOUNT_UNSUBSCRIBE_SUCCESS,
+    relationship,
+  };
+};
+
+export function unsubscribeAccountFail(error) {
+  return {
+    type: ACCOUNT_UNSUBSCRIBE_FAIL,
+    error,
+  };
+};
+
 export function fetchFollowers(id) {
   return (dispatch, getState) => {
     if (!isLoggedIn(getState)) return;

app/soapbox/features/account/components/header.js

@@ -19,6 +19,7 @@ import ProfileInfoPanel from '../../ui/components/profile_info_panel';
 import { debounce } from 'lodash';
 import StillImage from 'soapbox/components/still_image';
 import ActionButton from 'soapbox/features/ui/components/action_button';
+import SubscriptionButton from 'soapbox/features/ui/components/subscription_button';
 import { isVerified } from 'soapbox/utils/accounts';
 import { openModal } from 'soapbox/actions/modal';
 import { List as ImmutableList, Map as ImmutableMap } from 'immutable';
@@ -326,6 +327,7 @@ class Header extends ImmutablePureComponent {
             }
 
             <div className='account__header__extra__buttons'>
+              <SubscriptionButton account={account} />
               <ActionButton account={account} />
               {me && account.get('id') !== me && account.getIn(['pleroma', 'accepts_chat_messages'], false) === true &&
                 <Button className='button-alternative-2' onClick={this.props.onChat}>

app/soapbox/features/ui/components/subscription_button.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import { defineMessages, injectIntl } from 'react-intl';
+import classNames from 'classnames';
+import Button from 'soapbox/components/button';
+import Icon from 'soapbox/components/icon';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import {
+  subscribeAccount,
+  unsubscribeAccount,
+} from 'soapbox/actions/accounts';
+
+const messages = defineMessages({
+  subscribe: { id: 'account.subscribe', defaultMessage: 'Subscribe to @{name} posts' },
+  unsubscribe: { id: 'account.unsubscribe', defaultMessage: 'Unsubscribe @{name} posts' },
+});
+
+const mapStateToProps = state => {
+  const me = state.get('me');
+  return {
+    me,
+  };
+};
+
+const mapDispatchToProps = (dispatch) => ({
+  onSubscriptionToggle(account) {
+    if (account.getIn(['relationship', 'subscribing'])) {
+      dispatch(unsubscribeAccount(account.get('id')));
+    } else {
+      dispatch(subscribeAccount(account.get('id')));
+    }
+  },
+});
+
+export default @connect(mapStateToProps, mapDispatchToProps)
+@injectIntl
+class SubscriptionButton extends ImmutablePureComponent {
+
+  static propTypes = {
+    account: ImmutablePropTypes.map,
+  };
+
+  handleSubscriptionToggle = () => {
+    this.props.onSubscriptionToggle(this.props.account);
+  }
+
+  render() {
+    const { account, intl } = this.props;
+    const subscribing = account.getIn(['relationship', 'subscribing']);
+
+    let subscriptionButton = '';
+
+    if (account.getIn(['relationship', 'requested']) || account.getIn(['relationship', 'following'])) {
+      subscriptionButton = (<Button className={classNames('subscription-button', subscribing && 'button-active')} style={{ padding: 0, lineHeight: '18px' }} title={intl.formatMessage(account.getIn(['relationship', 'subscribing']) ? messages.unsubscribe : messages.subscribe, { name: account.get('username') })} onClick={this.handleSubscriptionToggle}>
+        <Icon id={account.getIn(['relationship', 'subscribing']) ? 'bell' : 'bell-slash'} style={{ margin: 0, fontSize: 18 }} />
+      </Button>);
+    }
+
+    return subscriptionButton;
+  }
+
+}

app/soapbox/reducers/relationships.js

@@ -9,6 +9,8 @@ import {
   ACCOUNT_UNBLOCK_SUCCESS,
   ACCOUNT_MUTE_SUCCESS,
   ACCOUNT_UNMUTE_SUCCESS,
+  ACCOUNT_SUBSCRIBE_SUCCESS,
+  ACCOUNT_UNSUBSCRIBE_SUCCESS,
   ACCOUNT_PIN_SUCCESS,
   ACCOUNT_UNPIN_SUCCESS,
   RELATIONSHIPS_FETCH_SUCCESS,
@@ -98,6 +100,8 @@ export default function relationships(state = initialState, action) {
   case ACCOUNT_UNBLOCK_SUCCESS:
   case ACCOUNT_MUTE_SUCCESS:
   case ACCOUNT_UNMUTE_SUCCESS:
+  case ACCOUNT_SUBSCRIBE_SUCCESS:
+  case ACCOUNT_UNSUBSCRIBE_SUCCESS:
   case ACCOUNT_PIN_SUCCESS:
   case ACCOUNT_UNPIN_SUCCESS:
     return normalizeRelationship(state, action.relationship);

app/styles/components/account-header.scss

@@ -149,6 +149,32 @@
       }
 
       .button { margin-right: 10px; }
+
+      .subscription-button {
+        padding: 0px;
+        height: 36px;
+        line-height: 36px;
+        width: 36px;
+        margin-right: 10px;
+        font-size: 20px;
+        text-align: center;
+        border: 1px solid var(--brand-color);
+        background: transparent;
+        color: var(--primary-text-color);
+
+        &:hover,
+        &.active {
+          border-color: $error-red;
+          background: $error-red;
+          color: #fff;
+        }
+      }
+
+      .button-active {
+        border-color: #008000;
+        background: #008000;
+        color: #fff;
+      }
     }
 
     &__links {