(prototype) Subscribe button with counter on nav bar

src/app/modules/pro/channel/channel.component.html

@@ -64,6 +64,13 @@
  routerLinkActive="active"
  i18n
  >Donate</a>
+
+ <button class="m-btn" (click)="subscribe($event)" [disabled]="channel.subscribed"> 
+ {{ !channel.subscribed ? 'Subscribe' : 'Subscribed' }}
+ <span> 
+ {{ channel.subscribers_count | abbr:0 }} 
+ </span> 
+ </button>
  </ng-container>
 
  <div class="m-proChannelTopbar_menu m-dropdown">

src/app/modules/pro/channel/channel.component.scss

@@ -135,6 +135,18 @@ m-pro--channel {
  }
  }
 
+ .m-btn {
+ padding-left: 16px;
+ color: var(--text-color) !important;
+ border: 1px solid var(--text-color) !important;
+ }
+
+ .m-btn:disabled {
+ padding-left: 16px;
+ color: gray !important;
+ border: gray !important;
+ }
+
  }
 
  a.m-proChannelTopbar__navItem {

src/app/modules/pro/channel/channel.component.ts

@@ -15,6 +15,7 @@ import { MindsUser, Tag } from "../../../interfaces/entities";
 import { Client } from "../../../services/api/client";
 import { MindsTitle } from '../../../services/ux/title';
 import { ProChannelService } from './channel.service';
+import { SignupModalService } from '../../../modules/modals/signup/service';
 
 @Component({
  providers: [
@@ -59,6 +60,7 @@ export class ProChannelComponent implements OnInit, OnDestroy {
  protected router: Router,
  protected route: ActivatedRoute,
  protected cd: ChangeDetectorRef,
+ public modal: SignupModalService
  ) {
  }
 
@@ -147,6 +149,32 @@ export class ProChannelComponent implements OnInit, OnDestroy {
  this.detectChanges();
  }
 
+ subscribe(e) {
+ e.preventDefault();
+ e.stopPropagation();
+
+ if (!this.session.isLoggedIn()) {
+ this.router.navigate(['/pro', this.channel.username, 'signup']);
+ return false;
+ }
+
+ this.channel.subscribed = true;
+ 
+ this.client.post('api/v1/subscribe/' + this.channel.guid, {})
+ .then((response: any) => {
+ if (response && response.error) {
+ throw 'error';
+ }
+
+ this.channel.subscribed = true;
+ this.channel.subscribers_count++;
+ })
+ .catch((e) => {
+ this.channel.subscribed = false;
+ alert('You can\'t subscribe to this user.');
+ });
+ }
+
  bindCssVariables() {
  const styles = this.channel.pro_settings.styles;
  const modal: HTMLElement = document.querySelector('m-app m-overlay-modal');

src/app/modules/pro/channel/pro-user-menu/pro-user-menu.component.ts

@@ -11,6 +11,10 @@ import { ProChannelService } from "../channel.service";
 export class ProUserMenuComponent implements OnInit {
  isOpen: boolean = false;
 
+ @Input() channelName: string;
+ @Input() showNavItems: boolean;
+ @Input() query: string;
+
  get channel() {
  return this.channelService.currentChannel;
  }