(feat) show modal to unsubscribe when clicking on subscribe button

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

@@ -65,10 +65,14 @@
  i18n
  >Donate</a>
 
- <button class="m-proChannelTopbar_subscribe" (click)="subscribe($event)" [disabled]="channel.subscribed" [hidden]="currentUser && (channel.guid === currentUser.guid)"> 
+ <button 
+ class="m-proChannelTopbar_subscribe" 
+ (click)="!channel.subscribed ? subscribe($event) : unsubscribe($event)"
+ [hidden]="currentUser && (channel.guid === currentUser.guid)"
+ > 
  {{ !channel.subscribed ? 'Subscribe' : 'Subscribed' }}
  <span> 
- {{ channel.subscribers_count | abbr:0 }} 
+ {{ subscribers_count | abbr:0 }} 
  </span> 
  </button>
  </ng-container>

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

@@ -259,4 +259,20 @@ m-pro--channel {
  }
 }
 
+.m-overlayModal--unsubscribe {
+ width: 600px;
+
+ @media screen and (max-width: 660px) {
+ width: 400px;
+ }
+
+ @media screen and (max-width: 420px) {
+ width: 250px;
+ }
+
+ .m-overlay-modal--close {
+ display: none;
+ }
+}
+
 

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

@@ -6,7 +6,8 @@ import {
  HostBinding,
  HostListener,
  OnDestroy,
- OnInit
+ OnInit,
+ Injector
 } from '@angular/core';
 import { ActivatedRoute, NavigationEnd, Router } from "@angular/router";
 import { Session } from "../../../services/session";
@@ -16,6 +17,8 @@ import { Client } from "../../../services/api/client";
 import { MindsTitle } from '../../../services/ux/title';
 import { ProChannelService } from './channel.service';
 import { SignupModalService } from '../../../modules/modals/signup/service';
