probe selector

src/packages/probe/component/list/list.component.ts

@@ -3,9 +3,12 @@ import { MatTableDataSource, MatSort } from '@angular/material';
 import { AfterContentInit } from '@angular/core/src/metadata/lifecycle_hooks';
 import { Router } from '@angular/router';
 import { Probe } from '../../model';
-import { Store } from '@ngrx/store';
+import { Store, select } from '@ngrx/store';
 import * as ListStore from '../../store/list';
 import { Domain } from '../../../domain/model';
+import { AuthSelector } from '../../../member/store';
+import { ErrorResponse } from '../../../commons/service/error-response';
+import { ListSelector } from '../../store';
 
 @Component({
   selector: 'of-probe-list',
@@ -13,7 +16,7 @@ import { Domain } from '../../../domain/model';
   styleUrls: ['./list.component.scss']
 })
 export class ListComponent implements OnInit, AfterContentInit {
-
+  probes$ = this.store.pipe(select(ListSelector.select('probes')));
   pageSize = '25';
   length = '100';
 
@@ -24,42 +27,57 @@ export class ListComponent implements OnInit, AfterContentInit {
   constructor(
     private router: Router,
     private store: Store<ListStore.State>
-  ) { }
+  ) {
+  }
 
   ngAfterContentInit() {
-    // const domain: Domain = {
-    //   id: 1,
-    // };
-    // this.store.dispatch(new ListStore.ReadAllByDomain(domain));
+    this.probes$.subscribe(
+      (probes: Probe[]) => {
+        this.dataSource = new MatTableDataSource(probes);
+        this.dataSource.sort = this.sort;
+      },
+      (error: ErrorResponse) => {
 
-    // temporary data
-    const data: Probe[] = new Array();
-    for (let i = 0; i < 100; i++) {
-      const p: Probe = {
-        id: i,
-        displayName: String('displayName' + i),
-        host: {
-          ip: i,
-          os: {
-            meta: 'blahblahblah'
-          },
-        },
-        cidr: String('cidr' + i),
-        targets: [
-          {
-            id: i,
-          },
-        ],
-        authorizeDate: new Date(),
-        authorizeMember: {
-          'name': String('insanity')
-        },
-      };
-      data.push(p);
-    }
+      }
+    );
 
-    this.dataSource = new MatTableDataSource(data);
-    this.dataSource.sort = this.sort;
+    this.store.select(AuthSelector.select('domain')).subscribe(
+      (domain: Domain) => {
+        this.store.dispatch(new ListStore.ReadAllByDomain(domain));
+      },
+      (error) => {
+
+      }
+    );
+
+    // // temporary data
+    // const data: Probe[] = new Array();
+    // for (let i = 0; i < 100; i++) {
+    //   const p: Probe = {
+    //     id: i,
+    //     displayName: String('displayName' + i),
+    //     host: {
+    //       ip: i,
+    //       os: {
+    //         meta: 'blahblahblah'
+    //       },
+    //     },
+    //     cidr: String('cidr' + i),
+    //     targets: [
+    //       {
+    //         id: i,
+    //       },
+    //     ],
+    //     authorizeDate: new Date(),
+    //     authorizeMember: {
+    //       'name': String('insanity')
+    //     },
+    //   };
+    //   data.push(p);
+    // }
+
+    // this.dataSource = new MatTableDataSource(data);
+    // this.dataSource.sort = this.sort;
   }
 
   ngOnInit() {

src/packages/probe/store/index.ts

@@ -1,3 +1,13 @@
+import {
+  createSelector,
+  createFeatureSelector,
+  ActionReducerMap,
+} from '@ngrx/store';
+
+import { StateSelector } from 'packages/commons/util/ngrx/store';
+
+import { MODULE } from '../probe.constant';
+
 import * as ProbeListStore from './list';
 import * as ProbeDetailStore from './detail';
 
@@ -15,3 +25,10 @@ export const EFFECTS = [
   ProbeListStore.Effects,
   ProbeDetailStore.Effects,
 ];
+
+export const selectProbeState = createFeatureSelector<State>(MODULE.name);
+
+export const ListSelector = new StateSelector<ProbeListStore.State>(createSelector(
+  selectProbeState,
+  (state: State) => state.list
+));