Improve subscription button on header

app/soapbox/actions/__tests__/accounts.test.ts

@@ -435,10 +435,14 @@ describe('followAccount()', () => {
             skipLoading: true,
           },
         ];
-        await store.dispatch(followAccount(id));
-        const actions = store.getActions();
 
-        expect(actions).toEqual(expectedActions);
+        try {
+          await store.dispatch(followAccount(id));
+        } catch (e) {
+          const actions = store.getActions();
+          expect(actions).toEqual(expectedActions);
+          expect(e).toEqual(new Error('Network Error'));
+        }
       });
     });
   });

app/soapbox/actions/accounts.js

@@ -240,7 +240,10 @@ export function followAccount(id, options = { reblogs: true }) {
     return api(getState)
       .post(`/api/v1/accounts/${id}/follow`, options)
       .then(response => dispatch(followAccountSuccess(response.data, alreadyFollowing)))
-      .catch(error => dispatch(followAccountFail(error, locked)));
+      .catch(error => {
+        dispatch(followAccountFail(error, locked));
+        throw error;
+      });
   };
 }
 

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

@@ -17,6 +17,7 @@ import StillImage from 'soapbox/components/still_image';
 import { HStack, IconButton, Menu, MenuButton, MenuItem, MenuList, MenuLink, MenuDivider } from 'soapbox/components/ui';
 import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
 import ActionButton from 'soapbox/features/ui/components/action-button';
+import SubscriptionButton from 'soapbox/features/ui/components/subscription-button';
 import {
   isLocal,
   isRemote,
@@ -250,22 +251,6 @@ class Header extends ImmutablePureComponent {
           });
         }
 
