Make subscribe buttons observe subscription statuses to synchronise

[github/Chocobozzz/PeerTube.git] / client / src / app / shared / user-subscription / user-subscription.service.ts

diff --git a/client/src/app/shared/user-subscription/user-subscription.service.ts b/client/src/app/shared/user-subscription/user-subscription.service.ts
index 83df40a43f51587fa49ec975eff5974dab712395..bfb5848bc212b4df232298fb2abaff4d38e16a4f 100644 (file)
--- a/client/src/app/shared/user-subscription/user-subscription.service.ts
+++ b/client/src/app/shared/user-subscription/user-subscription.service.ts
@@ -1,44 +1,67 @@
-import { bufferTime, catchError, filter, first, map, share, switchMap } from 'rxjs/operators'
+import { bufferTime, catchError, filter, map, tap, share, switchMap } from 'rxjs/operators'
+import { Observable, ReplaySubject, Subject, of, merge } from 'rxjs'
 import { HttpClient, HttpParams } from '@angular/common/http'
 import { Injectable } from '@angular/core'
 import { ResultList } from '../../../../../shared'
 import { environment } from '../../../environments/environment'
 import { RestExtractor, RestService } from '../rest'
-import { Observable, ReplaySubject, Subject } from 'rxjs'
 import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
 import { VideoChannelService } from '@app/shared/video-channel/video-channel.service'
 import { VideoChannel as VideoChannelServer } from '../../../../../shared/models/videos'
 import { ComponentPaginationLight } from '@app/shared/rest/component-pagination.model'
+import { uniq } from 'lodash-es'
+import * as debug from 'debug'
+
+const logger = debug('peertube:subscriptions:UserSubscriptionService')
 
 type SubscriptionExistResult = { [ uri: string ]: boolean }
+type SubscriptionExistResultObservable = { [ uri: string ]: Observable<boolean> }
 
 @Injectable()
 export class UserSubscriptionService {
   static BASE_USER_SUBSCRIPTIONS_URL = environment.apiUrl + '/api/v1/users/me/subscriptions'
 
   // Use a replay subject because we "next" a value before subscribing
-  private existsSubject: Subject<string> = new ReplaySubject(1)
+  private existsSubject = new ReplaySubject<string>(1)
   private readonly existsObservable: Observable<SubscriptionExistResult>
 
+  private myAccountSubscriptionCache: SubscriptionExistResult = {}
+  private myAccountSubscriptionCacheObservable: SubscriptionExistResultObservable = {}
+  private myAccountSubscriptionCacheSubject = new Subject<SubscriptionExistResult>()
+
   constructor (
     private authHttp: HttpClient,
     private restExtractor: RestExtractor,
     private restService: RestService
   ) {
-    this.existsObservable = this.existsSubject.pipe(
-      bufferTime(500),
-      filter(uris => uris.length !== 0),
-      switchMap(uris => this.doSubscriptionsExist(uris)),
-      share()
+    this.existsObservable = merge(
+      this.existsSubject.pipe(
+        bufferTime(500),
+        filter(uris => uris.length !== 0),
+        map(uris => uniq(uris)),
+        switchMap(uris => this.doSubscriptionsExist(uris)),
+        share()
+      ),
+
+      this.myAccountSubscriptionCacheSubject
     )
   }
 
+  /**
+   * Subscription part
+   */
+
   deleteSubscription (nameWithHost: string) {
     const url = UserSubscriptionService.BASE_USER_SUBSCRIPTIONS_URL + '/' + nameWithHost
 
     return this.authHttp.delete(url)
                .pipe(
                  map(this.restExtractor.extractDataBool),
+                 tap(() => {
+                   this.myAccountSubscriptionCache[nameWithHost] = false
+
+                   this.myAccountSubscriptionCacheSubject.next(this.myAccountSubscriptionCache)
+                 }),
                  catchError(err => this.restExtractor.handleError(err))
                )
   }
@@ -50,6 +73,11 @@ export class UserSubscriptionService {
     return this.authHttp.post(url, body)
                .pipe(
                  map(this.restExtractor.extractDataBool),
+                 tap(() => {
+                   this.myAccountSubscriptionCache[nameWithHost] = true
+
+                   this.myAccountSubscriptionCacheSubject.next(this.myAccountSubscriptionCache)
+                 }),
                  catchError(err => this.restExtractor.handleError(err))
                )
   }
@@ -69,10 +97,46 @@ export class UserSubscriptionService {
                )
   }
 
+  /**
+   * SubscriptionExist part
+   */
+
+  listenToMyAccountSubscriptionCacheSubject () {
+    return this.myAccountSubscriptionCacheSubject.asObservable()
+  }
+
+  listenToSubscriptionCacheChange (nameWithHost: string) {
+    if (nameWithHost in this.myAccountSubscriptionCacheObservable) {
+      return this.myAccountSubscriptionCacheObservable[ nameWithHost ]
+    }
+
+    const obs = this.existsObservable
+                    .pipe(
+                      filter(existsResult => existsResult[ nameWithHost ] !== undefined),
+                      map(existsResult => existsResult[ nameWithHost ])
+                    )
+
+    this.myAccountSubscriptionCacheObservable[ nameWithHost ] = obs
+    return obs
+  }
+
   doesSubscriptionExist (nameWithHost: string) {
+    logger('Running subscription check for %d.', nameWithHost)
+
+    if (nameWithHost in this.myAccountSubscriptionCache) {
+      logger('Found cache for %d.', nameWithHost)
+
+      return of(this.myAccountSubscriptionCache[ nameWithHost ])
+    }
+
     this.existsSubject.next(nameWithHost)
 
-    return this.existsObservable.pipe(first())
+    logger('Fetching from network for %d.', nameWithHost)
+    return this.existsObservable.pipe(
+      filter(existsResult => existsResult[ nameWithHost ] !== undefined),
+      map(existsResult => existsResult[ nameWithHost ]),
+      tap(result => this.myAccountSubscriptionCache[ nameWithHost ] = result)
+    )
   }
 
   private doSubscriptionsExist (uris: string[]): Observable<SubscriptionExistResult> {
@@ -82,6 +146,14 @@ export class UserSubscriptionService {
     params = this.restService.addObjectParams(params, { uris })
 
     return this.authHttp.get<SubscriptionExistResult>(url, { params })
-               .pipe(catchError(err => this.restExtractor.handleError(err)))
+               .pipe(
+                 tap(res => {
+                   this.myAccountSubscriptionCache = {
+                     ...this.myAccountSubscriptionCache,
+                     ...res
+                   }
+                 }),
+                 catchError(err => this.restExtractor.handleError(err))
+               )
   }
 }