group list is implemented

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

@@ -1,3 +1,3 @@
 <ucap-group-expansion-panel
-  [buddyInfoList]="buddyInfoList$ | async"
+  [groupList]="groupList$ | async"
 ></ucap-group-expansion-panel>

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

@@ -5,7 +5,7 @@ import { Observable } from 'rxjs';
 import { Store, select } from '@ngrx/store';
 
 import { ucapAnimations } from '@ucap-webmessenger/ui';
-import { UserInfo } from '@ucap-webmessenger/protocol-sync';
+import { UserInfo, GroupDetailData } from '@ucap-webmessenger/protocol-sync';
 
 import * as AppStore from '@app/store';
 
@@ -16,13 +16,13 @@ import * as AppStore from '@app/store';
   animations: ucapAnimations
 })
 export class GroupComponent implements OnInit {
-  buddyInfoList$: Observable<UserInfo[]>;
+  groupList$: Observable<GroupDetailData[]>;
 
   constructor(private store: Store<any>) {}
 
   ngOnInit() {
-    this.buddyInfoList$ = this.store.pipe(
-      select(AppStore.MessengerSelector.SyncSelector.buddyInfoList)
+    this.groupList$ = this.store.pipe(
+      select(AppStore.MessengerSelector.SyncSelector.groupList)
     );
   }
 }

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

@@ -2,7 +2,10 @@ import { createAction, props } from '@ngrx/store';
 import {
   BuddyRequest,
   BuddyResponse,
-  BuddyDetailData
+  BuddyDetailData,
+  GroupRequest,
+  GroupDetailData,
+  GroupResponse
 } from '@ucap-webmessenger/protocol-sync';
 
 export const buddy2 = createAction(
@@ -24,3 +27,23 @@ export const buddy2Failure = createAction(
   '[Messenger::Sync] Buddy2 Failure',
   props<{ error: any }>()
 );
+
+export const group2 = createAction(
+  '[Messenger::Sync] Group2',
+  props<GroupRequest>()
+);
+
+export const group2Data = createAction(
+  '[Messenger::Sync] Group2 Data',
+  props<{ data: GroupDetailData }>()
+);
+
+export const group2Success = createAction(
+  '[Messenger::Sync] Group2 Success',
+  props<{ res: GroupResponse }>()
+);
+
+export const group2Failure = createAction(
+  '[Messenger::Sync] Group2 Failure',
+  props<{ error: any }>()
+);

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

@@ -3,16 +3,30 @@ import { Injectable } from '@angular/core';
 import { Actions, ofType, createEffect } from '@ngrx/effects';
 
 import { of } from 'rxjs';
-import { catchError, exhaustMap, map } from 'rxjs/operators';
+import { catchError, exhaustMap, map, withLatestFrom } from 'rxjs/operators';
 
-import { buddy2, buddy2Success, buddy2Failure, buddy2Data } from './actions';
+import { Store, select } from '@ngrx/store';
+
+import {
+  buddy2,
+  buddy2Success,
+  buddy2Failure,
+  buddy2Data,
+  group2,
+  group2Success,
+  group2Failure,
+  group2Data
+} from './actions';
 import { SessionStorageService } from '@ucap-webmessenger/web-storage';
 
 import {
   SyncProtocolService,
   SSVC_TYPE_SYNC_BUDDY2_DATA,
   BuddyResponse,
-  BuddyDetailData
+  BuddyDetailData,
+  SSVC_TYPE_SYNC_GROUP_DATA2,
+  GroupDetailData,
+  GroupResponse
 } from '@ucap-webmessenger/protocol-sync';
 import { regViewSuccess } from '@app/store/setting/option';
 
@@ -21,7 +35,15 @@ export class Effects {
   regViewSuccess$ = createEffect(() =>
     this.actions$.pipe(
       ofType(regViewSuccess),
-      map(() => buddy2({ syncDate: '' }))
+      withLatestFrom(
+        this.store.pipe(
+          select(state => {
+            console.log('state', state);
+            return state.messenger.sync.buddy2SyncDate as string;
+          })
+        )
+      ),
+      map(([action, buddy2SyncDate]) => buddy2({ syncDate: buddy2SyncDate }))
     )
   );
 
@@ -44,8 +66,43 @@ export class Effects {
     )
   );
 
+  buddy2SuccessToGroup2$ = createEffect(() =>
+    this.actions$.pipe(
+      ofType(buddy2Success),
+      withLatestFrom(
+        this.store.pipe(
+          select(state => {
+            console.log('state', state);
+            return state.messenger.sync.group2SyncDate as string;
+          })
+        )
+      ),
+      map(([action, group2SyncDate]) => group2({ syncDate: group2SyncDate }))
+    )
+  );
+
+  group2$ = createEffect(() =>
+    this.actions$.pipe(
+      ofType(group2),
+      exhaustMap(req =>
+        this.syncProtocolService.group2(req).pipe(
+          map(res => {
+            switch (res.Type) {
+              case SSVC_TYPE_SYNC_GROUP_DATA2:
+                return group2Data({ data: res as GroupDetailData });
+            }
+
+            return group2Success({ res: res as GroupResponse });
+          }),
+          catchError(error => of(group2Failure({ error })))
+        )
+      )
+    )
+  );
+
   constructor(
     private actions$: Actions,
+    private store: Store<any>,
     private syncProtocolService: SyncProtocolService,
     private sessionStorageService: SessionStorageService
   ) {}

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

@@ -1,6 +1,11 @@
 import { createReducer, on } from '@ngrx/store';
 import { initialState } from './state';
-import { buddy2Data, buddy2Success } from './actions';
+import {
+  buddy2Data,
+  buddy2Success,
+  group2Data,
+  group2Success
+} from './actions';
 
 export const reducer = createReducer(
   initialState,
@@ -15,5 +20,17 @@ export const reducer = createReducer(
       ...state,
       buddy2SyncDate: action.res.syncDate
     };
+  }),
+  on(group2Data, (state, action) => {
+    return {
+      ...state,
+      groupList: [...state.groupList, action.data]
+    };
+  }),
+  on(group2Success, (state, action) => {
+    return {
+      ...state,
+      group2SyncDate: action.res.syncDate
+    };
   })
 );

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

