import { Component , ViewChild } from '@angular/core' ; import { Content , NavController , NavParams } from 'ionic-angular' ; import { AngularFireList , AngularFireObject } from 'angularfire2/database' ; import { AuthService } from './../../providers/auth.service' ; import { Chat } from './../../models/chat.model' ; import { ChatService } from './../../providers/chat.service' ; import { Message } from './../../models/message.model' ; import { MessageService } from './../../providers/message.service' ; import { User } from './../../models/user.model' ; import { UserService } from './../../providers/user.service' ; import * as firebase from 'firebase/app' ; import { Observable } from 'rxjs/Observable' ; @ Component ( { selector : 'page-chat' , templateUrl : 'chat.html' , } ) export class ChatPage { @ ViewChild ( Content ) content : Content ; messages : AngularFireList < Message > ; viewMessages : Observable < Message [ ] > ; pageTitle : string ; sender : User ; recipient : User ; private chat1 : AngularFireObject < Chat > ; private chat2 : AngularFireObject < Chat > ; constructor ( public authService , public chatService , public messageService , public navCtrl , public navParams , public userService ) { } ionViewCanEnter ( ) { return this . authService . authenticated ; } ionViewDidLoad ( ) { this . recipient = this . navParams . get ( 'recipientUser' ) ; this . pageTitle = this . recipient . name ; this . userService . mapObjectKey < User > ( this . userService . currentUser ) . first ( ) . subscribe ( ( currentUser ) => { this . sender = currentUser ; this . chat1 = this . chatService . getDeepChat ( this . sender . $key , this . recipient . $key ) ; this . chat2 = this . chatService . getDeepChat ( this . recipient . $key , this . sender . $key ) ; if ( this . recipient . photo ) { this . chatService . mapObjectKey ( this . chat1 ) . first ( ) . subscribe ( ( chat ) => { this . chatService . updatePhoto ( this . chat1 , chat . photo , this . recipient . photo ) ; } ) ; } let doSubscription = ( ) => { this . viewMessages = this . messageService . mapListKeys < Message > ( this . messages ) ; this . viewMessages . subscribe ( ( messages ) => { this . scrollToBottom ( ) ; } ) ; } ; this . messages = this . messageService . getMessages ( this . sender . $key , this . recipient . $key ) ; this . messages . valueChanges ( ) . first ( ) . subscribe ( ( messages ) => { if ( messages . length === 0 ) { this . messages = this . messageService . getMessages ( this . recipient . $key , this . sender . $key ) ; doSubscription ( ) ; } else { doSubscription ( ) ; } } ) ; } ) ; } sendMessage ( newMessage ) { if ( newMessage ) { let currentTimestamp = firebase . database . ServerValue . TIMESTAMP ; this . messageService . create ( new Message ( this . sender . $key , newMessage , currentTimestamp ) , this . messages ) . then ( ( ) => { this . chat1 . update ( { lastMessage : newMessage , timestamp : currentTimestamp } ) ; this . chat2 . update ( { lastMessage : newMessage , timestamp : currentTimestamp } ) ; } ) ; } } private scrollToBottom ( duration ? ) { setTimeout ( ( ) => { if ( this . content . _scroll ) { this . content . scrollToBottom ( duration || 300 ) ; } } , 50 ) ; } }