+import { OverlayModalService } from "../../../services/ux/overlay-modal";
+import { ProUnsubscribeModalComponent } from './unsubscribe-modal/modal.component';
 
 @Component({
  providers: [
@@ -53,6 +56,10 @@ export class ProChannelComponent implements OnInit, OnDestroy {
 
  showCategories: boolean = true;
 
+ channelSubscription$: Subscription;
+
+ subscribers_count: number;
+
  constructor(
  protected element: ElementRef,
  protected session: Session,
@@ -62,7 +69,9 @@ export class ProChannelComponent implements OnInit, OnDestroy {
  protected router: Router,
  protected route: ActivatedRoute,
  protected cd: ChangeDetectorRef,
- public modal: SignupModalService
+ public modal: SignupModalService,
+ protected modalService: OverlayModalService,
+ protected injector: Injector,
  ) {
  }
 
@@ -107,6 +116,11 @@ export class ProChannelComponent implements OnInit, OnDestroy {
  this.childParams$ = this.channelService.childParamsChange.subscribe((params) => {
  this.shouldShowCategories(params.type);
  });
+ 
+ this.channelSubscription$ = this.channelService.subscriptionChange.subscribe((subscribers_count) => {
+ this.subscribers_count = subscribers_count;
+ this.load();
+ })
  }
 
  setTitle() {
@@ -142,7 +156,7 @@ export class ProChannelComponent implements OnInit, OnDestroy {
 
  try {
  this.channel = await this.channelService.load(this.username);
-
+ this.subscribers_count = this.channel.subscribers_count;
  this.bindCssVariables();
  this.setTitle();
  } catch (e) {
@@ -161,21 +175,16 @@ export class ProChannelComponent implements OnInit, OnDestroy {
  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.channelService.subscribe();
+ }
 
-  this.channel.subscribed = true;
-  this.channel.subscribers_count++;
- })
- .catch((e) => {
- this.channel.subscribed = false;
- alert('You can\'t subscribe to this user.');
- });
+ unsubscribe(e){
+ this.modalService
+ .create(ProUnsubscribeModalComponent, this.channel,
+   {
+  class: 'm-overlayModal--unsubscribe'
+ }, this.injector)
+ .present();
  }
 
  bindCssVariables() {

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

@@ -14,6 +14,8 @@ export class ProChannelService {
 
  childParamsChange: EventEmitter<any> = new EventEmitter<any>();
 
+ subscriptionChange: EventEmitter<number> = new EventEmitter<number>();
+
  protected featuredContent: Array<any> | null;
 
  constructor(
@@ -109,4 +111,34 @@ export class ProChannelService {
 
  return route;
  }
+
+ async subscribe() {
+ this.currentChannel.subscribed = true;
+ 
+ this.client.post('api/v1/subscribe/' + this.currentChannel.guid, {})
+ .then((response: any) => {
+ if (response && response.error) {
+ throw 'error';
+ }
+
+ this.currentChannel.subscribed = true;
+ this.subscriptionChange.emit(++this.currentChannel.subscribers_count);
+ })
+ .catch((e) => {
+ this.currentChannel.subscribed = false;
+ alert('You can\'t subscribe to this user.');
+ });
+ }
+
+ async unsubscribe() {
+ this.currentChannel.subscribed = false;
+ this.client.delete('api/v1/subscribe/' + this.currentChannel.guid, {})
+ .then((response: any) => {
+ this.currentChannel.subscribed = false;
+ this.subscriptionChange.emit(--this.currentChannel.subscribers_count);
+ })
+ .catch((e) => {
+ this.currentChannel.subscribed = true;
+ });
+ }
 }

src/app/modules/pro/channel/unsubscribe-modal/modal.component.html

+<div class="m-pro--unsubscribe-modal">
+ <div class="m-ProUnsubscribeModal__body"> 
+ <span> Do you wish to unsubscribe from <strong>{{channelName}}</strong>?</span>
+ </div>
+ <div class="m-ProUnsubscribeModal__response">
+ <span (click)="close()">Cancel</span>
+ <span class="m-ProUnsubscribeModalResponse__unsubscribe" (click)="unsubscribe()">Unsubscribe</span>
+ </div>
+</div>
\ No newline at end of file

src/app/modules/pro/channel/unsubscribe-modal/modal.component.scss

+m-pro--unsubscribe-modal {
+ @include m-theme() {
+ background-color: rgba(themed($m-black-always), 0.95);
+ }
+}
+
+.m-pro--unsubscribe-modal {
+
+ > * {
+ color: var(--text-color);
+ font-size: 16px;
+ 
+ @media screen and (max-width: 420px) {
+ font-size: 14px;
+ }
+ }
+
+ .m-ProUnsubscribeModal__response {
+ margin-top: 20px;
+ text-align: end;
+
+ span {
+ text-transform: uppercase;
+ padding: 8px;
+ cursor: pointer;
+ }
+
+ .m-ProUnsubscribeModalResponse__unsubscribe {
+ color: var(--primary-color);
+ margin-left: 12px;
+ }
+ }
+
+}
\ No newline at end of file

src/app/modules/pro/channel/unsubscribe-modal/modal.component.ts

+import { Component, Input, OnInit } from '@angular/core';
+import { Session } from "../../../../services/session";
+import { OverlayModalService } from '../../../../services/ux/overlay-modal';
+import { MindsUser } from "../../../../interfaces/entities";
+import { Client } from "../../../../services/api/client";
+import { Router } from '@angular/router';
+import { ProChannelService } from '../channel.service';
+
+@Component({
+ selector: 'm-pro--unsubscribe-modal',
+ templateUrl: 'modal.component.html'
+})
+
+export class ProUnsubscribeModalComponent implements OnInit {
+ protected channel: MindsUser;
+
+ @Input('channel') set data(data) {
+ this.channel = data;
+ }
+
+ constructor(
+ protected session: Session,
+ private overlayModal: OverlayModalService,
+ protected client: Client,
+ protected router: Router,
+ protected channelService: ProChannelService,
+ ) {
+ }
+
+ ngOnInit() {
+ }
+
+ close() {
+ this.overlayModal.dismiss();
+ }
+
+ async unsubscribe() {
+ await this.channelService.unsubscribe();
+ this.close();
+ }
+
+ get channelName() {
+ return this.channel.username;
+ }
+
+ 
+}

src/app/modules/pro/pro.module.ts

@@ -22,6 +22,7 @@ import { ProContentModalComponent } from "./channel/content-modal/modal.componen
 import { VideoModule } from "../media/components/video/video.module";
 import { ProChannelListModal } from './channel/list-modal/list-modal.component';
 import { ProChannelHomeComponent } from './channel/home/home.component';
+import { ProUnsubscribeModalComponent } from './channel/unsubscribe-modal/modal.component';
 
 const routes: Routes = [
  {
@@ -90,12 +91,14 @@ const routes: Routes = [
  ProChannelListComponent,
  ProChannelDonateComponent,
  ProUserMenuComponent,
- ProChannelFooterComponent
+ ProChannelFooterComponent,
+ ProUnsubscribeModalComponent
  ],
  exports: [],
  entryComponents: [
  ProMarketingComponent,
  ProChannelListModal,
+ ProUnsubscribeModalComponent
  ],
 })
 export class ProModule {