From 62b19d90b8bf8f002beea5503cb4ff585ef766ad Mon Sep 17 00:00:00 2001
From: Richard Park <richard.park@loafle.com>
Date: Tue, 8 Oct 2019 15:25:00 +0900
Subject: [PATCH] progressbar of message list is added

---
 .../components/messages.component.html        |  5 ++++-
 .../components/messages.component.ts          |  5 +++++
 .../messenger/messenger.layout.module.ts      |  2 ++
 .../src/app/store/messenger/event/reducers.ts | 19 +++++++++++++++++--
 .../src/app/store/messenger/event/state.ts    |  6 ++++++
 5 files changed, 34 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 186debfc..05be38b7 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
@@ -34,7 +34,10 @@
     </div>
   </mat-toolbar>
   <!-- / CHAT TOOLBAR -->
-
+  <mat-progress-bar
+    *ngIf="eventListProcessing$ | async"
+    mode="indeterminate"
+  ></mat-progress-bar>
   <!-- CHAT CONTENT -->
   <div fxFlex="1 1 auto" class="chat-content">
     <!-- CHAT MESSAGES -->
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 40e99da2..d67cbd5a 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
@@ -25,6 +25,7 @@ export class MessagesComponent implements OnInit, OnDestroy {
   eventList$: Observable<Info[]>;
   roomInfo: RoomInfo;
   roomInfoSubscription: Subscription;
+  eventListProcessing$: Observable<boolean>;
 
   constructor(
     private store: Store<any>,
@@ -53,6 +54,10 @@ export class MessagesComponent implements OnInit, OnDestroy {
       )
       .subscribe();
 
+    this.eventListProcessing$ = this.store.pipe(
+      select(AppStore.MessengerSelector.EventSelector.infoListProcessing)
+    );
+
     this.eventList$ = this.store.pipe(
       select(AppStore.MessengerSelector.EventSelector.infoList)
     );
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/messenger.layout.module.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/messenger.layout.module.ts
index 5d97d48f..7d77dee7 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/messenger.layout.module.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/messenger.layout.module.ts
@@ -8,6 +8,7 @@ import { MatCardModule } from '@angular/material/card';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatToolbarModule } from '@angular/material/toolbar';
 
@@ -31,6 +32,7 @@ import { DIALOGS } from './dialogs';
     MatDialogModule,
     MatIconModule,
     MatMenuModule,
+    MatProgressBarModule,
     MatTabsModule,
     MatToolbarModule,
     UCapUiModule,
diff --git a/projects/ucap-webmessenger-app/src/app/store/messenger/event/reducers.ts b/projects/ucap-webmessenger-app/src/app/store/messenger/event/reducers.ts
index 06d0e007..58719033 100644
--- a/projects/ucap-webmessenger-app/src/app/store/messenger/event/reducers.ts
+++ b/projects/ucap-webmessenger-app/src/app/store/messenger/event/reducers.ts
@@ -1,14 +1,29 @@
 import { createReducer, on } from '@ngrx/store';
 import { initialState } from './state';
-import { infoSuccess, appendInfoList } from './actions';
+import { infoSuccess, appendInfoList, info, infoFailure } from './actions';
 
 export const reducer = createReducer(
   initialState,
+  on(info, (state, action) => {
+    return {
+      ...state,
+      infoListProcessing: true
+    };
+  }),
+
   on(infoSuccess, (state, action) => {
     return {
       ...state,
       infoList: action.infoList,
-      infoStatus: action.res
+      infoStatus: action.res,
+      infoListProcessing: false
+    };
+  }),
+
+  on(infoFailure, (state, action) => {
+    return {
+      ...state,
+      infoListProcessing: false
     };
   }),
 
diff --git a/projects/ucap-webmessenger-app/src/app/store/messenger/event/state.ts b/projects/ucap-webmessenger-app/src/app/store/messenger/event/state.ts
index a6e56dfa..42dcda6f 100644
--- a/projects/ucap-webmessenger-app/src/app/store/messenger/event/state.ts
+++ b/projects/ucap-webmessenger-app/src/app/store/messenger/event/state.ts
@@ -2,17 +2,23 @@ import { Selector, createSelector } from '@ngrx/store';
 import { InfoResponse, Info } from '@ucap-webmessenger/protocol-event';
 
 export interface State {
+  infoListProcessing: boolean;
   infoList: Info[] | null;
   infoStatus: InfoResponse | null;
 }
 
 export const initialState: State = {
+  infoListProcessing: false,
   infoList: null,
   infoStatus: null
 };
 
 export function selectors<S>(selector: Selector<any, State>) {
   return {
+    infoListProcessing: createSelector(
+      selector,
+      (state: State) => state.infoListProcessing
+    ),
     infoList: createSelector(
       selector,
       (state: State) => state.infoList