From a958109e2a310cc13c6a12387838d7df6b2b3376 Mon Sep 17 00:00:00 2001 From: insanity Date: Fri, 25 May 2018 12:31:08 +0900 Subject: [PATCH] notification in progress --- @overflow/notification/component/index.ts | 4 +- .../list.component.html} | 0 .../list.component.spec.ts} | 12 +- .../component/list/list.component.ts | 104 +++++++++++++++ .../notification/notification.component.ts | 124 ------------------ @overflow/notification/container/index.ts | 5 + .../list/list-container.component.html | 1 + .../list/list-container.component.ts | 42 ++++++ @overflow/notification/notification.module.ts | 3 + .../service/notification.service.ts | 15 ++- @overflow/notification/store/index.ts | 19 +-- .../store/{ => notification}/detail/index.ts | 0 .../detail/notification.action.ts | 0 .../detail/notification.effect.spec.ts | 0 .../detail/notification.effect.ts | 0 .../detail/notification.reducer.ts | 0 .../detail/notification.state.ts | 0 .../store/{list => notification}/index.ts | 0 .../store/notification/list/index.ts | 4 + .../list/notification.action.ts | 0 .../list/notification.effect.spec.ts | 0 .../list/notification.effect.ts | 0 .../list/notification.reducer.ts | 0 .../list/notification.state.ts | 0 .../store/notification/notification.action.ts | 60 +++++++++ .../store/notification/notification.effect.ts | 64 +++++++++ .../notification/notification.reducer.ts | 63 +++++++++ .../store/notification/notification.state.ts | 12 ++ .../app.notification.component.ts | 66 +++++----- .../notification-page.component.html | 2 +- .../notification-page.component.ts | 10 +- src/app/pages/pages-routing.module.ts | 2 +- 32 files changed, 422 insertions(+), 190 deletions(-) rename @overflow/notification/component/{notification/notification.component.html => list/list.component.html} (100%) rename @overflow/notification/component/{notification/notification.component.spec.ts => list/list.component.spec.ts} (52%) create mode 100644 @overflow/notification/component/list/list.component.ts delete mode 100644 @overflow/notification/component/notification/notification.component.ts create mode 100644 @overflow/notification/container/index.ts create mode 100644 @overflow/notification/container/list/list-container.component.html create mode 100644 @overflow/notification/container/list/list-container.component.ts rename @overflow/notification/store/{ => notification}/detail/index.ts (100%) rename @overflow/notification/store/{ => notification}/detail/notification.action.ts (100%) rename @overflow/notification/store/{ => notification}/detail/notification.effect.spec.ts (100%) rename @overflow/notification/store/{ => notification}/detail/notification.effect.ts (100%) rename @overflow/notification/store/{ => notification}/detail/notification.reducer.ts (100%) rename @overflow/notification/store/{ => notification}/detail/notification.state.ts (100%) rename @overflow/notification/store/{list => notification}/index.ts (100%) create mode 100644 @overflow/notification/store/notification/list/index.ts rename @overflow/notification/store/{ => notification}/list/notification.action.ts (100%) rename @overflow/notification/store/{ => notification}/list/notification.effect.spec.ts (100%) rename @overflow/notification/store/{ => notification}/list/notification.effect.ts (100%) rename @overflow/notification/store/{ => notification}/list/notification.reducer.ts (100%) rename @overflow/notification/store/{ => notification}/list/notification.state.ts (100%) create mode 100644 @overflow/notification/store/notification/notification.action.ts create mode 100644 @overflow/notification/store/notification/notification.effect.ts create mode 100644 @overflow/notification/store/notification/notification.reducer.ts create mode 100644 @overflow/notification/store/notification/notification.state.ts diff --git a/@overflow/notification/component/index.ts b/@overflow/notification/component/index.ts index 1cb0950..0679aa6 100644 --- a/@overflow/notification/component/index.ts +++ b/@overflow/notification/component/index.ts @@ -1,5 +1,5 @@ -import { NotificationComponent } from './notification/notification.component'; +import { NotificationListComponent } from './list/list.component'; export const COMPONENTS = [ - NotificationComponent, + NotificationListComponent, ]; diff --git a/@overflow/notification/component/notification/notification.component.html b/@overflow/notification/component/list/list.component.html similarity index 100% rename from @overflow/notification/component/notification/notification.component.html rename to @overflow/notification/component/list/list.component.html diff --git a/@overflow/notification/component/notification/notification.component.spec.ts b/@overflow/notification/component/list/list.component.spec.ts similarity index 52% rename from @overflow/notification/component/notification/notification.component.spec.ts rename to @overflow/notification/component/list/list.component.spec.ts index 69192c5..f78097e 100644 --- a/@overflow/notification/component/notification/notification.component.spec.ts +++ b/@overflow/notification/component/list/list.component.spec.ts @@ -1,20 +1,20 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; -import { NotificationComponent } from './notification.component'; +import { NotificationListComponent } from './list.component'; -describe('NotificationComponent', () => { - let component: NotificationComponent; - let fixture: ComponentFixture; +describe('NotificationListComponent', () => { + let component: NotificationListComponent; + let fixture: ComponentFixture; beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ NotificationComponent ] + declarations: [ NotificationListComponent ] }) .compileComponents(); })); beforeEach(() => { - fixture = TestBed.createComponent(NotificationComponent); + fixture = TestBed.createComponent(NotificationListComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/@overflow/notification/component/list/list.component.ts b/@overflow/notification/component/list/list.component.ts new file mode 100644 index 0000000..6b444d9 --- /dev/null +++ b/@overflow/notification/component/list/list.component.ts @@ -0,0 +1,104 @@ +import { Component, Input } from '@angular/core'; +import { Notification } from '@overflow/commons-typescript/model/notification'; + +@Component({ + selector: 'of-notification-list', + templateUrl: './list.component.html', +}) +export class NotificationListComponent { + + @Input() notifications: Notification[]; + + constructor( + ) { } + + // ngOnInit() { + // // this.notificationSubscription$ = this.notification$.subscribe( + // // (page: Page) => { + // // if (page !== null) { + // // this.notifications = page.content; + // // this.totalLength = page.totalElements; + // // } + // // }, + // // (error: RPCClientError) => { + // // console.log(error.response.message); + // // } + // // ); + + // this.readSuccess$.subscribe( + // (noti: Notification) => { + // if (noti) { + // this.getNotifications(this.currPage); + // } + // }, + // (error: RPCClientError) => { + // console.log(error.response.message); + // } + // ); + // } + + // ngAfterContentInit() { + // this.getNotifications(this.currPage); + // } + + // ngOnDestroy() { + // if (this.notificationSubscription$) { + // this.notificationSubscription$.unsubscribe(); + // } + // } + + // // updateData(noti: Notification) { + // // for (let i = 0; i < this.notifications.length; i++) { + // // const exist = this.notifications[i]; + // // if (exist.id === noti.id) { + // // this.notifications[i] = noti; + // // return; + // // } + // // } + // // } + + // getNotifications(pageIndex: number) { + // // this.listStore.select(AuthSelector.select('member')).subscribe( + // // (member: Member) => { + // // const pageParams: PageParams = { + // // pageNo: pageIndex + '', + // // countPerPage: this.pageSize, + // // sortCol: 'id', + // // sortDirection: 'descending' + // // }; + // // this.listStore.dispatch(new ListStore.ReadAllByMember({ member, pageParams })); + // // this.currPage = pageIndex; + // // }, + // // (error) => { + // // console.log(error); + // // } + // // ); + // } + + // onRowSelect(event) { + // this.detailStore.dispatch(new DetailStore.MarkAsRead(event.data)); + // alert('Will redirect to ' + event.data.url); + // // this.router.navigate([n.url]); + // } + + // onPaging(e) { + // this.getNotifications(e.page); + // } + + // onMarkAllAsRead() { + // // this.listStore.select(AuthSelector.select('member')).subscribe( + // // (member: Member) => { + // // const pageParams: PageParams = { + // // pageNo: this.currPage + '', + // // countPerPage: this.pageSize, + // // sortCol: 'id', + // // sortDirection: 'descending' + // // }; + // // this.listStore.dispatch(new ListStore.MarkAllAsRead({ member, pageParams })); + // // }, + // // (error) => { + // // console.log(error); + // // } + // // ); + // } +} diff --git a/@overflow/notification/component/notification/notification.component.ts b/@overflow/notification/component/notification/notification.component.ts deleted file mode 100644 index 2cba7d4..0000000 --- a/@overflow/notification/component/notification/notification.component.ts +++ /dev/null @@ -1,124 +0,0 @@ -import { Component, OnInit, Input, ViewChild, AfterContentInit, OnDestroy } from '@angular/core'; -import { Router } from '@angular/router'; -import { Store, select } from '@ngrx/store'; -import { RPCClientError } from '@loafer/ng-rpc'; -import { Notification } from '@overflow/commons-typescript/model/notification'; -import * as DetailStore from '../../store/detail'; -import * as ListStore from '../../store/list'; -import { ReadAllByMemberSelector, ReadSelector } from '../../store'; -import { AuthSelector } from '@overflow/member/store'; -import { Member } from '@overflow/commons-typescript/model/member'; -// import { PageParams, Page } from 'app/commons/model'; -import { Subscription } from 'rxjs/Subscription'; - -@Component({ - selector: 'of-notification', - templateUrl: './notification.component.html', -}) -export class NotificationComponent implements OnInit, AfterContentInit, OnDestroy { - - notificationSubscription$: Subscription; - notification$ = this.listStore.pipe(select(ReadAllByMemberSelector.select('page'))); - notifications: Notification[]; - readSuccess$ = this.detailStore.pipe(select(ReadSelector.select('notification'))); - - pageSize = '10'; - totalLength = 0; - currPage = 0; - - constructor( - private router: Router, - private listStore: Store, - private detailStore: Store - ) { } - - ngOnInit() { - // this.notificationSubscription$ = this.notification$.subscribe( - // (page: Page) => { - // if (page !== null) { - // this.notifications = page.content; - // this.totalLength = page.totalElements; - // } - // }, - // (error: RPCClientError) => { - // console.log(error.response.message); - // } - // ); - - this.readSuccess$.subscribe( - (noti: Notification) => { - if (noti) { - this.getNotifications(this.currPage); - } - }, - (error: RPCClientError) => { - console.log(error.response.message); - } - ); - } - - ngAfterContentInit() { - this.getNotifications(this.currPage); - } - - ngOnDestroy() { - if (this.notificationSubscription$) { - this.notificationSubscription$.unsubscribe(); - } - } - - // updateData(noti: Notification) { - // for (let i = 0; i < this.notifications.length; i++) { - // const exist = this.notifications[i]; - // if (exist.id === noti.id) { - // this.notifications[i] = noti; - // return; - // } - // } - // } - - getNotifications(pageIndex: number) { - // this.listStore.select(AuthSelector.select('member')).subscribe( - // (member: Member) => { - // const pageParams: PageParams = { - // pageNo: pageIndex + '', - // countPerPage: this.pageSize, - // sortCol: 'id', - // sortDirection: 'descending' - // }; - // this.listStore.dispatch(new ListStore.ReadAllByMember({ member, pageParams })); - // this.currPage = pageIndex; - // }, - // (error) => { - // console.log(error); - // } - // ); - } - - onRowSelect(event) { - this.detailStore.dispatch(new DetailStore.MarkAsRead(event.data)); - alert('Will redirect to ' + event.data.url); - // this.router.navigate([n.url]); - } - - onPaging(e) { - this.getNotifications(e.page); - } - - onMarkAllAsRead() { - // this.listStore.select(AuthSelector.select('member')).subscribe( - // (member: Member) => { - // const pageParams: PageParams = { - // pageNo: this.currPage + '', - // countPerPage: this.pageSize, - // sortCol: 'id', - // sortDirection: 'descending' - // }; - // this.listStore.dispatch(new ListStore.MarkAllAsRead({ member, pageParams })); - // }, - // (error) => { - // console.log(error); - // } - // ); - } -} diff --git a/@overflow/notification/container/index.ts b/@overflow/notification/container/index.ts new file mode 100644 index 0000000..fe9038e --- /dev/null +++ b/@overflow/notification/container/index.ts @@ -0,0 +1,5 @@ +import { NotificationListContainerComponent } from './list/list-container.component'; + +export const CONTAINER_COMPONENTS = [ + NotificationListContainerComponent, +]; diff --git a/@overflow/notification/container/list/list-container.component.html b/@overflow/notification/container/list/list-container.component.html new file mode 100644 index 0000000..58bb202 --- /dev/null +++ b/@overflow/notification/container/list/list-container.component.html @@ -0,0 +1 @@ + diff --git a/@overflow/notification/container/list/list-container.component.ts b/@overflow/notification/container/list/list-container.component.ts new file mode 100644 index 0000000..222e31b --- /dev/null +++ b/@overflow/notification/container/list/list-container.component.ts @@ -0,0 +1,42 @@ +import { Component, OnInit } from '@angular/core'; +import { AfterContentInit, OnDestroy } from '@angular/core/src/metadata/lifecycle_hooks'; +import { Store, select } from '@ngrx/store'; +import { Observable } from 'rxjs/Observable'; +import { Domain } from '@overflow/commons-typescript/model/domain'; +import * as ListStore from '../../store/notification'; +import { NotificationSelector } from '../../store'; +import { AuthSelector } from '../../../member/store'; +import { Member } from '@overflow/commons-typescript/model/member'; +import { PageParams } from '@overflow/commons-typescript/model/commons/PageParams'; + +@Component({ + selector: 'of-notification-container', + templateUrl: './list-container.component.html', +}) +export class NotificationListContainerComponent implements OnInit { + notifications$: Observable; + + constructor( + private store: Store, + ) { + this.notifications$ = store.pipe(select(NotificationSelector.select('notifications'))); + } + + ngOnInit() { + this.store.select(AuthSelector.select('member')).subscribe( + (member: Member) => { + const pageParams: PageParams = { + pageNo: 0, + countPerPage: 10, + sortCol: 'id', + sortDirection: 'descending', + }; + this.store.dispatch(new ListStore.ReadAllByMember({member, pageParams})); + }, + (error) => { + console.log(error); + } + ); + } + +} diff --git a/@overflow/notification/notification.module.ts b/@overflow/notification/notification.module.ts index f2051cd..eba033d 100644 --- a/@overflow/notification/notification.module.ts +++ b/@overflow/notification/notification.module.ts @@ -2,6 +2,7 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { COMPONENTS } from './component'; +import { CONTAINER_COMPONENTS } from './container'; import { SERVICES } from './service'; import { NotificationStoreModule } from './notification-store.module'; @@ -15,9 +16,11 @@ import { PrimeNGModules } from '../commons/prime-ng/prime-ng.module'; ], declarations: [ COMPONENTS, + CONTAINER_COMPONENTS ], exports: [ COMPONENTS, + CONTAINER_COMPONENTS ], providers: [ SERVICES, diff --git a/@overflow/notification/service/notification.service.ts b/@overflow/notification/service/notification.service.ts index b0286f6..9a515e2 100644 --- a/@overflow/notification/service/notification.service.ts +++ b/@overflow/notification/service/notification.service.ts @@ -7,7 +7,8 @@ import { RPCService } from '@loafer/ng-rpc'; import { Notification } from '@overflow/commons-typescript/model/notification'; import { Member } from '@overflow/commons-typescript/model/member'; -// import { PageParams, Page } from 'app/commons/model'; +import { PageParams } from '@overflow/commons-typescript/model/commons/PageParams'; +import { Page } from '@overflow/commons-typescript/model/commons/Page'; @Injectable() export class NotificationService { @@ -18,13 +19,13 @@ export class NotificationService { } - // public readAllByMember(member: Member, pageParams: PageParams): Observable { - // return this.rpcService.call('NotificationService.readAllByMember', member, pageParams); - // } + public readAllByMember(member: Member, pageParams: PageParams): Observable { + return this.rpcService.call('NotificationService.readAllByMember', member, pageParams); + } - // public markAllAsRead(member: Member, pageParams: PageParams): Observable { - // return this.rpcService.call('NotificationService.markAllAsRead', member, pageParams); - // } + public markAllAsRead(member: Member, pageParams: PageParams): Observable { + return this.rpcService.call('NotificationService.markAllAsRead', member, pageParams); + } public markAsRead(notification: Notification): Observable { return this.rpcService.call('NotificationService.markAsRead', notification); diff --git a/@overflow/notification/store/index.ts b/@overflow/notification/store/index.ts index 3771ae5..fd6678f 100644 --- a/@overflow/notification/store/index.ts +++ b/@overflow/notification/store/index.ts @@ -1,38 +1,29 @@ import { createSelector, createFeatureSelector, - ActionReducerMap, } from '@ngrx/store'; import { StateSelector } from '@overflow/core/ngrx/store'; import { MODULE } from '../notification.constant'; -import * as ListStore from './list'; -import * as DetailStore from './detail'; +import * as NotificationStore from './notification'; export interface State { - notifications: ListStore.State; - notification: DetailStore.State; + notification: NotificationStore.State; } export const REDUCERS = { - notifications: ListStore.reducer, - notification: DetailStore.reducer, + notification: NotificationStore.reducer, }; export const EFFECTS = [ - ListStore.Effects, - DetailStore.Effects, + NotificationStore.Effects, ]; export const selectNotificationState = createFeatureSelector(MODULE.name); -export const ReadAllByMemberSelector = new StateSelector(createSelector( - selectNotificationState, - (state: State) => state.notifications -)); -export const ReadSelector = new StateSelector(createSelector( +export const NotificationSelector = new StateSelector(createSelector( selectNotificationState, (state: State) => state.notification )); diff --git a/@overflow/notification/store/detail/index.ts b/@overflow/notification/store/notification/detail/index.ts similarity index 100% rename from @overflow/notification/store/detail/index.ts rename to @overflow/notification/store/notification/detail/index.ts diff --git a/@overflow/notification/store/detail/notification.action.ts b/@overflow/notification/store/notification/detail/notification.action.ts similarity index 100% rename from @overflow/notification/store/detail/notification.action.ts rename to @overflow/notification/store/notification/detail/notification.action.ts diff --git a/@overflow/notification/store/detail/notification.effect.spec.ts b/@overflow/notification/store/notification/detail/notification.effect.spec.ts similarity index 100% rename from @overflow/notification/store/detail/notification.effect.spec.ts rename to @overflow/notification/store/notification/detail/notification.effect.spec.ts diff --git a/@overflow/notification/store/detail/notification.effect.ts b/@overflow/notification/store/notification/detail/notification.effect.ts similarity index 100% rename from @overflow/notification/store/detail/notification.effect.ts rename to @overflow/notification/store/notification/detail/notification.effect.ts diff --git a/@overflow/notification/store/detail/notification.reducer.ts b/@overflow/notification/store/notification/detail/notification.reducer.ts similarity index 100% rename from @overflow/notification/store/detail/notification.reducer.ts rename to @overflow/notification/store/notification/detail/notification.reducer.ts diff --git a/@overflow/notification/store/detail/notification.state.ts b/@overflow/notification/store/notification/detail/notification.state.ts similarity index 100% rename from @overflow/notification/store/detail/notification.state.ts rename to @overflow/notification/store/notification/detail/notification.state.ts diff --git a/@overflow/notification/store/list/index.ts b/@overflow/notification/store/notification/index.ts similarity index 100% rename from @overflow/notification/store/list/index.ts rename to @overflow/notification/store/notification/index.ts diff --git a/@overflow/notification/store/notification/list/index.ts b/@overflow/notification/store/notification/list/index.ts new file mode 100644 index 0000000..c7467b0 --- /dev/null +++ b/@overflow/notification/store/notification/list/index.ts @@ -0,0 +1,4 @@ +export * from './notification.action'; +export * from './notification.effect'; +export * from './notification.reducer'; +export * from './notification.state'; diff --git a/@overflow/notification/store/list/notification.action.ts b/@overflow/notification/store/notification/list/notification.action.ts similarity index 100% rename from @overflow/notification/store/list/notification.action.ts rename to @overflow/notification/store/notification/list/notification.action.ts diff --git a/@overflow/notification/store/list/notification.effect.spec.ts b/@overflow/notification/store/notification/list/notification.effect.spec.ts similarity index 100% rename from @overflow/notification/store/list/notification.effect.spec.ts rename to @overflow/notification/store/notification/list/notification.effect.spec.ts diff --git a/@overflow/notification/store/list/notification.effect.ts b/@overflow/notification/store/notification/list/notification.effect.ts similarity index 100% rename from @overflow/notification/store/list/notification.effect.ts rename to @overflow/notification/store/notification/list/notification.effect.ts diff --git a/@overflow/notification/store/list/notification.reducer.ts b/@overflow/notification/store/notification/list/notification.reducer.ts similarity index 100% rename from @overflow/notification/store/list/notification.reducer.ts rename to @overflow/notification/store/notification/list/notification.reducer.ts diff --git a/@overflow/notification/store/list/notification.state.ts b/@overflow/notification/store/notification/list/notification.state.ts similarity index 100% rename from @overflow/notification/store/list/notification.state.ts rename to @overflow/notification/store/notification/list/notification.state.ts diff --git a/@overflow/notification/store/notification/notification.action.ts b/@overflow/notification/store/notification/notification.action.ts new file mode 100644 index 0000000..3d75d3f --- /dev/null +++ b/@overflow/notification/store/notification/notification.action.ts @@ -0,0 +1,60 @@ +import { Action } from '@ngrx/store'; +import { RPCClientError } from '@loafer/ng-rpc'; +import { Member } from '@overflow/commons-typescript/model/member'; +import { PageParams } from '@overflow/commons-typescript/model/commons/PageParams'; +import { Page } from '@overflow/commons-typescript/model/commons/Page'; + +export enum ActionType { + ReadAllByMember = '[Notification.list] ReadAllByMember', + ReadAllByMemberSuccess = '[Notification.list] ReadAllByMemberSuccess', + ReadAllByMemberFailure = '[Notification.list] ReadAllByMemberFailure', + MarkAllAsRead = '[Notification.mark] MarkAllAsRead', + MarkAllAsReadSuccess = '[Notification.mark] MarkAllAsReadSuccess', + MarkAllAsReadFailure = '[Notification.mark] MarkAllAsReadFailure', +} + +export class ReadAllByMember implements Action { + readonly type = ActionType.ReadAllByMember; + + constructor(public payload: { member: Member, pageParams: PageParams }) {} +} + +export class ReadAllByMemberSuccess implements Action { + readonly type = ActionType.ReadAllByMemberSuccess; + + constructor(public payload: Page) {} +} + +export class ReadAllByMemberFailure implements Action { + readonly type = ActionType.ReadAllByMemberFailure; + + constructor(public payload: RPCClientError) {} +} + +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: RPCClientError) {} +} + + +export type Actions = + | ReadAllByMember + | ReadAllByMemberSuccess + | ReadAllByMemberFailure + | MarkAllAsRead + | MarkAllAsReadSuccess + | MarkAllAsReadFailure +; diff --git a/@overflow/notification/store/notification/notification.effect.ts b/@overflow/notification/store/notification/notification.effect.ts new file mode 100644 index 0000000..c530000 --- /dev/null +++ b/@overflow/notification/store/notification/notification.effect.ts @@ -0,0 +1,64 @@ +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/switchMap'; +import 'rxjs/add/operator/map'; +import 'rxjs/add/operator/take'; + +import { RPCClientError } from '@loafer/ng-rpc'; + +import { Domain } from '@overflow/commons-typescript/model/domain'; + +import { + ReadAllByMember, + ReadAllByMemberSuccess, + ReadAllByMemberFailure, + MarkAllAsRead, + MarkAllAsReadSuccess, + MarkAllAsReadFailure, + ActionType, +} from './notification.action'; +import { NotificationService } from '../../service/notification.service'; + +@Injectable() +export class Effects { + + constructor( + private actions$: Actions, + private notificationService: NotificationService, + private router: Router + ) { } + + @Effect() + readAllByMember$: Observable = this.actions$ + .ofType(ActionType.ReadAllByMember) + .map((action: ReadAllByMember) => action.payload) + .switchMap(payload => this.notificationService.readAllByMember(payload.member, payload.pageParams)) + .map(page => { + return new ReadAllByMemberSuccess(page); + }) + .catch((error: RPCClientError) => { + return of(new ReadAllByMemberFailure(error)); + }); + + @Effect() + markAllAsRead$: Observable = 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: RPCClientError) => { + return of(new MarkAllAsReadFailure(error)); + }); +} diff --git a/@overflow/notification/store/notification/notification.reducer.ts b/@overflow/notification/store/notification/notification.reducer.ts new file mode 100644 index 0000000..a44cd3d --- /dev/null +++ b/@overflow/notification/store/notification/notification.reducer.ts @@ -0,0 +1,63 @@ +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, + }; + } + + case ActionType.ReadAllByMemberSuccess: { + return { + ...state, + error: null, + page: action.payload, + }; + } + + case ActionType.ReadAllByMemberFailure: { + return { + ...state, + error: action.payload, + page: null, + }; + } + + case ActionType.MarkAllAsRead: { + return { + ...state, + error: null, + }; + } + + case ActionType.MarkAllAsReadSuccess: { + return { + ...state, + error: null, + page: action.payload, + }; + } + + case ActionType.MarkAllAsReadFailure: { + return { + ...state, + error: action.payload, + page: null, + }; + } + + default: { + return state; + } + } +} diff --git a/@overflow/notification/store/notification/notification.state.ts b/@overflow/notification/store/notification/notification.state.ts new file mode 100644 index 0000000..927fa03 --- /dev/null +++ b/@overflow/notification/store/notification/notification.state.ts @@ -0,0 +1,12 @@ +import { RPCClientError } from '@loafer/ng-rpc'; +import { Page } from '@overflow/commons-typescript/model/commons/Page'; + +export interface State { + error: RPCClientError | null; + page: Page | null; +} + +export const initialState: State = { + error: null, + page: null, +}; diff --git a/src/app/commons/component/layout/notification/app.notification.component.ts b/src/app/commons/component/layout/notification/app.notification.component.ts index 95b7ef4..c2de532 100644 --- a/src/app/commons/component/layout/notification/app.notification.component.ts +++ b/src/app/commons/component/layout/notification/app.notification.component.ts @@ -1,8 +1,7 @@ import { Component, Injectable, OnInit, AfterContentInit, Output, EventEmitter, OnDestroy } from '@angular/core'; -import * as ListStore from '@overflow/notification/store/list'; -import * as DetailStore from '@overflow/notification/store/detail'; +import * as NotificationStore from '@overflow/notification/store/notification'; import { Store, select } from '@ngrx/store'; -import { ReadAllByMemberSelector, ReadSelector } from '@overflow/notification/store'; +import { NotificationSelector } from '@overflow/notification/store'; import { Page } from '@overflow/commons-typescript/model/commons/Page'; import { PageParams } from '@overflow/commons-typescript/model/commons/PageParams'; import { RPCClientError } from '@loafer/ng-rpc'; @@ -20,32 +19,31 @@ import { Subscription } from 'rxjs/Subscription'; export class AppNotificationComponent implements OnInit, AfterContentInit, OnDestroy { - notificationSubscription$: Subscription; - notification$ = this.listStore.pipe(select(ReadAllByMemberSelector.select('page'))); - notifications: Notification[]; + // notificationSubscription$: Subscription; + // notification$ = this.listStore.pipe(select(NotificationSelector.select('page'))); + // notifications: Notification[]; @Output() notificationLoaded = new EventEmitter(); constructor( private router: Router, private app: PagesComponent, - private listStore: Store, - private detailStore: Store, + private notificationStore: Store, ) { } ngOnInit() { - this.notificationSubscription$ = this.notification$.subscribe( - (page: Page) => { - if (page !== null && page !== undefined) { - this.notifications = page.content; - this.getUnconfirmedCount(); - } - }, - (error: RPCClientError) => { - console.log(error.response.message); - } - ); + // this.notificationSubscription$ = this.notification$.subscribe( + // (page: Page) => { + // if (page !== null && page !== undefined) { + // this.notifications = page.content; + // this.getUnconfirmedCount(); + // } + // }, + // (error: RPCClientError) => { + // console.log(error.response.message); + // } + // ); } ngAfterContentInit() { @@ -66,22 +64,22 @@ export class AppNotificationComponent implements OnInit, AfterContentInit, OnDes } ngOnDestroy() { - if (this.notificationSubscription$) { - this.notificationSubscription$.unsubscribe(); - } + // if (this.notificationSubscription$) { + // this.notificationSubscription$.unsubscribe(); + // } } getUnconfirmedCount() { - if (this.notifications === null || this.notifications.length === 0) { - return; - } - let totalCnt = 0; - for (let i = 0; i < 5; i ++) { - if (!this.notifications[i].confirmDate) { - totalCnt += 1; - } - } - this.notificationLoaded.emit(totalCnt); + // if (this.notifications === null || this.notifications.length === 0) { + // return; + // } + // let totalCnt = 0; + // for (let i = 0; i < 5; i ++) { + // if (!this.notifications[i].confirmDate) { + // totalCnt += 1; + // } + // } + // this.notificationLoaded.emit(totalCnt); } onViewAllClick() { @@ -89,7 +87,7 @@ export class AppNotificationComponent implements OnInit, AfterContentInit, OnDes } onNotiClick(notification: Notification) { - this.detailStore.dispatch(new DetailStore.MarkAsRead(notification)); - alert('Will redirect to ' + notification.url); + // this.detailStore.dispatch(new DetailStore.MarkAsRead(notification)); + // alert('Will redirect to ' + notification.url); } } diff --git a/src/app/pages/notification/notification-page.component.html b/src/app/pages/notification/notification-page.component.html index d531f1a..3025bd7 100644 --- a/src/app/pages/notification/notification-page.component.html +++ b/src/app/pages/notification/notification-page.component.html @@ -2,7 +2,7 @@
- +
diff --git a/src/app/pages/notification/notification-page.component.ts b/src/app/pages/notification/notification-page.component.ts index de2a70b..9dc21bc 100644 --- a/src/app/pages/notification/notification-page.component.ts +++ b/src/app/pages/notification/notification-page.component.ts @@ -1,4 +1,6 @@ import { Component, OnInit } from '@angular/core'; +import { BreadcrumbService } from '../../commons/service/breadcrumb.service'; + @Component({ selector: 'of-page-notification', @@ -6,7 +8,13 @@ import { Component, OnInit } from '@angular/core'; }) export class NotificationPageComponent implements OnInit { - constructor() { } + constructor( + private breadcrumbService: BreadcrumbService + ) { + breadcrumbService.setItems([ + { label: 'Notifications', routerLink: ['/notification'] }, + ]); + } ngOnInit() { } diff --git a/src/app/pages/pages-routing.module.ts b/src/app/pages/pages-routing.module.ts index 6b389b1..da36dea 100644 --- a/src/app/pages/pages-routing.module.ts +++ b/src/app/pages/pages-routing.module.ts @@ -17,7 +17,7 @@ const routes: Routes = [ // { path: 'target', loadChildren: './target/target-page.module#TargetPageModule' }, // { path: 'overview', loadChildren: './overview/overview-page.module#OverviewPageModule' }, // { path: 'dashboard', loadChildren: './dashboard/dashboard-page.module#DashboardPageModule' }, - // { path: 'notification', loadChildren: './notification/notification-page.module#NotificationPageModule' }, + { path: 'notification', loadChildren: './notification/notification-page.module#NotificationPageModule' }, // { path: 'alert', loadChildren: './alert/alert-page.module#AlertPageModule' }, // { path: 'report', loadChildren: './report/report-page.module#ReportPageModule' }, // { path: 'log', loadChildren: './log/log-page.module#LogPageModule' },