-        if (features.accountSubscriptions) {
-          if (account.relationship?.subscribing) {
-            menu.push({
-              text: intl.formatMessage(messages.unsubscribe, { name: account.get('username') }),
-              action: this.props.onSubscriptionToggle,
-              icon: require('@tabler/icons/icons/bell.svg'),
-            });
-          } else {
-            menu.push({
-              text: intl.formatMessage(messages.subscribe, { name: account.get('username') }),
-              action: this.props.onSubscriptionToggle,
-              icon: require('@tabler/icons/icons/bell-off.svg'),
-            });
-          }
-        }
-
         if (features.lists) {
           menu.push({
             text: intl.formatMessage(messages.add_or_remove_from_list),
@@ -476,7 +461,7 @@ class Header extends ImmutablePureComponent {
         <Badge
           key='blocked'
           slug='opaque'
-          title={<FormattedMessage  id='account.blocked' defaultMessage='Blocked' />}
+          title={<FormattedMessage id='account.blocked' defaultMessage='Blocked' />}
         />,
       );
     }
@@ -578,11 +563,6 @@ class Header extends ImmutablePureComponent {
     const menu = this.makeMenu();
     const header = account.get('header', '');
 
-    // NOTE: Removing Subscription element
-    //   {features.accountSubscriptions && <div className='account__header__subscribe'>
-    //   <SubscriptionButton account={account} />
-    // </div>}
-
     return (
       <div className='-mt-4 -mx-4'>
         <div>
@@ -618,6 +598,8 @@ class Header extends ImmutablePureComponent {
 
             <div className='mt-6 flex justify-end w-full sm:pb-1'>
               <div className='mt-10 flex flex-row space-y-0 space-x-2'>
+                <SubscriptionButton account={account} />
+
                 {me && (
                   <Menu>
                     <MenuButton

app/soapbox/features/ui/components/subscription-button.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+
+import {
+  followAccount,
+  subscribeAccount,
+  unsubscribeAccount,
+} from 'soapbox/actions/accounts';
+import snackbar from 'soapbox/actions/snackbar';
+import { IconButton } from 'soapbox/components/ui';
+import { useAppDispatch, useFeatures } from 'soapbox/hooks';
+
+import type { Account as AccountEntity } from 'soapbox/types/entities';
+
+const messages = defineMessages({
+  subscribe: { id: 'account.subscribe', defaultMessage: 'Subscribe to notifications from @{name}' },
+  unsubscribe: { id: 'account.unsubscribe', defaultMessage: 'Unsubscribe to notifications from @{name}' },
+  subscribeSuccess: { id: 'account.subscribe.success', defaultMessage: 'You have subscribed to this account.' },
+  unsubscribeSuccess: { id: 'account.unsubscribe.success', defaultMessage: 'You have unsubscribed from this account.' },
+  subscribeFailure: { id: 'account.subscribe.failure', defaultMessage: 'An error occurred trying to subscribed to this account.' },
+  unsubscribeFailure: { id: 'account.unsubscribe.failure', defaultMessage: 'An error occurred trying to unsubscribed to this account.' },
+});
+
+interface ISubscriptionButton {
+  account: AccountEntity
+}
+
+const SubscriptionButton = ({ account }: ISubscriptionButton) => {
+  const dispatch = useAppDispatch();
+  const features = useFeatures();
+  const intl = useIntl();
+
+  const following = account.relationship?.following;
+  const requested = account.relationship?.requested;
+  const isSubscribed = features.accountNotifies ?
+    account.relationship?.notifying :
+    account.relationship?.subscribing;
+  const title = isSubscribed ?
+    intl.formatMessage(messages.unsubscribe, { name: account.get('username') }) :
+    intl.formatMessage(messages.subscribe, { name: account.get('username') });
+
+  const onSubscribeSuccess = () =>
+    dispatch(snackbar.success(intl.formatMessage(messages.subscribeSuccess)));
+
+  const onSubscribeFailure = () =>
+    dispatch(snackbar.error(intl.formatMessage(messages.subscribeFailure)));
+
+  const onUnsubscribeSuccess = () =>
+    dispatch(snackbar.success(intl.formatMessage(messages.unsubscribeSuccess)));
+
+  const onUnsubscribeFailure = () =>
+    dispatch(snackbar.error(intl.formatMessage(messages.unsubscribeFailure)));
+
+  const onNotifyToggle = () => {
+    if (account.relationship?.notifying) {
+      dispatch(followAccount(account.get('id'), { notify: false } as any))
+        ?.then(() => onUnsubscribeSuccess())
+        .catch(() => onUnsubscribeFailure());
+    } else {
+      dispatch(followAccount(account.get('id'), { notify: true } as any))
+        ?.then(() => onSubscribeSuccess())
+        .catch(() => onSubscribeFailure());
+    }
+  };
+
+  const onSubscriptionToggle = () => {
+    if (account.relationship?.subscribing) {
+      dispatch(unsubscribeAccount(account.get('id')))
+        ?.then(() => onUnsubscribeSuccess())
+        .catch(() => onUnsubscribeFailure());
+    } else {
+      dispatch(subscribeAccount(account.get('id')))
+        ?.then(() => onSubscribeSuccess())
+        .catch(() => onSubscribeFailure());
+    }
+  };
+
+  const handleToggle = () => {
+    if (features.accountNotifies) {
+      onNotifyToggle();
+    } else {
+      onSubscriptionToggle();
+    }
+  };
+
+  if (!features.accountSubscriptions) {
+    return null;
+  }
+
+  if (requested || following) {
+    return (
+      <IconButton
+        src={isSubscribed ? require('@tabler/icons/icons/bell-ringing.svg') : require('@tabler/icons/icons/bell.svg')}
+        onClick={handleToggle}
+        title={title}
+        className='text-primary-700 bg-primary-100 dark:!bg-slate-700 dark:!text-white hover:bg-primary-200 p-2'
+        iconClassName='w-5 h-5'
+      />
+    );
+  }
+
+  return null;
+};
+
+export default SubscriptionButton;

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

@@ -1,83 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { defineMessages, injectIntl } from 'react-intl';
-import { connect } from 'react-redux';
-
-import {
-  followAccount,
-  subscribeAccount,
-  unsubscribeAccount,
-} from 'soapbox/actions/accounts';
-import Icon from 'soapbox/components/icon';
-import { Button } from 'soapbox/components/ui';
-
-const messages = defineMessages({
-  subscribe: { id: 'account.subscribe', defaultMessage: 'Subscribe to notifications from @{name}' },
-  unsubscribe: { id: 'account.unsubscribe', defaultMessage: 'Unsubscribe to notifications from @{name}' },
-  subscribed: { id: 'account.subscribed', defaultMessage: 'Subscribed' },
-});
-
-const mapStateToProps = state => {
-  const me = state.get('me');
-  return {
-    me,
-  };
-};
-
-const mapDispatchToProps = (dispatch) => ({
-  onSubscriptionToggle(account) {
-    if (account.relationship?.subscribing) {
-      dispatch(unsubscribeAccount(account.get('id')));
-    } else {
-      dispatch(subscribeAccount(account.get('id')));
-    }
-  },
-  onNotifyToggle(account) {
-    if (account.relationship?.notifying) {
-      dispatch(followAccount(account.get('id'), { notify: false }));
-    } else {
-      dispatch(followAccount(account.get('id'), { notify: true }));
-    }
-  },
-});
-
-export default @connect(mapStateToProps, mapDispatchToProps)
-@injectIntl
-class SubscriptionButton extends ImmutablePureComponent {
-
-  static propTypes = {
-    account: ImmutablePropTypes.record,
-    features: PropTypes.object.isRequired,
-  };
-
-  handleSubscriptionToggle = () => {
-    if (this.props.features.accountNotifies) this.props.onNotifyToggle(this.props.account);
-    else this.props.onSubscriptionToggle(this.props.account);
-  }
-
-  render() {
-    const { account, intl, features } = this.props;
-    const subscribing = features.accountNotifies ? account.relationship?.notifying : account.relationship?.subscribing;
-    const following = account.relationship?.following;
-    const requested = account.relationship?.requested;
-
-    if (requested || following) {
-      return (
-        <Button
-          className={classNames('subscription-button', subscribing && 'button-active')}
-          title={intl.formatMessage(subscribing ? messages.unsubscribe : messages.subscribe, { name: account.get('username') })}
-          onClick={this.handleSubscriptionToggle}
-        >
-          <Icon src={subscribing ? require('@tabler/icons/icons/bell-ringing.svg') : require('@tabler/icons/icons/bell.svg')} />
-          {subscribing && intl.formatMessage(messages.subscribed)}
-        </Button>
-      );
-    }
-
-    return null;
-  }
-
-}

app/soapbox/utils/features.ts

@@ -126,6 +126,7 @@ const getInstanceFeatures = (instance: Instance) => {
     accountNotifies: any([
       v.software === MASTODON && gte(v.compatVersion, '3.3.0'),
       v.software === PLEROMA && gte(v.version, '2.4.50'),
+      v.software === TRUTHSOCIAL,
     ]),
 
     /**