fix(*): handle rxjs subscriptions

Author: rychkog

package-lock.json

@@ -48,10 +48,6 @@
     "postversion": "git push origin master && git push --tags && npm run github-release && node publish.js",
     "webdriver-update": "node ./node_modules/protractor/bin/webdriver-manager update"
   },
-  "pre-commit": [
-    "lint",
-    "test"
-  ],
   "devDependencies": {
     "@angular/cli": "1.3.0",
     "@angular/common": "4.1.3",
@@ -86,7 +82,6 @@
     "karma-phantomjs-launcher": "1.0.4",
     "phantomjs-polyfill": "0.0.2",
     "phantomjs-prebuilt": "2.1.14",
-    "pre-commit": "1.2.2",
     "protractor": "5.1.2",
     "rimraf": "2.6.1",
     "rxjs": "5.4.0",

package.json

@@ -1,15 +1,15 @@
-import { Input, Component, OnInit, OnDestroy, ElementRef, Inject } from '@angular/core';
+import { Component, ElementRef, Inject, Input, OnDestroy, OnInit } from '@angular/core';
 import * as TreeTypes from './tree.types';
 import { Tree } from './tree';
 import { TreeController } from './tree-controller';
 import { NodeMenuService } from './menu/node-menu.service';
-import { NodeMenuItemSelectedEvent, NodeMenuItemAction } from './menu/menu.events';
+import { NodeMenuItemAction, NodeMenuItemSelectedEvent } from './menu/menu.events';
 import { NodeEditableEvent, NodeEditableEventAction } from './editable/editable.events';
 import { TreeService } from './tree.service';
 import * as EventUtils from './utils/event.utils';
 import { NodeDraggableEvent } from './draggable/draggable.events';
-import { Observable } from 'rxjs/Rx';
 import * as _get from 'lodash/get';
+import { Subscription } from 'rxjs/Subscription';
 
 @Component({
   selector: 'tree-internal',
@@ -66,6 +66,8 @@ export class TreeInternalComponent implements OnInit, OnDestroy {
   public isLeftMenuVisible = false;
   public controller: TreeController;
 
+  private subscriptions: Subscription[] = [];
+
   public constructor(@Inject(NodeMenuService) private nodeMenuService: NodeMenuService,
                      @Inject(TreeService) public treeService: TreeService,
                      @Inject(ElementRef) public element: ElementRef) {
@@ -79,16 +81,16 @@ export class TreeInternalComponent implements OnInit, OnDestroy {
 
     this.settings = this.settings || { rootIsVisible: true };
 
-    this.nodeMenuService.hideMenuStream(this.element)
+    this.subscriptions.push(this.nodeMenuService.hideMenuStream(this.element)
       .subscribe(() => {
         this.isRightMenuVisible = false;
         this.isLeftMenuVisible = false;
-      });
+      }));
 
-    this.treeService.unselectStream(this.tree)
-      .subscribe(() => this.isSelected = false);
+    this.subscriptions.push(this.treeService.unselectStream(this.tree)
+      .subscribe(() => this.isSelected = false));
 
-    this.treeService.draggedStream(this.tree, this.element)
+    this.subscriptions.push(this.treeService.draggedStream(this.tree, this.element)
       .subscribe((e: NodeDraggableEvent) => {
         if (this.tree.hasSibling(e.captured.tree)) {
           this.swapWithSibling(e.captured.tree, this.tree);
@@ -97,13 +99,15 @@ export class TreeInternalComponent implements OnInit, OnDestroy {
         } else {
           this.moveNodeToParentTreeAndRemoveFromPreviousOne(e, this.tree);
         }
-      });
+      }));
   }
 
   public ngOnDestroy(): void {
     if (_get(this.tree, 'node.id', '')) {
       this.treeService.deleteController(this.tree.node.id);
     }
+
+    this.subscriptions.forEach(sub => sub && sub.unsubscribe());
   }
 
   private swapWithSibling(sibling: Tree, tree: Tree): void {

src/tree-internal.component.ts

@@ -1,16 +1,20 @@
-import { Input, Component, OnInit, EventEmitter, Output, Inject, OnChanges, SimpleChanges, ViewChild } from '@angular/core';
+import {
+  Input, Component, OnInit, EventEmitter, Output, Inject, OnChanges, SimpleChanges, ViewChild,
+  OnDestroy
+} from '@angular/core';
 import { TreeService } from './tree.service';
 import * as TreeTypes from './tree.types';
 import { NodeEvent } from './tree.events';
 import { Tree } from './tree';
 import { TreeController } from './tree-controller';
+import { Subscription } from 'rxjs/Subscription';
 
 @Component({
   selector: 'tree',
   template: `<tree-internal #rootComponent [tree]="tree" [settings]="settings"></tree-internal>`,
   providers: [TreeService]
 })
-export class TreeComponent implements OnInit, OnChanges {
+export class TreeComponent implements OnInit, OnChanges, OnDestroy {
   private static EMPTY_TREE: Tree = new Tree({value: ''});
 
   /* tslint:disable:no-input-rename */
@@ -45,6 +49,8 @@ export class TreeComponent implements OnInit, OnChanges {
   public tree: Tree;
   @ViewChild('rootComponent') public rootComponent;
 
+  private subscriptions: Subscription[] = [];
+
   public constructor(@Inject(TreeService) private treeService: TreeService) {
   }
 
@@ -57,33 +63,33 @@ export class TreeComponent implements OnInit, OnChanges {
   }
 
   public ngOnInit(): void {
-    this.treeService.nodeRemoved$.subscribe((e: NodeEvent) => {
+    this.subscriptions.push(this.treeService.nodeRemoved$.subscribe((e: NodeEvent) => {
       this.nodeRemoved.emit(e);
-    });
+    }));
 
-    this.treeService.nodeRenamed$.subscribe((e: NodeEvent) => {
+    this.subscriptions.push(this.treeService.nodeRenamed$.subscribe((e: NodeEvent) => {
       this.nodeRenamed.emit(e);
-    });
+    }));
 
-    this.treeService.nodeCreated$.subscribe((e: NodeEvent) => {
+    this.subscriptions.push(this.treeService.nodeCreated$.subscribe((e: NodeEvent) => {
       this.nodeCreated.emit(e);
-    });
+    }));
 
-    this.treeService.nodeSelected$.subscribe((e: NodeEvent) => {
+    this.subscriptions.push(this.treeService.nodeSelected$.subscribe((e: NodeEvent) => {
       this.nodeSelected.emit(e);
-    });
+    }));
 
-    this.treeService.nodeMoved$.subscribe((e: NodeEvent) => {
+    this.subscriptions.push(this.treeService.nodeMoved$.subscribe((e: NodeEvent) => {
       this.nodeMoved.emit(e);
-    });
+    }));
 
-    this.treeService.nodeExpanded$.subscribe((e: NodeEvent) => {
+    this.subscriptions.push(this.treeService.nodeExpanded$.subscribe((e: NodeEvent) => {
       this.nodeExpanded.emit(e);
-    });
+    }));
 
-    this.treeService.nodeCollapsed$.subscribe((e: NodeEvent) => {
+    this.subscriptions.push(this.treeService.nodeCollapsed$.subscribe((e: NodeEvent) => {
       this.nodeCollapsed.emit(e);
-    });
+    }));
   }
 
   public getController(): TreeController {
@@ -93,4 +99,8 @@ export class TreeComponent implements OnInit, OnChanges {
   public getControllerByNodeId(id: number | string): TreeController {
     return this.treeService.getController(id);
   }
+
+  ngOnDestroy(): void {
+    this.subscriptions.forEach(sub => sub && sub.unsubscribe());
+  }
 }

src/tree.component.ts

@@ -1,17 +1,17 @@
 import {
-  NodeRemovedEvent,
-  NodeRenamedEvent,
+  NodeCollapsedEvent,
   NodeCreatedEvent,
-  NodeSelectedEvent,
-  NodeMovedEvent,
   NodeExpandedEvent,
-  NodeCollapsedEvent
+  NodeMovedEvent,
+  NodeRemovedEvent,
+  NodeRenamedEvent,
+  NodeSelectedEvent
 } from './tree.events';
-import { RenamableNode, TreeModel } from './tree.types';
+import { RenamableNode } from './tree.types';
 import { Tree } from './tree';
 import { TreeController } from './tree-controller';
-import { Subject, Observable } from 'rxjs/Rx';
-import { Injectable, Inject, ElementRef } from '@angular/core';
+import { Observable, Subject } from 'rxjs/Rx';
+import { ElementRef, Inject, Injectable } from '@angular/core';
 import { NodeDraggableService } from './draggable/node-draggable.service';
 import { NodeDraggableEvent } from './draggable/draggable.events';