next-ucap-messenger/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts

import {
  Component,
  OnInit,
  OnDestroy,
  AfterViewChecked,
  ViewChild,
  ElementRef
} from '@angular/core';
import { ucapAnimations } from '@ucap-webmessenger/ui';
import { Store, select } from '@ngrx/store';
import { NGXLogger } from 'ngx-logger';
import { Observable, Subscription } from 'rxjs';
import { Info, EventType } from '@ucap-webmessenger/protocol-event';

import * as AppStore from '@app/store';
import * as EventStore from '@app/store/messenger/event';
import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
import { SessionStorageService } from '@ucap-webmessenger/web-storage';
import { LoginInfo, KEY_LOGIN_INFO } from '@app/types';
import { RoomInfo, UserInfo } from '@ucap-webmessenger/protocol-room';
import { tap } from 'rxjs/operators';

@Component({
  selector: 'app-layout-messenger-messages',
  templateUrl: './messages.component.html',
  styleUrls: ['./messages.component.scss'],
  animations: ucapAnimations
})
export class MessagesComponent implements OnInit, OnDestroy, AfterViewChecked {
  @ViewChild('messageBoxContainer', { static: true })
  private messageBoxContainer: ElementRef;

  loginRes: LoginResponse;
  loginResSubscription: Subscription;
  eventList$: Observable<Info[]>;
  roomInfo: RoomInfo;
  roomInfoSubscription: Subscription;
  userInfoList$: Observable<UserInfo[]>;
  eventListProcessing$: Observable<boolean>;

  constructor(
    private store: Store<any>,
    private sessionStorageService: SessionStorageService,
    private logger: NGXLogger
  ) {}

  ngOnInit() {
    const loginInfo = this.sessionStorageService.get<LoginInfo>(KEY_LOGIN_INFO);

    this.loginResSubscription = this.store
      .pipe(
        select(AppStore.AccountSelector.AuthenticationSelector.loginRes),
        tap(loginRes => {
          this.loginRes = loginRes;
        })
      )
      .subscribe();

    this.roomInfoSubscription = this.store
      .pipe(
        select(AppStore.MessengerSelector.RoomSelector.roomInfo),
        tap(roomInfo => {
          this.roomInfo = roomInfo;
        })
      )
      .subscribe();

    this.userInfoList$ = this.store.pipe(
      select(AppStore.MessengerSelector.RoomSelector.userInfoList)
    );

    this.eventListProcessing$ = this.store.pipe(
      select(AppStore.MessengerSelector.EventSelector.infoListProcessing)
    );

    this.eventList$ = this.store.pipe(
      select(AppStore.MessengerSelector.EventSelector.infoList)
    );

    this.scrollToBottomForMessageBoxContainer();
  }

  ngOnDestroy(): void {
    if (!!this.loginResSubscription) {
      this.loginResSubscription.unsubscribe();
    }
    if (!!this.roomInfoSubscription) {
      this.roomInfoSubscription.unsubscribe();
    }
  }

  ngAfterViewChecked(): void {
    this.scrollToBottomForMessageBoxContainer();
  }

  selectContact() {}

  onSendMessage(message: string) {
    this.store.dispatch(
      EventStore.send({
        senderSeq: this.loginRes.userSeq,
        req: {
          roomSeq: this.roomInfo.roomSeq,
          eventType: EventType.Character,
          sentMessage: message
        }
      })
    );
  }

  private scrollToBottomForMessageBoxContainer(): void {
    try {
      this.messageBoxContainer.nativeElement.scrollTop = this.messageBoxContainer.nativeElement.scrollHeight;
    } catch (err) {}
  }
}