Merge branch 'subscriptions-ringing-bell' into 'develop'

Subscriptions improvements

See merge request soapbox-pub/soapbox-fe!550

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

@@ -54,6 +54,8 @@ const messages = defineMessages({
   deleteUser: { id: 'admin.users.actions.delete_user', defaultMessage: 'Delete @{name}' },
   verifyUser: { id: 'admin.users.actions.verify_user', defaultMessage: 'Verify @{name}' },
   unverifyUser: { id: 'admin.users.actions.unverify_user', defaultMessage: 'Unverify @{name}' },
+  subscribe: { id: 'account.subscribe', defaultMessage: 'Subscribe to notifications from @{name}' },
+  unsubscribe: { id: 'account.unsubscribe', defaultMessage: 'Unsubscribe to notifications from @{name}' },
 });
 
 const mapStateToProps = state => {
@@ -158,6 +160,12 @@ class Header extends ImmutablePureComponent {
           menu.push({ text: intl.formatMessage(messages.showReblogs, { name: account.get('username') }), action: this.props.onReblogToggle });
         }
 
+        if (account.getIn(['relationship', 'subscribing'])) {
+          menu.push({ text: intl.formatMessage(messages.unsubscribe, { name: account.get('username') }), action: this.props.onSubscriptionToggle });
+        } else {
+          menu.push({ text: intl.formatMessage(messages.subscribe, { name: account.get('username') }), action: this.props.onSubscriptionToggle });
+        }
+
         menu.push({ text: intl.formatMessage(messages.add_or_remove_from_list), action: this.props.onAddToList });
         // menu.push({ text: intl.formatMessage(account.getIn(['relationship', 'endorsed']) ? messages.unendorse : messages.endorse), action: this.props.onEndorseToggle });
         menu.push(null);

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

@@ -52,6 +52,10 @@ export default class Header extends ImmutablePureComponent {
     this.props.onReblogToggle(this.props.account);
   }
 
+  handleSubscriptionToggle = () => {
+    this.props.onSubscriptionToggle(this.props.account);
+  }
+
   handleMute = () => {
     this.props.onMute(this.props.account);
   }
@@ -117,6 +121,7 @@ export default class Header extends ImmutablePureComponent {
           onDirect={this.handleDirect}
           onChat={this.handleChat}
           onReblogToggle={this.handleReblogToggle}
+          onSubscriptionToggle={this.handleSubscriptionToggle}
           onReport={this.handleReport}
           onMute={this.handleMute}
           onBlockDomain={this.handleBlockDomain}

app/soapbox/features/account_timeline/containers/header_container.js

@@ -10,6 +10,9 @@ import {
   unmuteAccount,
   // pinAccount,
   // unpinAccount,
+  subscribeAccount,
+  unsubscribeAccount,
+
 } from '../../../actions/accounts';
 import {
   mentionCompose,
@@ -103,6 +106,14 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
     }
   },
 
+  onSubscriptionToggle(account) {
+    if (account.getIn(['relationship', 'subscribing'])) {
+      dispatch(unsubscribeAccount(account.get('id')));
+    } else {
+      dispatch(subscribeAccount(account.get('id')));
+    }
+  },
+
   // onEndorseToggle(account) {
   //   if (account.getIn(['relationship', 'endorsed'])) {
   //     dispatch(unpinAccount(account.get('id')));

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

@@ -12,8 +12,8 @@ import {
 } from 'soapbox/actions/accounts';
 
 const messages = defineMessages({
-  subscribe: { id: 'account.subscribe', defaultMessage: 'Subscribe to @{name} posts' },
-  unsubscribe: { id: 'account.unsubscribe', defaultMessage: 'Unsubscribe @{name} posts' },
+  subscribe: { id: 'account.subscribe', defaultMessage: 'Subscribe to notifications from @{name}' },
+  unsubscribe: { id: 'account.unsubscribe', defaultMessage: 'Unsubscribe to notifications from @{name}' },
 });
 
 const mapStateToProps = state => {
@@ -53,11 +53,11 @@ class SubscriptionButton extends ImmutablePureComponent {
 
     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 }} />
+        <Icon id={account.getIn(['relationship', 'subscribing']) ? 'bell-ringing' : 'bell'} style={{ margin: 0, fontSize: 18 }} />
       </Button>);
     }
 
     return subscriptionButton;
   }
 
-}
+}

app/styles/components/account-header.scss

@@ -168,6 +168,10 @@
           background: $error-red;
           color: #fff;
         }
+
+        @media (max-width: 430px) {
+          display: none;
+        }
       }
 
       .button-active {

package.json

@@ -72,7 +72,7 @@
     "file-loader": "^6.0.0",
     "fontsource-montserrat": "^3.0.9",
     "fontsource-roboto": "^3.0.3",
-    "fork-awesome": "^1.1.7",
+    "fork-awesome": "https://github.com/alexgleason/Fork-Awesome#c23fd34246a9f33c4bf24ea095a4cf26e7abe265",
     "html-webpack-harddisk-plugin": "^1.0.1",
     "html-webpack-plugin": "^4.3.0",
     "http-link-header": "^1.0.2",

yarn.lock

@@ -5480,10 +5480,9 @@ forever-agent@~0.6.1:
   resolved "https://registry.yarnpkg.com/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91"
   integrity sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=
 
-fork-awesome@^1.1.7:
-  version "1.1.7"
-  resolved "https://registry.yarnpkg.com/fork-awesome/-/fork-awesome-1.1.7.tgz#1427da1cac3d1713046ee88427e5fcecb9501d21"
-  integrity sha512-IHI7XCSXrKfUIWslse8c/PaaVDT1oBaYge+ju40ihL2ooiQeBpTr4wvIXhgTd2NuhntlvX+M5jYHAPTzNlmv0g==
+"fork-awesome@https://github.com/alexgleason/Fork-Awesome#c23fd34246a9f33c4bf24ea095a4cf26e7abe265":
+  version "1.2.0"
+  resolved "https://github.com/alexgleason/Fork-Awesome#c23fd34246a9f33c4bf24ea095a4cf26e7abe265"
 
 form-data@~2.3.2:
   version "2.3.3"