diff --git a/src/app/chat-message/chat-message.component.ts b/src/app/chat-message/chat-message.component.ts index c2d50c1..e15f6e1 100644 --- a/src/app/chat-message/chat-message.component.ts +++ b/src/app/chat-message/chat-message.component.ts @@ -1,9 +1,6 @@ -import { - Component, - OnInit, - Input -} from '@angular/core'; -import { Observable } from 'rxjs'; +import { Component, OnInit, Input, OnDestroy } from '@angular/core'; +import { Observable } from 'rxjs/Observable'; +import { Subscription } from 'rxjs/Subscription'; import { UsersService } from './../user/users.service'; import { ThreadsService } from './../thread/threads.service'; @@ -18,22 +15,26 @@ import { User } from './../user/user.model'; templateUrl: './chat-message.component.html', styleUrls: ['./chat-message.component.css'] }) -export class ChatMessageComponent implements OnInit { +export class ChatMessageComponent implements OnInit, OnDestroy { @Input() message: Message; currentUser: User; incoming: boolean; + private subscription: Subscription; - constructor(public UsersService: UsersService) { - } + constructor(public UsersService: UsersService) {} ngOnInit(): void { - this.UsersService.currentUser - .subscribe( - (user: User) => { - this.currentUser = user; - if (this.message.author && user) { - this.incoming = this.message.author.id !== user.id; - } - }); + this.subscription = this.UsersService.currentUser.subscribe( + (user: User) => { + this.currentUser = user; + if (this.message.author && user) { + this.incoming = this.message.author.id !== user.id; + } + } + ); + } + + ngOnDestroy(): void { + this.subscription.unsubscribe(); } } diff --git a/src/app/chat-nav-bar/chat-nav-bar.component.ts b/src/app/chat-nav-bar/chat-nav-bar.component.ts index a864116..fd7cb3b 100644 --- a/src/app/chat-nav-bar/chat-nav-bar.component.ts +++ b/src/app/chat-nav-bar/chat-nav-bar.component.ts @@ -1,10 +1,8 @@ -import { - Component, - Inject, - OnInit -} from '@angular/core'; +import { Component, Inject, OnInit, OnDestroy } from '@angular/core'; import * as _ from 'lodash'; +import { Subscription } from 'rxjs/Subscription'; + import { ThreadsService } from './../thread/threads.service'; import { MessagesService } from './../message/messages.service'; @@ -16,37 +14,45 @@ import { Message } from './../message/message.model'; templateUrl: './chat-nav-bar.component.html', styleUrls: ['./chat-nav-bar.component.css'] }) -export class ChatNavBarComponent implements OnInit { +export class ChatNavBarComponent implements OnInit, OnDestroy { unreadMessagesCount: number; + private subscription: Subscription; - constructor(public messagesService: MessagesService, - public threadsService: ThreadsService) { - } + constructor( + public messagesService: MessagesService, + public threadsService: ThreadsService + ) {} ngOnInit(): void { - this.messagesService.messages + this.subscription = this.messagesService.messages .combineLatest( this.threadsService.currentThread, - (messages: Message[], currentThread: Thread) => - [currentThread, messages] ) + (messages: Message[], currentThread: Thread) => [ + currentThread, + messages + ] + ) .subscribe(([currentThread, messages]: [Thread, Message[]]) => { - this.unreadMessagesCount = - _.reduce( - messages, - (sum: number, m: Message) => { - const messageIsInCurrentThread: boolean = m.thread && - currentThread && - (currentThread.id === m.thread.id); - // note: in a "real" app you should also exclude - // messages that were authored by the current user b/c they've - // already been "read" - if (m && !m.isRead && !messageIsInCurrentThread) { - sum = sum + 1; - } - return sum; - }, - 0); + this.unreadMessagesCount = _.reduce( + messages, + (sum: number, m: Message) => { + const messageIsInCurrentThread: boolean = + m.thread && currentThread && currentThread.id === m.thread.id; + // note: in a "real" app you should also exclude + // messages that were authored by the current user b/c they've + // already been "read" + if (m && !m.isRead && !messageIsInCurrentThread) { + sum = sum + 1; + } + return sum; + }, + 0 + ); }); } + + ngOnDestroy(): void { + this.subscription.unsubscribe(); + } } diff --git a/src/app/chat-thread/chat-thread.component.ts b/src/app/chat-thread/chat-thread.component.ts index 9d9db81..92c3975 100644 --- a/src/app/chat-thread/chat-thread.component.ts +++ b/src/app/chat-thread/chat-thread.component.ts @@ -3,9 +3,11 @@ import { OnInit, Input, Output, - EventEmitter + EventEmitter, + OnDestroy } from '@angular/core'; -import { Observable } from 'rxjs'; +import { Observable } from 'rxjs/Observable'; +import { Subscription } from 'rxjs/Subscription'; import { ThreadsService } from './../thread/threads.service'; import { Thread } from '../thread/thread.model'; @@ -14,24 +16,28 @@ import { Thread } from '../thread/thread.model'; templateUrl: './chat-thread.component.html', styleUrls: ['./chat-thread.component.css'] }) -export class ChatThreadComponent implements OnInit { +export class ChatThreadComponent implements OnInit, OnDestroy { @Input() thread: Thread; selected = false; + private subscription: Subscription; - constructor(public threadsService: ThreadsService) { - } + constructor(public threadsService: ThreadsService) {} ngOnInit(): void { - this.threadsService.currentThread - .subscribe( (currentThread: Thread) => { - this.selected = currentThread && - this.thread && - (currentThread.id === this.thread.id); - }); + this.subscription = this.threadsService.currentThread.subscribe( + (currentThread: Thread) => { + this.selected = + currentThread && this.thread && currentThread.id === this.thread.id; + } + ); } clicked(event: any): void { this.threadsService.setCurrentThread(this.thread); event.preventDefault(); } + + ngOnDestroy(): void { + this.subscription.unsubscribe(); + } } diff --git a/src/app/chat-window/chat-window.component.ts b/src/app/chat-window/chat-window.component.ts index 0f3e736..8440bb3 100644 --- a/src/app/chat-window/chat-window.component.ts +++ b/src/app/chat-window/chat-window.component.ts @@ -3,9 +3,11 @@ import { Inject, ElementRef, OnInit, - ChangeDetectionStrategy + ChangeDetectionStrategy, + OnDestroy } from '@angular/core'; -import { Observable } from 'rxjs'; +import { Observable } from 'rxjs/Observable'; +import { Subscription } from 'rxjs/Subscription'; import { User } from '../user/user.model'; import { UsersService } from '../user/users.service'; @@ -20,41 +22,39 @@ import { MessagesService } from '../message/messages.service'; styleUrls: ['./chat-window.component.css'], changeDetection: ChangeDetectionStrategy.OnPush }) -export class ChatWindowComponent implements OnInit { +export class ChatWindowComponent implements OnInit, OnDestroy { messages: Observable; currentThread: Thread; draftMessage: Message; currentUser: User; - constructor(public messagesService: MessagesService, - public threadsService: ThreadsService, - public UsersService: UsersService, - public el: ElementRef) { - } + private subscription: Subscription; + + constructor( + public messagesService: MessagesService, + public threadsService: ThreadsService, + public UsersService: UsersService, + public el: ElementRef + ) {} ngOnInit(): void { this.messages = this.threadsService.currentThreadMessages; this.draftMessage = new Message(); - this.threadsService.currentThread.subscribe( - (thread: Thread) => { - this.currentThread = thread; - }); + this.threadsService.currentThread.subscribe((thread: Thread) => { + this.currentThread = thread; + }); - this.UsersService.currentUser - .subscribe( - (user: User) => { - this.currentUser = user; - }); + this.UsersService.currentUser.subscribe((user: User) => { + this.currentUser = user; + }); - this.messages - .subscribe( - (messages: Array) => { - setTimeout(() => { - this.scrollToBottom(); - }); - }); + this.subscription = this.messages.subscribe((messages: Array) => { + setTimeout(() => { + this.scrollToBottom(); + }); + }); } onEnter(event: any): void { @@ -72,8 +72,13 @@ export class ChatWindowComponent implements OnInit { } scrollToBottom(): void { - const scrollPane: any = this.el - .nativeElement.querySelector('.msg-container-base'); + const scrollPane: any = this.el.nativeElement.querySelector( + '.msg-container-base' + ); scrollPane.scrollTop = scrollPane.scrollHeight; } + + ngOnDestroy(): void { + this.subscription.unsubscribe(); + } }