기능추가 :: 대화 > unread Count Badge 처리.

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

@@ -14,13 +14,8 @@
     </mat-tab>
     <mat-tab>
       <ng-template mat-tab-label>
-        <mat-icon
-          matBadge="22"
-          matBadgeDescription="확인하지 않은 메시지가 있습니다."
-          matBadgeColor="accent"
-          matBadgePosition="above after"
-          >chat</mat-icon
-        >
+        <mat-icon [matBadgeHidden]="((badgeChatUnReadCount$ | async) <= 0)" [matBadge]="badgeChatUnReadCount$ | async"
+          matBadgeDescription="확인하지 않은 메시지가 있습니다." matBadgeColor="accent" matBadgePosition="above after">chat</mat-icon>
       </ng-template>
       <app-layout-chat-left-sidenav-chat></app-layout-chat-left-sidenav-chat>
     </mat-tab>

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

@@ -6,6 +6,10 @@ import {
   CreateChatDialogData,
   CreateChatDialogResult
 } from '@app/layouts/messenger/dialogs/chat/create-chat.dialog.component';
+import { Observable } from 'rxjs';
+import { Store, select } from '@ngrx/store';
+
+import * as AppStore from '@app/store';
 
 @Component({
   selector: 'app-layout-messenger-left-side',
@@ -14,12 +18,19 @@ import {
   animations: ucapAnimations
 })
 export class LeftSideComponent implements OnInit {
+  badgeChatUnReadCount$: Observable<number>;
+
   constructor(
+    private store: Store<any>,
     private dialogService: DialogService,
     private logger: NGXLogger
   ) {}
 
-  ngOnInit() {}
+  ngOnInit() {
+    this.badgeChatUnReadCount$ = this.store.pipe(
+      select(AppStore.MessengerSelector.SyncSelector.selectChatUnreadCount)
+    );
+  }
 
   async onClickNewChat() {
     const result = await this.dialogService.open<

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

@@ -68,6 +68,9 @@ export const reducer = createReducer(
       }
     }
 
+    let unReadCount = 0;
+    action.roomList.map(item => (unReadCount += item.noReadCnt));
+
     return {
       ...state,
       room: adapterRoom.upsertMany(action.roomList, {
@@ -79,7 +82,8 @@ export const reducer = createReducer(
       }),
       roomUserShort: adapterRoomUserShort.upsertMany(roomUserShortList, {
         ...state.roomUserShort
-      })
+      }),
+      chatUnreadCount: unReadCount
     };
   }),
 
@@ -152,12 +156,26 @@ export const reducer = createReducer(
       noReadCnt: action.noReadCnt
     };
 
+    let unReadCount = 0;
+    if (action.noReadCnt === 0) {
+      // tslint:disable-next-line: forin
+      for (const key in state.room.entities) {
+        if (key !== action.roomSeq) {
+          const value = state.room.entities[key];
+          unReadCount += value.noReadCnt;
+        }
+      }
+    } else {
+      unReadCount = state.chatUnreadCount + 1;
+    }
+
     return {
       ...state,
       room: adapterRoom.updateOne(
         { id: action.roomSeq, changes: roomInfo },
         { ...state.room }
-      )
+      ),
+      chatUnreadCount: unReadCount
     };
   }),
 

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

@@ -34,6 +34,7 @@ export interface State {
   room: RoomState;
   roomUser: RoomUserState;
   roomUserShort: RoomUserShortState;
+  chatUnreadCount: number;
 }
 
 export const adapterBuddy2 = createEntityAdapter<UserInfo>({
@@ -93,7 +94,8 @@ export const initialState: State = {
   group2: group2InitialState,
   room: roomInitialState,
   roomUser: roomUserInitialState,
-  roomUserShort: roomUserShortInitialState
+  roomUserShort: roomUserShortInitialState,
+  chatUnreadCount: 0
 };
 
 const {
@@ -189,6 +191,10 @@ export function selectors<S>(selector: Selector<any, State>) {
     selectAllRoomUserShort: createSelector(
       selectRoomUserShort,
       ngeSelectAllRoomUserShort
+    ),
+    selectChatUnreadCount: createSelector(
+      selector,
+      (state: State) => state.chatUnreadCount
     )
   };
 }