in progress

@overflow/notification/component/badge/badge.component.html

@@ -0,0 +1,3 @@
+<div *ngFor="let notification of notificationPage.content">
+    <div>{{notification.title}}</div>
+</div>

@overflow/notification/component/badge/badge.component.spec.ts

@@ -1,6 +1,6 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { NotificationBadgeComponent } from './notification.component';
+import { NotificationBadgeComponent } from './badge.component';
 
 describe('NotificationBadgeComponent', () => {
   let component: NotificationBadgeComponent;

@overflow/notification/component/badge/badge.component.ts

@@ -0,0 +1,13 @@
+import { Component, Input, EventEmitter, Output, ViewChild, OnInit } from '@angular/core';
+import { Notification } from '@overflow/commons-typescript/model/notification';
+import { Page } from '@overflow/commons-typescript/model/commons/Page';
+import { Paginator } from 'primeng/primeng';
+
+@Component({
+    selector: 'of-notification-badge',
+    templateUrl: './badge.component.html',
+})
+export class NotificationBadgeComponent {
+
+    @Input() notificationPage: Page<Notification>;
+}

@overflow/notification/component/badge/notification.component.ts

@@ -1,119 +0,0 @@
-import { Component, OnInit, Input, AfterContentInit } 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 ListStore from '../../store/list';
-import * as DetailStore from '../../store/detail';
-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 { MarkAsRead } from '../../store/detail';
-
-@Component({
-  selector: 'of-notification-badge',
-  templateUrl: './notification.component.html',
-})
-export class NotificationBadgeComponent implements OnInit, AfterContentInit {
-  notification$ = this.listStore.pipe(select(ReadAllByMemberSelector.select('page')));
-  mark$ = this.detailStore.pipe(select(ReadSelector.select('notification')));
-  isOpen = false;
-  notifications: Notification[] = null;
-  badgeCount = 0;
-
-
-  constructor(
-    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;
-    //       this.getUnconfirmedCount(this.notifications);
-    //     }
-    //   },
-    //   (error: RPCClientError) => {
-    //     console.log(error.response.message);
-    //   }
-    // );
-    this.mark$.subscribe(
-      (n: Notification) => {
-        if (n !== null && n.confirmDate !== null) {
-          this.getNotifications(0);
-        }
-      },
-      (error: RPCClientError) => {
-        console.log(error.response.message);
-      }
-    );
-  }
-
-  ngAfterContentInit() {
-    this.getNotifications(0);
-  }
-
-  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);
-    //   }
-    // );
-  }
-
-  getUnconfirmedCount(notifications: Notification[]) {
-    let totalCnt = 0;
-    notifications.map( function(v, i) {
-      if (v.confirmDate === null) {
-        totalCnt += 1;
-      }
-    });
-    this.badgeCount = totalCnt;
-  }
-
-
-  mark(notification: Notification, e: Event) {
-    this.detailStore.dispatch(new DetailStore.MarkAsRead(notification));
-    e.stopPropagation();
-  }
-
-  handleClick(n: Notification) {
-    alert('Will redirect to ' + n.url);
-  }
-
-  handleMarkAllAsRead() {
-
-    // 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() {
-    this.isOpen = false;
-    this.router.navigate(['notification']);
-  }
-}

@overflow/notification/component/index.ts

@@ -1,5 +1,7 @@
 import { NotificationListComponent } from './list/list.component';
+import { NotificationBadgeComponent } from './badge/badge.component';
 
 export const COMPONENTS = [
   NotificationListComponent,
+  NotificationBadgeComponent
 ];

@overflow/notification/container/badge/badge-container.component.html

@@ -0,0 +1,2 @@
+<of-notification-badge [notificationPage]="notificationPage$ | async" 
+ ></of-notification-badge>

@overflow/notification/container/badge/badge-container.component.ts

@@ -0,0 +1,72 @@
+import { Component, OnInit, Output, EventEmitter, Input } 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';
+import { Page } from '@overflow/commons-typescript/model/commons/Page';
+import { Notification } from '@overflow/commons-typescript/model/notification';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+    selector: 'of-notification-badge-container',
+    templateUrl: './badge-container.component.html',
+})
+export class NotificationBadgeContainerComponent implements OnInit {
+    notificationPage$: Observable<Page<Notification>>;
+
+    constructor(
+        private store: Store<ListStore.State>,
+        private route: ActivatedRoute
+    ) {
+        this.notificationPage$ = store.pipe(select(NotificationSelector.select('page')));
+    }
+
+    ngOnInit() {
+        this.getNotifications();
+    }
+
+
+    getNotifications() {
+        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);
+            }
+        );
+    }
+
+    markAllasRead() {
+        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.MarkAllAsRead({ member, pageParams }));
+            },
+            (error) => {
+                console.log(error);
+            }
+        );
+    }
+
+    notificationSelected(notification: Notification) {
+        // this.router.navigate([notification.url]);
+        alert('redirect to ' + notification.url);
+    }
+}

@overflow/notification/container/index.ts

@@ -1,5 +1,7 @@
 import { NotificationListContainerComponent } from './list/list-container.component';
+import { NotificationBadgeContainerComponent } from './badge/badge-container.component';
 
 export const CONTAINER_COMPONENTS = [
+  NotificationBadgeContainerComponent,
   NotificationListContainerComponent,
 ];

@overflow/probe/container/probe-detail-container.html

@@ -1 +1 @@
-<of-probe-detail [probeHost]="(probeHosts$ | async)[0]" (modify)="onModify($event)" (discovery)="onDiscovery($event)"></of-probe-detail>
+<of-probe-detail [probeHost]="(probeHost$ | async)" (modify)="onModify($event)" (discovery)="onDiscovery($event)"></of-probe-detail>

@overflow/probe/container/probe-detail-container.ts

