refactor: unsubscribe on destroy (#2112)

Author: drumonii

docs/app/@theme/components/fragment-target/fragment-target.directive.ts

@@ -1,7 +1,7 @@
 import { Directive, ElementRef, Inject, Input, OnDestroy, OnInit, PLATFORM_ID, Renderer2 } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { timer } from 'rxjs';
-import { takeWhile, publish, refCount, filter, tap, debounce } from 'rxjs/operators';
+import { timer, Subject } from 'rxjs';
+import { takeUntil, publish, refCount, filter, tap, debounce } from 'rxjs/operators';
 import { NB_WINDOW, NbLayoutScrollService } from '@nebular/theme';
 import { NgdVisibilityService } from '../../../@theme/services';
 
@@ -15,7 +15,7 @@ export class NgdFragmentTargetDirective implements OnInit, OnDestroy {
   private readonly marginFromTop = 120;
   private isCurrentlyViewed: boolean = false;
   private isScrolling: boolean = false;
-  private alive = true;
+  private destroy$ = new Subject<void>();
 
   @Input() ngdFragment: string;
   @Input() ngdFragmentClass: string;
@@ -37,7 +37,7 @@ export class NgdFragmentTargetDirective implements OnInit, OnDestroy {
       .pipe(
         publish(null),
         refCount(),
-        takeWhile(() => this.alive),
+        takeUntil(this.destroy$),
         filter(() => this.ngdFragmentSync),
       )
       .subscribe((fragment: string) => {
@@ -49,7 +49,7 @@ export class NgdFragmentTargetDirective implements OnInit, OnDestroy {
       });
 
     this.visibilityService.isTopmostVisible(this.el.nativeElement, OBSERVER_OPTIONS)
-      .pipe(takeWhile(() => this.alive))
+      .pipe(takeUntil(this.destroy$))
       .subscribe((isTopmost: boolean) => {
         this.isCurrentlyViewed = isTopmost;
         if (isTopmost) {
@@ -59,9 +59,9 @@ export class NgdFragmentTargetDirective implements OnInit, OnDestroy {
 
     this.scrollService.onScroll()
       .pipe(
-        takeWhile(() => this.alive),
         tap(() => this.isScrolling = true),
         debounce(() => timer(100)),
+        takeUntil(this.destroy$),
       )
       .subscribe(() => this.isScrolling = false);
   }
@@ -88,7 +88,8 @@ export class NgdFragmentTargetDirective implements OnInit, OnDestroy {
   }
 
   ngOnDestroy() {
-    this.alive = false;
+    this.destroy$.next();
+    this.destroy$.complete();
     this.visibilityService.unobserve(this.el.nativeElement, OBSERVER_OPTIONS);
   }
 }

docs/app/@theme/components/page-tabs/page-tabs.component.ts

@@ -5,9 +5,9 @@
  */
 
 import { ChangeDetectionStrategy, Component, Input, OnDestroy, HostBinding } from '@angular/core';
-import { takeWhile, map, publishReplay, refCount } from 'rxjs/operators';
+import { takeUntil, map, publishReplay, refCount } from 'rxjs/operators';
 import { ActivatedRoute } from '@angular/router';
-import { Observable, of as observableOf, combineLatest } from 'rxjs';
+import { Observable, of as observableOf, combineLatest, Subject } from 'rxjs';
 
 @Component({
   selector: 'ngd-page-tabs',
@@ -25,6 +25,8 @@ import { Observable, of as observableOf, combineLatest } from 'rxjs';
 })
 export class NgdPageTabsComponent implements OnDestroy {
 
+  private destroy$ = new Subject<void>();
+
   items$: Observable<any[]> = observableOf([]);
 
   @Input()
@@ -36,8 +38,8 @@ export class NgdPageTabsComponent implements OnDestroy {
       this.activatedRoute.params.pipe(publishReplay(), refCount()),
     )
     .pipe(
-      takeWhile(() => this.alive),
       map(([tabs, params]) => (tabs.map((item: any) => ({ ...item, selected: item.tab === params.tab })))),
+      takeUntil(this.destroy$),
     );
   }
 
@@ -76,12 +78,12 @@ export class NgdPageTabsComponent implements OnDestroy {
         icon: 'image-outline',
       },
     ];
-  private alive = true;
 
   constructor(private activatedRoute: ActivatedRoute) {
   }
 
   ngOnDestroy() {
-    this.alive = false;
+    this.destroy$.next();
+    this.destroy$.complete();
   }
 }

docs/app/@theme/components/page-toc/page-toc.component.ts

@@ -5,9 +5,9 @@
  */
 
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy } from '@angular/core';
-import { takeWhile, map } from 'rxjs/operators';
+import { takeUntil, map } from 'rxjs/operators';
 import { ActivatedRoute } from '@angular/router';
-import { of as observableOf,  combineLatest } from 'rxjs';
+import { of as observableOf,  combineLatest, Subject } from 'rxjs';
 
 @Component({
   selector: 'ngd-page-toc',
@@ -26,6 +26,8 @@ import { of as observableOf,  combineLatest } from 'rxjs';
 })
 export class NgdPageTocComponent implements OnDestroy {
 
+  private destroy$ = new Subject<void>();
+
   items: any[];
 
   @Input()
@@ -35,27 +37,26 @@ export class NgdPageTocComponent implements OnDestroy {
       this.activatedRoute.fragment,
     )
       .pipe(
-        takeWhile(() => this.alive),
         map(([toc, fragment]) => {
           toc = toc.map((item: any) => ({ ...item, selected: fragment === item.fragment }));
           if (toc.length && !toc.find(item => item.selected)) {
             toc[0].selected = true;
           }
           return toc;
         }),
+        takeUntil(this.destroy$),
       )
       .subscribe((toc) => {
         this.items = toc;
         this.cd.detectChanges();
       })
   }
 
-  private alive = true;
-
   constructor(private activatedRoute: ActivatedRoute, private cd: ChangeDetectorRef) {
   }
 
   ngOnDestroy() {
-    this.alive = false;
+    this.destroy$.next();
+    this.destroy$.complete();
   }
 }

docs/app/blocks/components/live-example-block/live-example-block.component.ts

@@ -13,7 +13,8 @@ import {
   AfterViewInit,
 } from '@angular/core';
 import { Location } from '@angular/common';
-import { takeWhile } from 'rxjs/operators';
+import { takeUntil } from 'rxjs/operators';
+import { Subject } from 'rxjs';
 import { NgdAnalytics, NgdIframeCommunicatorService } from '../../../@theme/services';
 import { NgdExampleView } from '../../enum.example-view';
 
@@ -51,7 +52,8 @@ export class NgdLiveExampleBlockComponent implements OnInit, AfterViewInit, OnDe
   }
 
   iframeHeight = 0;
-  alive: boolean = true;
+
+  private destroy$ = new Subject<void>();
 
   themes: {label: string; value: string}[] = [
     { label: 'Default', value: 'default' },
@@ -79,7 +81,7 @@ export class NgdLiveExampleBlockComponent implements OnInit, AfterViewInit, OnDe
 
   ngOnInit() {
     this.communicator.receive(this.content.id)
-      .pipe(takeWhile(() => this.alive))
+      .pipe(takeUntil(this.destroy$))
       .subscribe(it => {
         this.iframeHeight = it.height;
         this.loading = false;
@@ -97,7 +99,8 @@ export class NgdLiveExampleBlockComponent implements OnInit, AfterViewInit, OnDe
   }
 
   ngOnDestroy() {
-    this.alive = false;
+    this.destroy$.next();
+    this.destroy$.complete();
   }
 
   switchTheme(theme: string) {

docs/app/blocks/components/theme-block/theme-block.component.ts

@@ -6,8 +6,8 @@
 
 import {Component, Input, OnInit, OnDestroy, ChangeDetectionStrategy, ChangeDetectorRef} from '@angular/core';
 import { FormControl } from '@angular/forms';
-import { takeWhile, skip, distinctUntilChanged, debounceTime } from 'rxjs/operators';
-
+import { takeUntil, skip, distinctUntilChanged, debounceTime } from 'rxjs/operators';
+import { Subject } from 'rxjs';
 
 @Component({
   selector: 'ngd-theme-block',
@@ -18,7 +18,7 @@ import { takeWhile, skip, distinctUntilChanged, debounceTime } from 'rxjs/operat
 export class NgdThemeComponent implements OnInit, OnDestroy {
   searchControl = new FormControl();
 
-  private alive: boolean = true;
+  private destroy$ = new Subject<void>();
 
   properties = [];
   filtered = [];
@@ -47,7 +47,7 @@ export class NgdThemeComponent implements OnInit, OnDestroy {
 
   ngOnInit() {
     this.searchControl.valueChanges
-      .pipe(skip(1), distinctUntilChanged(), debounceTime(300), takeWhile(() => this.alive))
+      .pipe(skip(1), distinctUntilChanged(), debounceTime(300), takeUntil(this.destroy$))
       .subscribe((value: string) => {
         this.filtered = this.properties
           .filter(({ name }) => name.toLowerCase().includes(value.toLowerCase()));
@@ -60,6 +60,7 @@ export class NgdThemeComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy() {
-    this.alive = false;
+    this.destroy$.next();
+    this.destroy$.complete();
   }
 }

docs/app/documentation/documentation.component.ts

@@ -6,7 +6,8 @@
 
 import { Component, OnDestroy } from '@angular/core';
 import { Router } from '@angular/router';
-import { takeWhile, withLatestFrom, map } from 'rxjs/operators';
+import { takeUntil, withLatestFrom, map } from 'rxjs/operators';
+import { Subject } from 'rxjs';
 import { NbThemeService, NbMenuItem, NbSidebarService, NbMenuService } from '@nebular/theme';
 
 import { NgdMenuService } from '../@theme/services/menu.service';
@@ -24,7 +25,7 @@ export class NgdDocumentationComponent implements OnDestroy {
   collapsedBreakpoints = ['xs', 'is', 'sm', 'md', 'lg'];
   sidebarTag = 'menuSidebar';
 
-  private alive = true;
+  private destroy$ = new Subject<void>();
 
   constructor(
     private service: NgdMenuService,
@@ -42,7 +43,7 @@ export class NgdDocumentationComponent implements OnDestroy {
     this.router.events
       .pipe(
         withLatestFrom(this.themeService.onMediaQueryChange().pipe(map((changes: any[]) => changes[1]))),
-        takeWhile(() => this.alive),
+        takeUntil(this.destroy$),
       )
       .subscribe(([event, mediaQuery]: [any, NbMediaBreakpoint]) => {
         if (event.url === '/docs') {
@@ -62,6 +63,7 @@ export class NgdDocumentationComponent implements OnDestroy {
   }
 
   ngOnDestroy() {
-    this.alive = false;
+    this.destroy$.next();
+    this.destroy$.complete();
   }
 }

docs/app/documentation/page/page.component.ts

@@ -7,7 +7,8 @@
 import { Component, Inject, NgZone, OnDestroy, OnInit, ViewChild, AfterContentChecked } from '@angular/core';
 import { Title } from '@angular/platform-browser';
 import { ActivatedRoute, Router } from '@angular/router';
-import { filter, map, publishReplay, refCount, tap, takeWhile } from 'rxjs/operators';
+import { filter, map, publishReplay, refCount, tap, takeUntil } from 'rxjs/operators';
+import { Subject } from 'rxjs';
 import { NB_WINDOW } from '@nebular/theme';
 import { NgdTabbedBlockComponent } from '../../blocks/components/tabbed-block/tabbed-block.component';
 import { NgdStructureService } from '../../@theme/services';
@@ -20,7 +21,7 @@ import { NgdStructureService } from '../../@theme/services';
 export class NgdPageComponent implements OnInit, AfterContentChecked, OnDestroy {
 
   currentItem;
-  private alive = true;
+  private destroy$ = new Subject<void>();
 
   currentTabName: string = '';
 
@@ -52,13 +53,13 @@ export class NgdPageComponent implements OnInit, AfterContentChecked, OnDestroy
   }
 
   ngOnDestroy() {
-    this.alive = false;
+    this.destroy$.next();
+    this.destroy$.complete();
   }
 
   handlePageNavigation() {
     this.activatedRoute.params
       .pipe(
-        takeWhile(() => this.alive),
         filter((params: any) => params.subPage),
         map((params: any) => {
           const slag = `${params.page}_${params.subPage}`;
@@ -75,6 +76,7 @@ export class NgdPageComponent implements OnInit, AfterContentChecked, OnDestroy
         }),
         publishReplay(),
         refCount(),
+        takeUntil(this.destroy$),
       )
       .subscribe((item) => {
         this.currentItem = item;

docs/app/example/example.component.ts

@@ -1,7 +1,7 @@
 import { AfterViewInit, Component, Inject, OnDestroy, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
-import { of as observableOf } from 'rxjs';
-import { takeWhile, delay } from 'rxjs/operators';
+import { of as observableOf, Subject } from 'rxjs';
+import { takeUntil, delay } from 'rxjs/operators';
 import { NB_DOCUMENT, NbThemeService } from '@nebular/theme';
 import { NgdAnalytics, NgdIframeCommunicatorService } from '../@theme/services';
 
@@ -12,7 +12,7 @@ import { NgdAnalytics, NgdIframeCommunicatorService } from '../@theme/services';
 })
 export class NgdExampleComponent implements OnInit, AfterViewInit, OnDestroy {
   private id: string;
-  private alive: boolean = true;
+  private destroy$ = new Subject<void>();
 
   constructor(private communicator: NgdIframeCommunicatorService,
               private themeService: NbThemeService,
@@ -34,7 +34,8 @@ export class NgdExampleComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   ngOnDestroy() {
-    this.alive = false;
+    this.destroy$.next();
+    this.destroy$.complete();
   }
 
   private setupId() {
@@ -43,7 +44,7 @@ export class NgdExampleComponent implements OnInit, AfterViewInit, OnDestroy {
 
   private subscribeOnThemeSwitch() {
     this.communicator.receive(this.id)
-      .pipe(takeWhile(() => this.alive))
+      .pipe(takeUntil(this.destroy$))
       .subscribe(payload => this.changeTheme(payload))
   }
 

docs/articles/auth/oauth2.md

@@ -140,17 +140,18 @@ And finally, let's add code to our component to initiate the authentication. Fir
 })
 export class NbOAuth2LoginComponent implements OnDestroy {
 
-  alive = true;
+  private destroy$ = new Subject<void>();
 
   login() {
     this.authService.authenticate('google')
-      .pipe(takeWhile(() => this.alive))
+      .pipe(takeUntil(this.destroy$))
       .subscribe((authResult: NbAuthResult) => {
       });
   }
 
   ngOnDestroy(): void {
-    this.alive = false;
+    this.destroy$.next();
+    this.destroy$.complete();
   }
 }
 ```
@@ -170,11 +171,11 @@ Now, we need to configure that "callback" URL to be able to properly handle resp
 })
 export class NbOAuth2CallbackPlaygroundComponent implements OnDestroy {
 
-  alive = true;
+  private destroy$ = new Subject<void>();
 
   constructor(private authService: NbAuthService, private router: Router) {
     this.authService.authenticate('google')
-      .pipe(takeWhile(() => this.alive))
+      .pipe(takeUntil(this.destroy$))
       .subscribe((authResult: NbAuthResult) => {
         if (authResult.isSuccess()) {
           this.router.navigateByUrl('/pages/dashboard');
@@ -183,7 +184,8 @@ export class NbOAuth2CallbackPlaygroundComponent implements OnDestroy {
   }
 
   ngOnDestroy(): void {
-    this.alive = false;
+    this.destroy$.next();
+    this.destroy$.complete();
   }
 }
 ```