notification center

src/app/commons/component/header/header.component.html

@@ -7,7 +7,7 @@
     </button>
     <span class="spacer"></span>
 
-    <of-notification-badge [notifications]="toolbarHelpers?.notifications"></of-notification-badge>
+    <of-notification-badge></of-notification-badge>
     <div class="menu-section">
         <button mat-icon-button [matMenuTriggerFor]="countryMenu" aria-label="Open x-positioned menu">
             <mat-icon>translate</mat-icon>

src/app/commons/component/header/header.component.ts

@@ -1,5 +1,4 @@
 import { Component, OnInit, Input, OnDestroy } from '@angular/core';
-import { ToolbarHelpers } from './toolbar.helpers';
 import { Title } from '@angular/platform-browser';
 import { Direction } from '@angular/cdk/bidi';
 
@@ -25,7 +24,6 @@ export class HeaderComponent implements OnInit, OnDestroy {
   @Input() matDrawerShow;
 
   searchOpen = false;
-  toolbarHelpers = ToolbarHelpers;
 
   dir: Direction;
 

src/app/commons/component/header/toolbar.helpers.ts

@@ -1,22 +0,0 @@
-export const ToolbarHelpers = {
-    notifications: [
-        {
-            id: 'id',
-            title: 'Mail 5',
-            lastTime: '23 Minutes ago',
-            state: 'state'
-        },
-        {
-            id: 'id',
-            title: 'Mail 5',
-            lastTime: '23 Minutes ago',
-            state: 'state'
-        },
-        {
-            id: 'id',
-            title: 'Mail 5',
-            lastTime: '23 Minutes ago',
-            state: 'state'
-        },
-    ],
-};

src/packages/notification/component/badge/notification.component.html

@@ -30,16 +30,17 @@
 
 <ng-template #thenBlock>
   <perfect-scrollbar class="content">
-    <div *ngFor="let notification of notifications; last as isLast">
-      <div class="notification" fxLayout="row" fxLayoutAlign="start center" mat-ripple>
+    <div *ngFor="let notification of notifications;">
+      <div class="notification" fxLayout="row" fxLayoutAlign="start center" mat-ripple [ngClass]="{'highlight': notification.confirmDate === null}" (click)="handleClick(notification)" > 
+        <!-- [ngClass]="{'highlight': row.confirmDate === null}" -->
         <mat-icon class="icon">notifications</mat-icon>
         <div class="title" fxLayout="column">
-          <div class="name">{{ notification.title }}</div>
-          <div class="time">{{ notification.lastTime }}</div>
+          <div class="name">{{ notification.message }}</div>
+          <div class="time">{{ notification.member.name }}</div>
         </div>
         <span fxFlex></span>
-        <button type="button" mat-icon-button (click)="delete(notification)">
-          <mat-icon class="close">close</mat-icon>
+        <button type="button" mat-icon-button (click)="mark(notification, $event)">
+          <mat-icon class="close" matTooltip="Mark as read">check circle</mat-icon>
         </button>
       </div>
       <div class="divider" *ngIf="!isLast"></div>

src/packages/notification/component/badge/notification.component.scss

@@ -1,5 +1,8 @@
 $prefix: 'notification';
 
+.highlight {
+	background: #039be5
+}
 
 .badge {
   	position: absolute;

src/packages/notification/component/badge/notification.component.ts

@@ -1,34 +1,103 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, AfterContentInit } from '@angular/core';
 import { Router } from '@angular/router';
+import { Store, select } from '@ngrx/store';
+import { RPCError } from 'packages/core/rpc/error';
+import { Notification } from '../../model';
+import * as ListStore from '../../store/list';
+import * as DetailStore from '../../store/detail';
+import { ReadAllByMemberSelector, ReadSelector } from '../../store';
+import { AuthSelector } from 'packages/member/store';
+import { Member } from '../../../member/model';
+import { PageParams, Page } from 'app/commons/model';
+import { MarkAsRead } from '../../store/detail';
 
 @Component({
   selector: 'of-notification-badge',
   templateUrl: './notification.component.html',
   styleUrls: ['./notification.component.scss']
 })
-export class NotificationBadgeComponent implements OnInit {
-
-  cssPrefix = 'toolbar-notification';
+export class NotificationBadgeComponent implements OnInit, AfterContentInit {
+  notification$ = this.listStore.pipe(select(ReadAllByMemberSelector.select('page')));
+  mark$ = this.detailStore.pipe(select(ReadSelector.select('notification')));
   isOpen = false;
-  @Input() notifications = [];
+  notifications: Notification[] = null;
 
   constructor(
-    private router: Router
+    private router: Router,
+    private listStore: Store<ListStore.State>,
+    private detailStore: Store<DetailStore.State>
   ) { }
 
   ngOnInit() {
+    this.notification$.subscribe(
+      (page: Page) => {
+        if (page !== null) {
+          this.notifications = page.content;
+        }
+      },
+      (error: RPCError) => {
+        console.log(error.message);
+      }
+    );
+    this.mark$.subscribe(
+      (n: Notification) => {
+        if (n !== null && n.confirmDate !== null) {
+          this.getNotifications(0);
+        }
+      },
+      (error: RPCError) => {
+        console.log(error.message);
+      }
+    );
   }
 
-  select() {
-
+  ngAfterContentInit() {
+    this.getNotifications(0);
   }
 
-  delete(notification) {
+  getNotifications(pageIndex: number) {
+    this.listStore.select(AuthSelector.select('member')).subscribe(
+      (member: Member) => {
+        const pageParams: PageParams = {
+          pageNo: '0',
+          countPerPage: '10',
+          sortCol: 'id',
+          sortDirection: 'descending'
+        };
+        this.listStore.dispatch(new ListStore.ReadAllByMember({ member, pageParams }));
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+  }
 
+
+  mark(notification: Notification, e: Event) {
+    this.detailStore.dispatch(new DetailStore.MarkAsRead(notification));
+    e.stopPropagation();
+  }
+
+  handleClick(n: Notification) {
+    alert('Will redirect to ' + n.url);
   }
 
   handleMarkAllAsRead() {
-    console.log('Mark All');
+
+    this.listStore.select(AuthSelector.select('member')).subscribe(
+      (member: Member) => {
+        const pageParams: PageParams = {
+          pageNo: '0',
+          countPerPage: '10',
+          sortCol: 'id',
+          sortDirection: 'descending'
+        };
+        this.listStore.dispatch(new ListStore.MarkAllAsRead({ member, pageParams }));
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
   }
 
   handleViewAll() {

src/packages/notification/component/notification/notification.component.html

@@ -21,7 +21,7 @@
       <mat-cell *matCellDef="let element"> {{element.member.name}} </mat-cell>
     </ng-container>
 
-    <mat-row *matRowDef="let row; columns: displayedColumns;" (click)="handleRowClick(row)"></mat-row>
+    <mat-row *matRowDef="let row; columns: displayedColumns;" (click)="handleRowClick(row)" [ngClass]="{'highlight': row.confirmDate === null}"></mat-row>
   </mat-table>
 
   <mat-paginator #paginator [length]="totalLength" [pageIndex]="0" [pageSize]="PAGE_SIZE" (page)="handlePaging($event)">

src/packages/notification/component/notification/notification.component.scss

@@ -1,165 +1,3 @@
-$prefix: 'notification';
-
-
-.badge {
-  	position: absolute;
-  	top: 0;
-  	left: 50%;
-  	font-weight: 700;
-  	line-height: 13px;
-  	height: 13px;
-  	padding: 5px;
-    border-radius: 26%;
-    width: 30%;
-    background-color: #f44336;
-  	color: #fff;
-  	border-color:#f44336
+.highlight {
+	background: #039be5
 }
-
-.#{$prefix} {
-  &-container {
-    position: relative;
-    display: flex;
-    align-items: center;
-  }
-
-  &-btn {
-    display: flex;
-    justify-content: center;
-    margin-right: 10px;
-  }
-}
-.dropdown {
-	background: white;
-	position: absolute;
-	top: 42px;
-	right: 28px;
-	min-width: 350px;
-	z-index: 2;
-	transform: translateY(0) scale(0);
-	transform-origin: top right;
-	visibility: hidden;
-	transition: transform .4s cubic-bezier(.25, .8, .25, 1), visibility .4s cubic-bezier(.25, .8, .25, 1);
-
-	@media screen and (max-width: 599px) {
-	    min-width: 50vw;
-	    right: 5px;
-	    transform: translateY(0);
-    	visibility: hidden;
-    	transition: transform .4s cubic-bezier(.25,.8,.25,1), visibility .4s cubic-bezier(.25,.8,.25,1);
-	}
-
-	&.open {
-	    transform: translateY(0) scale(1);
-	    visibility: visible;
-	}
-	.card {
-
-	    .header {
-	      background: #EEEEEE;
-	      min-height: 54px;
-	      padding-left: 16px;
-	      padding-right: 8px;
-	      color: #555;
-	      display: flex;
-	      justify-content: flex-start;
-	      align-items: center;
-	      align-content: center;
-	      border-bottom: 1px solid #e0e0e0;
-
-	      .extra {
-	        font-size: 12px;
-	        color: #888;
-	      }
-    	}
-    }
-    .content {
-      	overflow: hidden;
-      	max-height: 256px;
-
-      	.notification {
-        	min-height: 64px;
-	        padding: 0 16px 0 14px;
-	        position: relative;
-	        color: #666;
-	        cursor: pointer;
-
-	        .icon {
-		        height: 28px;
-		        width: 28px;
-		        line-height: 28px;
-		        font-size: 18px;
-		        margin-right: 13px;
-		        text-align: center;
-		        border-radius: 50%;
-		        background: #FFF;
-		        color: #888;
-		        border: 1px solid #EEE;
-        	}
-
-        	.title {
-          		font-weight: 500;
-          		font-size: 14px;
-        	}
-
-        	.time {
-         		font-size: 12px;
-        	}
-
-        	.close {
-          		font-size: 18px;
-          		width: 18px;
-	          height: 18px;
-	          line-height: 18px;
-	        }
-
-	        &.primary {
-	          .icon {
-	            background: #ccc;
-	            color: #ddd;
-	          }
-	        }
-
-	        &.accent {
-	          .icon {
-	            background: #aaa;
-	            color: #bbb;
-	          }
-	        }
-
-	        &.warn {
-	          .icon {
-	            background: #eee;
-	            color: #ddd;
-	          }
-	        }
-
-	        &.read {
-	          color: #999;
-
-	          .name {
-	            font-weight: normal;
-	          }
-	        }
-      	}
-    }
-
-    .footer {
-      	min-height: 42px;
-      	border-top: 1px solid #EEE;
-
-	    .action {
-	        cursor: pointer;
-	        color: #AAA;
-	        text-align: center;
-	        font-size: 13px;
-	    }
-    }
-
-    .divider {
-      	width: calc(100% - 30px);
-      	height: 1px;
-      	background: #EEE;
-      	margin: 0 16px 0 14px;
-    }
-}

src/packages/notification/component/notification/notification.component.ts

@@ -4,7 +4,7 @@ import { Router } from '@angular/router';
 import { Store, select } from '@ngrx/store';
 import { RPCError } from 'packages/core/rpc/error';
 import { Notification } from '../../model';
-import * as NotificationStore from '../../store/notification';
+import * as NotificationStore from '../../store/list';
 import { ReadAllByMemberSelector } from '../../store';
 import { AuthSelector } from 'packages/member/store';
 import { Member } from '../../../member/model';
@@ -65,7 +65,8 @@ export class NotificationComponent implements OnInit, AfterContentInit {
   }
 
   handleRowClick(n: Notification) {
-    this.router.navigate([n.url]);
+    alert('Will redirect to ' + n.url);
+    // this.router.navigate([n.url]);
   }
 
   handlePaging(e: PageEvent) {

src/packages/notification/service/notification.service.ts

@@ -7,7 +7,7 @@ import { RPCClient } from 'packages/core/rpc/client/RPCClient';
 
 import { Notification } from '../model';
 import { Member } from '../../member/model';
-import { PageParams } from 'app/commons/model';
+import { PageParams, Page } from 'app/commons/model';
 
 @Injectable()
 export class NotificationService {
@@ -18,10 +18,16 @@ export class NotificationService {
 
   }
 
-  public readAllByMember(member: Member, pageParams: PageParams): Observable<Notification[]> {
-
+  public readAllByMember(member: Member, pageParams: PageParams): Observable<Page> {
     return this.rpcClient.call('NotificationService.readAllByMember', member, pageParams);
   }
 
+  public markAllAsRead(member: Member, pageParams: PageParams): Observable<Page> {
+    return this.rpcClient.call('NotificationService.markAllAsRead',  member, pageParams);
+  }
+
+  public markAsRead(notification: Notification): Observable<Notification> {
+    return this.rpcClient.call('NotificationService.markAsRead', notification);
+  }
 
 }

src/packages/notification/store/detail/notification.action.ts

@@ -0,0 +1,61 @@
+import { Action } from '@ngrx/store';
+
+import { RPCError } from 'packages/core/rpc/error';
+
+import { Member } from '../../../member/model';
+import { PageParams, Page } from 'app/commons/model';
+import { Notification } from '../../model';
+
+export enum ActionType {
+  MarkAsRead = '[Notification.notification] MarkAsRead',
+  MarkAsReadSuccess = '[Notification.notification] MarkAsReadSuccess',
+  MarkAsReadFailure = '[Notification.notification] MarkAsReadFailure',
+  // ReadUnconfirmedCount = '[Notification.notification] ReadUnconfirmedCount',
+  // ReadUnconfirmedCountSuccess = '[Notification.notification] ReadUnconfirmedCountSuccess',
+  // ReadUnconfirmedCountFailure = '[Notification.notification] ReadUnconfirmedCountFailure',
+}
+
+export class MarkAsRead implements Action {
+  readonly type = ActionType.MarkAsRead;
+
+  constructor(public payload: Notification ) {}
+}
+
+export class MarkAsReadSuccess implements Action {
+  readonly type = ActionType.MarkAsReadSuccess;
+
+  constructor(public payload: Notification) {}
+}
+
+export class MarkAsReadFailure implements Action {
+  readonly type = ActionType.MarkAsReadFailure;
+
+  constructor(public payload: RPCError) {}
+}
+
+// export class ReadUnconfirmedCount implements Action {
+//   readonly type = ActionType.ReadUnconfirmedCount;
+
+//   constructor(public payload: Member) {}
+// }
+
+// export class ReadUnconfirmedCountSuccess implements Action {
+//   readonly type = ActionType.ReadUnconfirmedCountSuccess;
+
+//   constructor(public payload: number) {}
+// }
+
+// export class ReadUnconfirmedCountFailure implements Action {
+//   readonly type = ActionType.ReadUnconfirmedCountFailure;
+
+//   constructor(public payload: RPCError) {}
+// }
+
+export type Actions =
+  | MarkAsRead
+  | MarkAsReadSuccess
+  | MarkAsReadFailure
+  // | ReadUnconfirmedCount
+  // | ReadUnconfirmedCountSuccess
+  // | ReadUnconfirmedCountFailure
+;

src/packages/notification/store/detail/notification.effect.ts

@@ -0,0 +1,50 @@
+import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
+
+import { Effect, Actions, ofType } from '@ngrx/effects';
+import { Action } from '@ngrx/store';
+
+import { Observable } from 'rxjs/Observable';
+import { of } from 'rxjs/observable/of';
+
+import 'rxjs/add/operator/catch';
+import 'rxjs/add/operator/do';
+import 'rxjs/add/operator/exhaustMap';
+import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/take';
+
+import { RPCError } from 'packages/core/rpc/error';
+
+import { Notification } from '../../model';
+import { NotificationService } from '../../service/notification.service';
+
+import {
+  MarkAsRead,
+  MarkAsReadSuccess,
+  MarkAsReadFailure,
+  ActionType,
+} from './notification.action';
+
+@Injectable()
+export class Effects {
+
+  constructor(
+    private actions$: Actions,
+    private notificationService: NotificationService,
+    private router: Router
+  ) { }
+
+
+  @Effect()
+  markAsRead$: Observable<Action> = this.actions$
+    .ofType(ActionType.MarkAsRead)
+    .map((action: MarkAsRead) => action.payload)
+    .switchMap(payload => this.notificationService.markAsRead(payload))
+    .map(notification => {
+      return new MarkAsReadSuccess(notification);
+    })
+    .catch((error: RPCError) => {
+      console.log(error.message);
+      return of(new MarkAsReadFailure(error));
+    });
+}

src/packages/notification/store/detail/notification.reducer.ts

@@ -0,0 +1,44 @@
+import {
+  Actions,
+  ActionType,
+} from './notification.action';
+
+import {
+  State,
+  initialState,
+} from './notification.state';
+
+export function reducer(state = initialState, action: Actions): State {
+  switch (action.type) {
+    case ActionType.MarkAsRead: {
+      return {
+        ...state,
+        error: null,
+        pending: true,
+      };
+    }
+
+    case ActionType.MarkAsReadSuccess: {
+      return {
+        ...state,
+        error: null,
+        pending: false,
+        notification: action.payload,
+      };
+    }
+
+    case ActionType.MarkAsReadFailure: {
+      return {
+        ...state,
+        error: action.payload,
+        pending: false,
+        notification: null,
+      };
+    }
+
+
+    default: {
+      return state;
+    }
+  }
+}

src/packages/notification/store/detail/notification.state.ts

@@ -0,0 +1,14 @@
+import { RPCError } from 'packages/core/rpc/error';
+import { Notification } from '../../model';
+
+export interface State {
+  error: RPCError | null;
+  pending: boolean;
+  notification: Notification;
+}
+
+export const initialState: State = {
+  error: null,
+  pending: false,
+  notification: null,
+};

src/packages/notification/store/index.ts

@@ -1,30 +1,38 @@
 import {
-    createSelector,
-    createFeatureSelector,
-    ActionReducerMap,
-  } from '@ngrx/store';
+  createSelector,
+  createFeatureSelector,
+  ActionReducerMap,
+} from '@ngrx/store';
 
-  import { StateSelector } from 'packages/core/ngrx/store';
+import { StateSelector } from 'packages/core/ngrx/store';
 
-  import { MODULE } from '../notification.constant';
+import { MODULE } from '../notification.constant';
 
-  import * as NotificationStore from './notification';
+import * as ListStore from './list';
+import * as DetailStore from './detail';
 
-  export interface State {
-    notifications: NotificationStore.State;
-  }
+export interface State {
+  notifications: ListStore.State;
+  notification: DetailStore.State;
+}
 
-  export const REDUCERS = {
-    notifications: NotificationStore.reducer,
-  };
+export const REDUCERS = {
+  notifications: ListStore.reducer,
+  notification: DetailStore.reducer,
+};
 
-  export const EFFECTS = [
-    NotificationStore.Effects,
-  ];
+export const EFFECTS = [
+  ListStore.Effects,
+  DetailStore.Effects,
+];
 
-  export const selectNotificationState = createFeatureSelector<State>(MODULE.name);
+export const selectNotificationState = createFeatureSelector<State>(MODULE.name);
 
-  export const ReadAllByMemberSelector = new StateSelector<NotificationStore.State>(createSelector(
+export const ReadAllByMemberSelector = new StateSelector<ListStore.State>(createSelector(
+  selectNotificationState,
+  (state: State) => state.notifications
+));
+  export const ReadSelector = new StateSelector<DetailStore.State>(createSelector(
     selectNotificationState,
-    (state: State) => state.notifications
+    (state: State) => state.notification
   ));

src/packages/notification/store/list/index.ts

@@ -0,0 +1,4 @@
+export * from './notification.action';
+export * from './notification.effect';
+export * from './notification.reducer';
+export * from './notification.state';

src/packages/notification/store/list/notification.action.ts

@@ -9,6 +9,9 @@ export enum ActionType {
   ReadAllByMember = '[Notification.notification] ReadAllByMember',
   ReadAllByMemberSuccess = '[Notification.notification] ReadAllByMemberSuccess',
   ReadAllByMemberFailure = '[Notification.notification] ReadAllByMemberFailure',
+  MarkAllAsRead = '[Notification.notification] MarkAllAsRead',
+  MarkAllAsReadSuccess = '[Notification.notification] MarkAllAsReadSuccess',
+  MarkAllAsReadFailure = '[Notification.notification] MarkAllAsReadFailure',
 }
 
 export class ReadAllByMember implements Action {
@@ -20,7 +23,7 @@ export class ReadAllByMember implements Action {
 export class ReadAllByMemberSuccess implements Action {
   readonly type = ActionType.ReadAllByMemberSuccess;
 
-  constructor(public payload: any) {}
+  constructor(public payload: Page) {}
 }
 
 export class ReadAllByMemberFailure implements Action {
@@ -29,8 +32,30 @@ export class ReadAllByMemberFailure implements Action {
   constructor(public payload: RPCError) {}
 }
 
+export class MarkAllAsRead implements Action {
+  readonly type = ActionType.MarkAllAsRead;
+
+  constructor(public payload: { member: Member, pageParams: PageParams }) {}
+}
+
+export class MarkAllAsReadSuccess implements Action {
+  readonly type = ActionType.MarkAllAsReadSuccess;
+
+  constructor(public payload: Page) {}
+}
+
+export class MarkAllAsReadFailure implements Action {
+  readonly type = ActionType.MarkAllAsReadFailure;
+
+  constructor(public payload: RPCError) {}
+}
+
+
 export type Actions =
   | ReadAllByMember
   | ReadAllByMemberSuccess
   | ReadAllByMemberFailure
+  | MarkAllAsRead
+  | MarkAllAsReadSuccess
+  | MarkAllAsReadFailure
 ;

src/packages/notification/store/list/notification.effect.spec.ts

@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { Effects } from './notification.effect';
+
+describe('Notification.Effects', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [Effects]
+    });
+  });
+
+  it('should be created', inject([Effects], (effects: Effects) => {
+    expect(effects).toBeTruthy();
+  }));
+});

src/packages/notification/store/list/notification.effect.ts

@@ -23,6 +23,9 @@ import {
   ReadAllByMemberSuccess,
   ReadAllByMemberFailure,
   ActionType,
+  MarkAllAsRead,
+  MarkAllAsReadSuccess,
+  MarkAllAsReadFailure,
 } from './notification.action';
 
 @Injectable()
@@ -36,14 +39,6 @@ export class Effects {
 
   @Effect()
   readAllByMember$: Observable<Action> = this.actions$
-    // .ofType(ActionType.ReadAllByMember)
-    // .map((action: ReadAllByMember) => action.payload)
-    // .exhaustMap(member =>
-    //   this.notificationService
-    //   .readAllByMember(member)
-    //     .map(notificationList => new ReadAllByMemberSuccess(notificationList))
-    //     .catch(error => of(new ReadAllByMemberFailure(error)))
-    // );
     .ofType(ActionType.ReadAllByMember)
     .map((action: ReadAllByMember) => action.payload)
     .switchMap(payload => this.notificationService.readAllByMember(payload.member, payload.pageParams))
@@ -54,4 +49,16 @@ export class Effects {
       return of(new ReadAllByMemberFailure(error));
     });
 
+    @Effect()
+    markAllAsRead$: Observable<Action> = this.actions$
+      .ofType(ActionType.MarkAllAsRead)
+      .map((action: MarkAllAsRead) => action.payload)
+      .switchMap(payload => this.notificationService.markAllAsRead(payload.member, payload.pageParams))
+      .map(page => {
+        return new MarkAllAsReadSuccess(page);
+      })
+      .catch((error: RPCError) => {
+        console.log('errrrrrrrrrrrrrr : ' + error.message);
+        return of(new MarkAllAsReadFailure(error));
+      });
 }

src/packages/notification/store/list/notification.reducer.ts

@@ -0,0 +1,69 @@
+import {
+  Actions,
+  ActionType,
+} from './notification.action';
+
+import {
+  State,
+  initialState,
+} from './notification.state';
+
+export function reducer(state = initialState, action: Actions): State {
+  switch (action.type) {
+    case ActionType.ReadAllByMember: {
+      return {
+        ...state,
+        error: null,
+        pending: true,
+      };
+    }
+
+    case ActionType.ReadAllByMemberSuccess: {
+      return {
+        ...state,
+        error: null,
+        pending: false,
+        page: action.payload,
+      };
+    }
+
+    case ActionType.ReadAllByMemberFailure: {
+      return {
+        ...state,
+        error: action.payload,
+        pending: false,
+        page: null,
+      };
+    }
+
+    case ActionType.MarkAllAsRead: {
+      return {
+        ...state,
+        error: null,
+        pending: true,
+      };
+    }
+
+    case ActionType.MarkAllAsReadSuccess: {
+      return {
+        ...state,
+        error: null,
+        pending: false,
+        page: action.payload,
+      };
+    }
+
+    case ActionType.MarkAllAsReadFailure: {
+      return {
+        ...state,
+        error: action.payload,
+        pending: false,
+        page: null,
+      };
+    }
+
+    default: {
+      return state;
+    }
+  }
+}

src/packages/notification/store/list/notification.state.ts

@@ -1,18 +1,14 @@
 import { RPCError } from 'packages/core/rpc/error';
-
-import { Notification } from '../../model';
 import { Page } from 'app/commons/model';
 
 export interface State {
   error: RPCError | null;
   pending: boolean;
   page: Page;
-  // notifications: Notification[] | null;
 }
 
 export const initialState: State = {
   error: null,
   pending: false,
   page: null,
-  // notifications: null,
 };

src/packages/notification/store/notification/notification.reducer.ts

@@ -1,43 +0,0 @@
-import {
-    Actions,
-    ActionType,
-  } from './notification.action';
-
-  import {
-    State,
-    initialState,
-  } from './notification.state';
-
-  export function reducer(state = initialState, action: Actions): State {
-    switch (action.type) {
-      case ActionType.ReadAllByMember: {
-        return {
-          ...state,
-          error: null,
-          pending: true,
-        };
-      }
-
-      case ActionType.ReadAllByMemberSuccess: {
-        return {
-          ...state,
-          error: null,
-          pending: false,
-          page: action.payload,
-        };
-      }
-
-      case ActionType.ReadAllByMemberFailure: {
-        return {
-          ...state,
-          error: action.payload,
-          pending: false,
-          page: null,
-        };
-      }
-
-      default: {
-        return state;
-      }
-    }
-  }