Added take until methods to observables

package.json

@@ -5,6 +5,7 @@
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
+    "aot": "ng serve --aot",
     "https": "ng serve --ssl --ssl-key key.pem --ssl-cert certificate.pem",
     "build": "ng build",
     "predeploy": "npm run build-prod && npm run precache",

src/app/_services/editor.service.ts

@@ -4,6 +4,7 @@ import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/operator/catch';
 import 'rxjs/add/operator/map';
+import 'rxjs/add/observable/forkJoin';
 import 'rxjs/add/observable/throw';
 
 import { AuthenticationService } from 'app/_services/authentication.service';

src/app/app.component.html

@@ -1,2 +1,2 @@
-<app-nav-bar (clicked)="clicked($event)"></app-nav-bar>
+<app-nav-bar></app-nav-bar>
 <router-outlet></router-outlet>

src/app/article-portal/create-article-modal/create-article-modal.component.ts

@@ -1,7 +1,9 @@
-import { Component } from '@angular/core';
+import { Component, OnDestroy } from '@angular/core';
 import { FormBuilder, FormGroup, FormControl, Validators, FormsModule } from '@angular/forms';
 import { Router } from '@angular/router';
 import { MatDialogRef } from '@angular/material';
+import { Subject } from 'rxjs/Subject';
+import 'rxjs/add/operator/takeUntil';
 
 import { EditorService } from 'app/_services/editor.service';
 
@@ -10,10 +12,12 @@ import { EditorService } from 'app/_services/editor.service';
   templateUrl: './create-article-modal.component.html',
   styleUrls: ['./create-article-modal.component.scss']
 })