@@ -15,14 +15,14 @@ export class ProbeDetailContainerComponent implements OnInit {
 
   @Input() probeHostID;
   @Output() discovery = new EventEmitter<number>();
-  probeHosts$: Observable<ProbeHost[]>;
+  probeHost$: Observable<ProbeHost>;
   error$: Observable<RPCClientError>;
 
   constructor(
     private store: Store<ProbeStore.State>,
     private route: ActivatedRoute,
   ) {
-    this.probeHosts$ = store.pipe(select(ProbeSelector.select('probeHosts')));
+    this.probeHost$ = store.pipe(select(ProbeSelector.selectOne(this.probeHostID)));
   }
 
   ngOnInit() {

@overflow/probe/container/probe-list-container.ts

@@ -17,7 +17,7 @@ export class ProbeListContainerComponent implements OnInit {
     @Output() select = new EventEmitter();
 
     constructor(private store: Store<ProbeStore.State>) {
-        this.probeHosts$ = store.pipe(select(ProbeSelector.select('probeHosts')));
+        this.probeHosts$ = store.pipe(select(ProbeSelector.selectAll));
     }
 
     ngOnInit() {

@overflow/probe/store/entity/probe/probe.action.ts

@@ -61,7 +61,7 @@ export class Modify implements Action {
 export class ModifySuccess implements Action {
   readonly type = ActionType.ModifySuccess;
 
-  constructor(public payload: Probe) {}
+  constructor(public payload: ProbeHost) {}
 }
 
 export class ModifyFailure implements Action {

@overflow/probe/store/entity/probe/probe.reducer.ts

@@ -6,6 +6,7 @@ import {
 import {
   State,
   initialState,
+  probeAdapter,
 } from './probe.state';
 
 import { Probe } from '@overflow/commons-typescript/model/probe';
@@ -20,19 +21,11 @@ export function reducer(state = initialState, action: Actions): State {
     }
 
     case ActionType.ReadAllByDomainIDSuccess: {
-      return {
+      return probeAdapter.setAll(action.payload, state);
-        ...state,
-        error: null,
-        probeHosts: action.payload,
-      };
     }
 
     case ActionType.ReadAllByDomainIDFailure: {
-      return {
+      return probeAdapter.setError(action.payload, state);
-        ...state,
-        error: action.payload,
-        probeHosts: null,
-      };
     }
 
     case ActionType.Read: {
@@ -43,19 +36,11 @@ export function reducer(state = initialState, action: Actions): State {
     }
 
     case ActionType.ReadSuccess: {
-      return {
+      return probeAdapter.setOne(action.payload, state);
-        ...state,
-        error: null,
-        probeHosts: [action.payload],
-      };
     }
 
     case ActionType.ReadFailure: {
-      return {
+      return probeAdapter.setError(action.payload, state);
-        ...state,
-        error: action.payload,
-        probeHosts: null,
-      };
     }
 
     case ActionType.Modify: {
@@ -66,26 +51,11 @@ export function reducer(state = initialState, action: Actions): State {
     }
 
     case ActionType.ModifySuccess: {
-      return {
+      return probeAdapter.upsertOne(action.payload, state);
-        ...state,
-        probeHosts: state.probeHosts.map(
-          (probeHost, i) => probeHost.probe.id === action.payload.id ?
-          {
-            ...probeHost,
-            probe : action.payload
-          } : probeHost
-      ),
-        error: null,
-      };
     }
 
-
     case ActionType.ModifyFailure: {
-      return {
+      return probeAdapter.setError(action.payload, state);
-        ...state,
-        error: action.payload,
-        probeHosts: null,
-      };
     }
 
     default: {

@overflow/probe/store/entity/probe/probe.state.ts

@@ -1,12 +1,14 @@
 import { RPCClientError } from '@loafer/ng-rpc';
 import { ProbeHost } from '@overflow/commons-typescript/model/probe';
+import { Selector, createSelector } from '@ngrx/store';
+import { createEntityAdapter, EntityState } from '@loafer/ng-entity';
 
-export interface State {
+export const probeAdapter = createEntityAdapter<ProbeHost, RPCClientError>();
-  error: RPCClientError | null;
+export interface State extends EntityState<ProbeHost, RPCClientError> {
-  probeHosts: ProbeHost[] | null;
+}
+export const initialState: State = probeAdapter.getInitialState();
+
+export function getSelectors<S>(selector: Selector<any, State>) {
+  return probeAdapter.getSelectors(selector);
 }
 
-export const initialState: State = {
-  error: null,
-  probeHosts: null,
-};

@overflow/probe/store/index.ts

@@ -22,10 +22,11 @@ export const EFFECTS = [
   ProbeStore.Effects,
 ];
 
-export const selectProbeState = createFeatureSelector<State>(MODULE.name);
+export const selectState = createFeatureSelector<State>(MODULE.name);
 
-export const ProbeSelector = new StateSelector<ProbeStore.State>(createSelector(
+export const ProbeSelector = ProbeStore.getSelectors(createSelector(
-  selectProbeState,
+  selectState,
   (state: State) => state.probes
 ));
 
+

src/app/commons/component/layout/topbar/app.topbar.component.html

@@ -135,7 +135,8 @@
                     <span class="topbar-item-name">Notifications</span>
                 </a>
                 <ul class="ultima-menu animated fadeInDown">
-                    <of-notification-menu (notificationLoaded)="onNotiLoaded($event)"></of-notification-menu>
+                    <!-- <of-notification-badge-container></of-notification-badge-container> -->
+                    <!-- <of-notification-menu (notificationLoaded)="onNotiLoaded($event)"></of-notification-menu> -->
                     <!-- <li role="menuitem">
                         <a href="#" class="topbar-message">
                             <span>Give me a call</span>