@@ -1,14 +1,19 @@
 import { Selector, createSelector } from '@ngrx/store';
-import { UserInfo } from '@ucap-webmessenger/protocol-sync';
+import { UserInfo, GroupDetailData } from '@ucap-webmessenger/protocol-sync';
 
 export interface State {
   buddyInfoList: UserInfo[];
   buddy2SyncDate: string;
+
+  groupList: GroupDetailData[];
+  group2SyncDate: string;
 }
 
 export const initialState: State = {
   buddyInfoList: [],
-  buddy2SyncDate: ''
+  buddy2SyncDate: '',
+  groupList: [],
+  group2SyncDate: ''
 };
 
 export function selectors<S>(selector: Selector<any, State>) {
@@ -16,6 +21,18 @@ export function selectors<S>(selector: Selector<any, State>) {
     buddyInfoList: createSelector(
       selector,
       (state: State) => state.buddyInfoList
+    ),
+    buddy2SyncDate: createSelector(
+      selector,
+      (state: State) => state.buddy2SyncDate
+    ),
+    groupList: createSelector(
+      selector,
+      (state: State) => state.groupList
+    ),
+    group2SyncDate: createSelector(
+      selector,
+      (state: State) => state.group2SyncDate
     )
   };
 }

projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.html

@@ -1,10 +1,8 @@
 <mat-accordion>
-  <mat-expansion-panel *ngFor="let buddyInfo of buddyInfoList">
+  <mat-expansion-panel *ngFor="let group of groupList">
     <mat-expansion-panel-header>
-      <mat-panel-title> {{ buddyInfo.name }} </mat-panel-title>
-      <mat-panel-description
-        >{{ buddyInfo.employeeNum }}
-      </mat-panel-description>
+      <mat-panel-title> {{ group.name }} </mat-panel-title>
+      <mat-panel-description>{{ group.name }} </mat-panel-description>
     </mat-expansion-panel-header>
   </mat-expansion-panel>
 </mat-accordion>

projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit, Input } from '@angular/core';
 
-import { UserInfo } from '@ucap-webmessenger/protocol-room';
+import { GroupDetailData } from '@ucap-webmessenger/protocol-sync';
 
 @Component({
   selector: 'ucap-group-expansion-panel',
@@ -9,7 +9,7 @@ import { UserInfo } from '@ucap-webmessenger/protocol-room';
 })
 export class ExpansionPanelComponent implements OnInit {
   @Input()
-  buddyInfoList: UserInfo[];
+  groupList: GroupDetailData[];
 
   constructor() {}