-export class CreateArticleModalComponent {
+export class CreateArticleModalComponent implements OnDestroy {
 
-  title = 'Create a new article';
-  formGroup: FormGroup;
+  private destroyed: Subject<boolean> = new Subject<boolean>();
+
+  public title = 'Create a new article';
+  public formGroup: FormGroup;
 
   constructor(
     private fb: FormBuilder,
@@ -27,13 +31,19 @@ export class CreateArticleModalComponent {
     });
   }
 
+  ngOnDestroy() {
+    this.destroyed.next();
+    this.destroyed.complete();
+  }
+
   create(formValue: any, isFormValid: boolean) {
     if (isFormValid) {
 
       const articleTitle = formValue['articleTitle'];
       const articleDescription = formValue['articleDescription'];
 
       this.editorService.createArticle(articleTitle, articleDescription)
+        .takeUntil(this.destroyed)
         .subscribe(results => {
           const id = results._id;
           if (!Number.isNaN(id)) {

src/app/article-portal/delete-article-modal/delete-article-modal.component.ts

@@ -1,5 +1,7 @@
-import { Component, Inject } from '@angular/core';
+import { Component, Inject, OnDestroy } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
+import { Subject } from 'rxjs/Subject';
+import 'rxjs/add/operator/takeUntil';
 
 import { EditorService } from 'app/_services/editor.service';
 import { Article } from 'app/_models/Article';
@@ -9,8 +11,10 @@ import { Article } from 'app/_models/Article';
   templateUrl: './delete-article-modal.component.html',
   styleUrls: ['./delete-article-modal.component.scss']
 })
-export class DeleteArticleModalComponent {
+export class DeleteArticleModalComponent implements OnDestroy {
 
+  private destroyed: Subject<boolean> = new Subject<boolean>();
+
   public article: Article;
 
   constructor(
@@ -20,8 +24,14 @@ export class DeleteArticleModalComponent {
     this.article = data;
   }
 
+  ngOnDestroy() {
+    this.destroyed.next();
+    this.destroyed.complete();
+  }
+
   deleteArticle() {
     this.editorService.deleteArticle(this.data)
+      .takeUntil(this.destroyed)
       .subscribe(result => {
         if (result) {
           this.dialogRef.close('closed');

src/app/article-portal/editor/editor.component.ts

@@ -1,9 +1,11 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
 import { FormBuilder, FormGroup, FormControl, Validators, FormsModule } from '@angular/forms';
 import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
 
 import { Observable } from 'rxjs/Observable';
+import { Subject } from 'rxjs/Subject';
+import 'rxjs/add/operator/takeUntil';
 
 import { EditorService } from 'app/_services/editor.service';
 import { ArticleService } from 'app/_services/article.service';
@@ -21,7 +23,7 @@ import { SnackbarMessagingService } from 'app/_services/snackbar-messaging.servi
   templateUrl: './editor.component.html',
   styleUrls: ['./editor.component.scss']
 })
-export class EditorComponent implements OnInit {
+export class EditorComponent implements OnInit, OnDestroy {
 
   private tb = ['fullscreen', 'bold', 'italic', 'underline', 'strikeThrough',
   'subscript', 'superscript', '|', 'fontFamily', 'fontSize', 'color', 'inlineStyle',
@@ -52,6 +54,8 @@ export class EditorComponent implements OnInit {
     toolbarButtonsXS: this.tb,
   };
   private content: string;
+  private destroyed: Subject<boolean> = new Subject<boolean>();
+
 
   public editorContent: string;
   public editing = false;
@@ -94,6 +98,7 @@ export class EditorComponent implements OnInit {
   ngOnInit() {
     this.selectedTags = new Set<string>();
     this.formGroup.get('tags').valueChanges
+      .takeUntil(this.destroyed)
       .subscribe((input) => {
         this.filteredTags = this.filterTags(input);
       });
@@ -106,6 +111,7 @@ export class EditorComponent implements OnInit {
       this.editorService.setArticleId(params['id']);
 
       this.articleService.getArticle(id)
+        .takeUntil(this.destroyed)
         .subscribe(article => {
           this.formGroup.setValue({
             'articleTitle': article.title,
@@ -122,6 +128,11 @@ export class EditorComponent implements OnInit {
     });
   }
 
+  ngOnDestroy() {
+    this.destroyed.next();
+    this.destroyed.complete();
+  }
+
   updateContent(editor) {
     this.content = editor.html.get();
   }
@@ -139,13 +150,15 @@ export class EditorComponent implements OnInit {
         formData.append('coverPhoto', file);
 
         this.editorService.saveArticle(this.content, articleTitle, articleDescription, tags, formData)
+          .takeUntil(this.destroyed)
           .subscribe(result => {
             this.snackbarMessageService.displayError('Successfully saved article', 4000);
           }, error => {
             this.snackbarMessageService.displayError('There was an error while attempting to save this article', 4000);
           });
       } else {
         this.editorService.saveArticle(this.content, articleTitle, articleDescription, tags)
+          .takeUntil(this.destroyed)
           .subscribe(result => {
             this.snackbarMessageService.displayError('Successfully saved article', 4000);
           }, error => {
@@ -164,6 +177,7 @@ export class EditorComponent implements OnInit {
 
   publishArticle() {
     this.editorService.publishArticle()
+      .takeUntil(this.destroyed)
       .subscribe(result => {
         this.snackbarMessageService.displayError('Successfully published article', 4000);
       }, error => {
@@ -196,6 +210,7 @@ export class EditorComponent implements OnInit {
       } else {
         const input = this.tagInput;
         this.editorService.addTag(input)
+          .takeUntil(this.destroyed)
           .subscribe(result => {
             this.selectedTags.add(input);
             this.snackbarMessageService.displayError(`Added the tag: ${input}`, 2000);
@@ -226,13 +241,14 @@ export class EditorComponent implements OnInit {
       }
     });
 
-    dialogRef.afterClosed().subscribe(result => {
-      if (result) {
-        this.formGroup.patchValue({
-          coverPhoto: result
-        });
-      }
-    });
+    dialogRef.afterClosed()
+      .subscribe(result => {
+        if (result) {
+          this.formGroup.patchValue({
+            coverPhoto: result
+          });
+        }
+      });
   }
 
   previewImage(): boolean {

src/app/article-portal/image-preview/image-preview.component.ts

@@ -1,6 +1,7 @@
 import { Component, Inject, OnInit, OnDestroy } from '@angular/core';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
 import Cropper from 'cropperjs'
+
 import { SnackbarMessagingService } from 'app/_services/snackbar-messaging.service';
 import { Image } from 'app/_models/Image';
 

src/app/article-portal/settings-modal/settings-modal.component.ts

@@ -1,30 +1,33 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';
 import { MatDialogRef, MatDialog } from '@angular/material';
+import { Subject } from 'rxjs/Subject';
+import 'rxjs/add/operator/takeUntil';
 
 import { AuthenticationService } from 'app/_services/authentication.service';
 import { AuthorService } from 'app/_services/author.service';
 import { SnackbarMessagingService } from 'app/_services/snackbar-messaging.service';
-
 import { FileValidator } from 'app/_directives/fileValidator.directive';
+
 import { ImagePreviewComponent } from 'app/article-portal/image-preview/image-preview.component';
 
 @Component({
   selector: 'app-settings-modal',
   templateUrl: './settings-modal.component.html',
   styleUrls: ['./settings-modal.component.scss']
 })
-export class SettingsModalComponent implements OnInit {
+export class SettingsModalComponent implements OnInit, OnDestroy {
+
+  private profilePictureUpdated: boolean;
+  private destroyed: Subject<boolean> = new Subject<boolean>();
 
-  settingsGroup: FormGroup;
-  fileContent: any;
-  username: string;
+  public settingsGroup: FormGroup;
+  public username: string;
   public saveInProgress: boolean;
   public image: any;
-  private profilePictureUpdated: boolean = false;
 
   constructor(
-    fb: FormBuilder,
+    private fb: FormBuilder,
     private auth: AuthenticationService,
     private dialogRef: MatDialogRef<SettingsModalComponent>,
     private dialog: MatDialog,
@@ -39,6 +42,7 @@ export class SettingsModalComponent implements OnInit {
 
   ngOnInit() {
     this.authorService.getAuthor()
+      .takeUntil(this.destroyed)
       .subscribe(author => {
         this.settingsGroup.setValue({
           'name': author.name,
@@ -52,6 +56,11 @@ export class SettingsModalComponent implements OnInit {
     this.saveInProgress = false;
   }
 
+  ngOnDestroy() {
+    this.destroyed.next();
+    this.destroyed.complete();
+  }
+
   saveSettings(formValue: any, isFormValid: boolean) {
     if (isFormValid) {
       this.saveInProgress = true;
@@ -65,8 +74,8 @@ export class SettingsModalComponent implements OnInit {
         formData.append('profilePicture', file);
 
         this.authorService.updateUserSettings(this.username, name, email, formData)
+          .takeUntil(this.destroyed)
           .subscribe(result => {
-            console.log('Results', result);
             this.saveInProgress = false;
             this.snackBarMessagingService.displayError('Updated user settings', 4000);
             this.dialogRef.close({name, image: result.data.profilePicture || ''});
@@ -76,6 +85,7 @@ export class SettingsModalComponent implements OnInit {
           });
       } else {
         this.authorService.updateUserSettings(this.username, name, email)
+          .takeUntil(this.destroyed)
           .subscribe(result => {
             this.saveInProgress = false;
             this.snackBarMessagingService.displayError('Updated user settings', 4000);
@@ -119,14 +129,16 @@ export class SettingsModalComponent implements OnInit {
       }
     });
 
-    dialogRef.afterClosed().subscribe(result => {
-      if (result) {
-        this.settingsGroup.patchValue({
-          profilePicture: result
-        });
-        this.profilePictureUpdated = true;
-      }
-    });
+    dialogRef.afterClosed()
+      .takeUntil(this.destroyed)
+      .subscribe(result => {
+        if (result) {
+          this.settingsGroup.patchValue({
+            profilePicture: result
+          });
+          this.profilePictureUpdated = true;
+        }
+      });
   }
 
   previewImage(): boolean {