import { Component , OnInit } from '@angular/core' ; import { ActivatedRoute , Router } from '@angular/router' ; import { ChatsService } from '../../../services/chats.service' ; import { AddChat , AddGroup , GetChat } from '../../../../graphql' ; import { combineLatest } from 'rxjs' ; import { Location } from '@angular/common' ; @ Component ( { template : `
    <app-toolbar>
      <button class="navigation" mat-button (click)="goToChats()">
        <mat-icon aria-label="Icon-button with an arrow back icon">arrow_back</mat-icon>
      </button>
      <img class="profile-pic" src="assets/default-profile-pic.jpg">
      <div class="title">{{ name }}</div>
    </app-toolbar>
    <div class="container">
      <app-messages-list [items]="messages" [isGroup]="isGroup"
                         libSelectableList="multiple_press" (multiple)="deleteMessages($event)">
        <app-confirm-selection #confirmSelection></app-confirm-selection>
      </app-messages-list>
      <app-new-message (newMessage)="addMessage($event)"></app-new-message>
    </div>
  ` , styleUrls : [ './chat.component.scss' ] } ) export class ChatComponent implements OnInit { chatId : string ; messages : GetChat . Messages [ ] ; name : string ; isGroup : boolean ; optimisticUI : boolean ; constructor ( private route , private router , private location , private chatsService ) { } ngOnInit ( ) { combineLatest ( this . route . params , this . route . queryParams , ( params , queryParams ) => ( { params , queryParams } ) ) . subscribe ( ( { params : { id : chatId } , queryParams : { oui } } ) => { this . chatId = chatId ; this . optimisticUI = oui ; if ( this . optimisticUI ) { this . chatsService . addChat$ . subscribe ( ( { data } ) => { this . chatId = ( < AddChat . Mutation > data ) . addChat ? ( < AddChat . Mutation > data ) . addChat . id : ( < AddGroup . Mutation > data ) . addGroup . id ; console . log ( `Switching from the Optimistic UI id ${ chatId } to ${ this . chatId }` ) ; this . location . go ( `chat/${ this . chatId }` ) ; this . optimisticUI = false ; } ) ; } this . chatsService . getChat ( chatId , this . optimisticUI ) . chat$ . subscribe ( chat => { this . messages = chat . messages ; this . name = chat . name ; this . isGroup = chat . isGroup ; } ) ; } ) ; } goToChats ( ) { this . router . navigate ( [ '/chats' ] ) ; } addMessage ( content ) { this . chatsService . addMessage ( this . chatId , content ) . subscribe ( ) ; } deleteMessages ( messageIds ) { this . chatsService . removeMessages ( this . chatId , this . messages , messageIds ) . subscribe ( ) ; } }