From 5cdb2b18d1a8ac4bff7d61a156b208e605a1a799 Mon Sep 17 00:00:00 2001
From: Richard Park <richard.park@loafle.com>
Date: Thu, 10 Oct 2019 15:53:08 +0900
Subject: [PATCH] scroll to bottom of message box is implemented

---
 .../components/messages.component.html        |  2 +-
 .../components/messages.component.ts          | 26 +++++++++++++++++--
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html
index 05be38b7..60985e68 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html
@@ -39,7 +39,7 @@
     mode="indeterminate"
   ></mat-progress-bar>
   <!-- CHAT CONTENT -->
-  <div fxFlex="1 1 auto" class="chat-content">
+  <div fxFlex="1 1 auto" class="chat-content" #messageBoxContainer>
     <!-- CHAT MESSAGES -->
     <ucap-chat-messages
       [messages]="eventList$ | async"
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts
index 93170636..c929bc5a 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts
@@ -1,4 +1,11 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+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';
@@ -19,7 +26,10 @@ import { tap } from 'rxjs/operators';
   styleUrls: ['./messages.component.scss'],
   animations: ucapAnimations
 })
-export class MessagesComponent implements OnInit, OnDestroy {
+export class MessagesComponent implements OnInit, OnDestroy, AfterViewChecked {
+  @ViewChild('messageBoxContainer', { static: true })
+  private messageBoxContainer: ElementRef;
+
   loginRes: LoginResponse;
   loginResSubscription: Subscription;
   eventList$: Observable<Info[]>;
@@ -61,6 +71,8 @@ export class MessagesComponent implements OnInit, OnDestroy {
     this.eventList$ = this.store.pipe(
       select(AppStore.MessengerSelector.EventSelector.infoList)
     );
+
+    this.scrollToBottomForMessageBoxContainer();
   }
 
   ngOnDestroy(): void {
@@ -72,6 +84,10 @@ export class MessagesComponent implements OnInit, OnDestroy {
     }
   }
 
+  ngAfterViewChecked(): void {
+    this.scrollToBottomForMessageBoxContainer();
+  }
+
   selectContact() {}
 
   onSendMessage(message: string) {
@@ -86,4 +102,10 @@ export class MessagesComponent implements OnInit, OnDestroy {
       })
     );
   }
+
+  private scrollToBottomForMessageBoxContainer(): void {
+    try {
+      this.messageBoxContainer.nativeElement.scrollTop = this.messageBoxContainer.nativeElement.scrollHeight;
+    } catch (err) {}
+  }
 }