chat list is modified

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.html

@@ -1,3 +1,4 @@
-<div *ngFor="let room of roomList$ | async" (click)="onSelectedRoom(room)">
-  {{ room.finalEventMessage }}
+<div *ngFor="let room of roomList" (click)="onSelectedRoom(room)">
+  <div class="room-name">{{ getRoomName(room) }}</div>
+  <div class="room-name">{{ room.finalEventMessage }}</div>
 </div>

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.scss

@@ -0,0 +1,5 @@
+.room-name {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.ts

@@ -1,11 +1,16 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import { ucapAnimations } from '@ucap-webmessenger/ui';
 import { NGXLogger } from 'ngx-logger';
 import { Store, select } from '@ngrx/store';
-import { Observable } from 'rxjs';
-import { RoomInfo } from '@ucap-webmessenger/protocol-room';
+import { Subscription } from 'rxjs';
+import {
+  RoomInfo,
+  UserInfoShort,
+  UserInfo as RoomUserInfo
+} from '@ucap-webmessenger/protocol-room';
 import * as AppStore from '@app/store';
 import * as ChatStore from '@app/store/messenger/chat';
+import { tap } from 'rxjs/operators';
 
 @Component({
   selector: 'app-layout-chat-left-sidenav-chat',
@@ -13,18 +18,78 @@ import * as ChatStore from '@app/store/messenger/chat';
   styleUrls: ['./chat.component.scss'],
   animations: ucapAnimations
 })
-export class ChatComponent implements OnInit {
-  roomList$: Observable<RoomInfo[]>;
+export class ChatComponent implements OnInit, OnDestroy {
+  roomList: RoomInfo[];
+  roomUserInfoMap: {
+    [param: string]: {
+      userInfoShortList: UserInfoShort[];
+      userInfoList: RoomUserInfo[];
+    };
+  };
+
+  roomSubscription: Subscription;
 
   constructor(private store: Store<any>, private logger: NGXLogger) {}
 
   ngOnInit() {
-    this.roomList$ = this.store.pipe(
-      select(AppStore.MessengerSelector.SyncSelector.roomList)
-    );
+    this.roomSubscription = this.store
+      .pipe(
+        select(AppStore.MessengerSelector.SyncSelector.room),
+        tap(room => {
+          this.roomList = room.roomList;
+          this.roomUserInfoMap = room.roomUserInfoMap;
+        })
+      )
+      .subscribe();
+  }
+
+  ngOnDestroy(): void {
+    if (!!this.roomSubscription) {
+      this.roomSubscription.unsubscribe();
+    }
   }
 
   onSelectedRoom(roomInfo: RoomInfo) {
     this.store.dispatch(ChatStore.selectedRoom({ roomSeq: roomInfo.roomSeq }));
   }
+
+  getRoomName(roomInfo: RoomInfo): string {
+    if (!!roomInfo.roomName && '' !== roomInfo.roomName.trim()) {
+      return roomInfo.roomName;
+    }
+
+    if (
+      !!this.roomUserInfoMap[roomInfo.roomSeq].userInfoList &&
+      0 < this.roomUserInfoMap[roomInfo.roomSeq].userInfoList.length
+    ) {
+      let roomName = '';
+      this.roomUserInfoMap[roomInfo.roomSeq].userInfoList.forEach(
+        (roomUserInfo, index) => {
+          if (0 === index) {
+            roomName = roomName.concat('', roomUserInfo.name);
+          } else {
+            roomName = roomName.concat(',', roomUserInfo.name);
+          }
+        }
+      );
+      return roomName;
+    }
+
+    if (
+      !!this.roomUserInfoMap[roomInfo.roomSeq].userInfoShortList &&
+      0 < this.roomUserInfoMap[roomInfo.roomSeq].userInfoShortList.length
+    ) {
+      let roomName = '';
+      this.roomUserInfoMap[roomInfo.roomSeq].userInfoShortList.forEach(
+        (roomUserInfo, index) => {
+          if (0 === index) {
+            roomName = roomName.concat('', roomUserInfo.name);
+          } else {
+            roomName = roomName.concat(',', roomUserInfo.name);
+          }
+        }
+      );
+      return roomName;
+    }
+  }
 }

projects/ucap-webmessenger-app/src/app/store/messenger/chat/actions.ts

@@ -1,6 +1,15 @@
 import { createAction, props } from '@ngrx/store';
+import { Info } from '@ucap-webmessenger/protocol-event';
 
 export const selectedRoom = createAction(
   '[Messenger::Chat] selectedRoom',
   props<{ roomSeq: string }>()
 );
+
+export const newEventMessage = createAction(
+  '[Messenger::Chat] newEventMessage',
+  props<{
+    roomSeq: string;
+    info: Info;
+  }>()
+);

projects/ucap-webmessenger-app/src/app/store/messenger/event/effects.ts

@@ -143,6 +143,8 @@ export class Effects {
           if (roomInfo.roomSeq === action.roomSeq) {
             this.store.dispatch(appendInfoList({ info: action.info }));
           }
+
+          this.store.dispatch(ChatStore.newEventMessage(action));
         })
       );
     },

