message list is implemented

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

@@ -38,7 +38,10 @@
   <!-- CHAT CONTENT -->
   <div fxFlex="1 1 auto" class="chat-content">
     <!-- CHAT MESSAGES -->
-    <ucap-chat-messages></ucap-chat-messages>
+    <ucap-chat-messages
+      [messages]="eventList$ | async"
+      [loginRes]="loginRes$ | async"
+    ></ucap-chat-messages>
     <!-- CHAT MESSAGES -->
   </div>
   <!-- / CHAT CONTENT -->

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

@@ -1,5 +1,14 @@
 import { Component, OnInit } from '@angular/core';
 import { ucapAnimations } from '@ucap-webmessenger/ui';
+import { Store, select } from '@ngrx/store';
+import { NGXLogger } from 'ngx-logger';
+import { Observable } from 'rxjs';
+import { Info } from '@ucap-webmessenger/protocol-event';
+
+import * as AppStore from '@app/store';
+import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
+import { SessionStorageService } from '@ucap-webmessenger/web-storage';
+import { LoginInfo, KEY_LOGIN_INFO } from '@app/types';
 
 @Component({
   selector: 'app-layout-messenger-messages',
@@ -8,9 +17,26 @@ import { ucapAnimations } from '@ucap-webmessenger/ui';
   animations: ucapAnimations
 })
 export class MessagesComponent implements OnInit {
-  constructor() {}
+  loginRes$: Observable<LoginResponse>;
+  eventList$: Observable<Info[]>;
 
-  ngOnInit() {}
+  constructor(
+    private store: Store<any>,
+    private sessionStorageService: SessionStorageService,
+    private logger: NGXLogger
+  ) {}
+
+  ngOnInit() {
+    const loginInfo = this.sessionStorageService.get<LoginInfo>(KEY_LOGIN_INFO);
+
+    this.loginRes$ = this.store.pipe(
+      select(AppStore.AccountSelector.AuthenticationSelector.loginRes)
+    );
+
+    this.eventList$ = this.store.pipe(
+      select(AppStore.MessengerSelector.EventSelector.infoList)
+    );
+  }
 
   selectContact() {}
 }

projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html

@@ -4,17 +4,17 @@
     *ngFor="let message of messages; let i = index"
     class="message-row"
     [ngClass]="{
-      me: message.who === user.id,
+      me: message.senderSeq === loginRes.userSeq,
-      contact: message.who !== user.id,
+      contact: message.senderSeq !== loginRes.userSeq
-      'first-of-group': isFirstMessageOfGroup(message, i),
-      'last-of-group': isLastMessageOfGroup(message, i)
     }"
   >
     <img *ngIf="" src="" class="avatar" />
 
     <div class="bubble">
-      <div class="message">{{ message.message }}</div>
+      <div class="message">{{ message.sentMessage }}</div>
-      <div class="time secondary-text">{{ message.time | date: 'short' }}</div>
+      <div class="time secondary-text">
+        {{ message.sendDate | date: 'short' }}
+      </div>
     </div>
   </div>
 </div>

projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts

@@ -1,5 +1,8 @@
 import { Component, OnInit, Input } from '@angular/core';
 
+import { Info } from '@ucap-webmessenger/protocol-event';
+import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
+
 @Component({
   selector: 'ucap-chat-messages',
   templateUrl: './messages.component.html',
@@ -7,7 +10,9 @@ import { Component, OnInit, Input } from '@angular/core';
 })
 export class MessagesComponent implements OnInit {
   @Input()
-  messages: any[];
+  loginRes: LoginResponse;
+  @Input()
+  messages: Info[];
 
   constructor() {}