From 99d7440c2562210e9a5acdb7d6baab9ccb4c2203 Mon Sep 17 00:00:00 2001
From: leejh <leejh@biztechpartners.co.kr>
Date: Thu, 17 Oct 2019 15:06:38 +0900
Subject: [PATCH] =?UTF-8?q?=EA=B8=B0=EB=8A=A5=EC=B6=94=EA=B0=80=20::=20?=
 =?UTF-8?q?=EB=8C=80=ED=99=94=20>=20unread=20Count=20Badge=20=EC=B2=98?=
 =?UTF-8?q?=EB=A6=AC.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/left-side.component.html       |  9 ++------
 .../components/left-side.component.ts         | 13 ++++++++++-
 .../src/app/store/messenger/sync/reducers.ts  | 22 +++++++++++++++++--
 .../src/app/store/messenger/sync/state.ts     |  8 ++++++-
 4 files changed, 41 insertions(+), 11 deletions(-)

diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.html
index cf0cb209..2e8de758 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.html
+++ b/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>
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.ts
index 822c80c4..97bdd7e5 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.ts
+++ b/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<
diff --git a/projects/ucap-webmessenger-app/src/app/store/messenger/sync/reducers.ts b/projects/ucap-webmessenger-app/src/app/store/messenger/sync/reducers.ts
index 85f00ebf..4775698b 100644
--- a/projects/ucap-webmessenger-app/src/app/store/messenger/sync/reducers.ts
+++ b/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
     };
   }),
 
diff --git a/projects/ucap-webmessenger-app/src/app/store/messenger/sync/state.ts b/projects/ucap-webmessenger-app/src/app/store/messenger/sync/state.ts
index 015705cb..dac4c18c 100644
--- a/projects/ucap-webmessenger-app/src/app/store/messenger/sync/state.ts
+++ b/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
     )
   };
 }