projects/ucap-webmessenger-app/src/app/store/messenger/sync/reducers.ts

@@ -2,6 +2,9 @@ import { createReducer, on } from '@ngrx/store';
 import { initialState } from './state';
 import { buddy2Success, group2Success, roomSuccess } from './actions';
 
+import * as ChatStore from '@app/store/messenger/chat';
+import { RoomInfo } from '@ucap-webmessenger/protocol-room';
+
 export const reducer = createReducer(
   initialState,
   on(buddy2Success, (state, action) => {
@@ -27,5 +30,25 @@ export const reducer = createReducer(
       roomUserInfoMap: action.roomUserInfoMap,
       roomSyncDate: action.syncDate
     };
+  }),
+
+  on(ChatStore.newEventMessage, (state, action) => {
+    const roomList: RoomInfo[] = [];
+
+    state.roomList.forEach((roomInfo, index) => {
+      if (roomInfo.roomSeq === action.roomSeq) {
+        roomList.push({
+          ...roomInfo,
+          finalEventMessage: action.info.sentMessage
+        });
+      } else {
+        roomList.push(roomInfo);
+      }
+    });
+
+    return {
+      ...state,
+      roomList
+    };
   })
 );

projects/ucap-webmessenger-app/src/app/store/messenger/sync/state.ts

@@ -60,9 +60,14 @@ export function selectors<S>(selector: Selector<any, State>) {
         };
       }
     ),
-    roomList: createSelector(
+    room: createSelector(
       selector,
-      (state: State) => state.roomList
+      (state: State) => {
+        return {
+          roomList: state.roomList,
+          roomUserInfoMap: state.roomUserInfoMap
+        };
+      }
     ),
     roomSyncDate: createSelector(
       selector,

projects/ucap-webmessenger-protocol-room/src/lib/types/room.type.ts

@@ -1,11 +1,11 @@
 export enum RoomType {
-  // S: 1: 1 대화
+  /** S: 1: 1 대화 */
   Single = 'S',
-  // M: 멀티대화
+  /** M: 멀티대화 */
   Multi = 'M',
-  // B: Bot대화
+  /** B: Bot대화 */
   Bot = 'B',
-  // A: 알림방
+  /** A: 알림방 */
   Allim = 'A',
 
   // // X: 확장대화 deprecated
@@ -13,9 +13,9 @@ export enum RoomType {
   // // N: 공지대화 deprecated
   // Notice = 'N',
 
-  // L: 링크(Legacy)
+  /** L: 링크(Legacy) */
   Link = 'L',
-  // K: MyTalk(나와의 대화)
+  /** K: MyTalk(나와의 대화) */
   Mytalk = 'K'
 }
 
@@ -23,3 +23,32 @@ export enum RoomExitType {
   // A 만 사용하고 있고, 서버에서도 달리 처리하지는 않음, 하지만 추후 사용성을 위해 생성.
   All = 'A'
 }
+
+export function isGroupRoom(roomType: RoomType): boolean {
+  return RoomType.Multi === roomType;
+}
+
+export function isSendRoom(roomType: RoomType): boolean {
+  return (
+    RoomType.Single === roomType ||
+    RoomType.Multi === roomType ||
+    RoomType.Mytalk === roomType
+  );
+}
+
+export function isFunctionRoom(roomType: RoomType): boolean {
+  return (
+    RoomType.Single === roomType ||
+    RoomType.Multi === roomType ||
+    RoomType.Mytalk === roomType
+  );
+}
+
+export function isReadCountRoom(roomType: RoomType): boolean {
+  return (
+    RoomType.Single === roomType ||
+    RoomType.Multi === roomType ||
+    RoomType.Bot === roomType ||
+    RoomType.Allim === roomType
+  );
+}