Merge pull request onehungrymind#2 from onehungrymind/feature/ngrx-façade

Add a facade to the 'items' state

Author: Lukas Ruebbelke

apps/dashboard/src/app/home/home.component.html

@@ -1,7 +1,7 @@
 <div class="container">
   <div class="col-50">
-    <app-items-total [items]="items"></app-items-total>
-    <app-items-list [items]="items" [readonly]="true"></app-items-list>
+    <app-items-total [items]="items$ | async"></app-items-total>
+    <app-items-list [items]="items$ | async" [readonly]="true"></app-items-list>
   </div>
 
   <div class="col-50">

apps/dashboard/src/app/home/home.component.ts

@@ -1,10 +1,6 @@
-import { select, Store } from '@ngrx/store';
-import { ItemsActionTypes } from '../../../../../libs/common-data/src/lib/state/items.actions';
-import * as ItemsActions from '../../../../../libs/common-data/src/lib/state/items.actions';
-import { ItemsState } from '../../../../../libs/common-data/src/lib/state/items.reducer';
 import { Component, OnInit } from '@angular/core';
-import { Item, ItemsService, Widget, WidgetsService } from '@workspace/common-data';
-import { selectAllItems } from '../../../../../libs/common-data/src/lib/state';
+import { Item, ItemsFacade, Widget, WidgetsService } from '@workspace/common-data';
+import { Observable } from 'rxjs';
 
 @Component({
   selector: 'app-home',
@@ -13,27 +9,20 @@ import { selectAllItems } from '../../../../../libs/common-data/src/lib/state';
 
 })
 export class HomeComponent implements OnInit {
-  items: Item[];
+  items$: Observable<Item[]> = this.itemsFacade.allItems$;
+
   widgets: Widget[];
 
-  constructor(private itemsService: ItemsService,
-              private widgetsService: WidgetsService,
-              private store: Store<ItemsState>
-            ) {
-  }
+  constructor(
+    private itemsFacade: ItemsFacade,
+    private widgetsService: WidgetsService
+  ) {}
 
   ngOnInit() {
-    this.getItems();
+    this.itemsFacade.loadAll();
     this.getWidgets();
   }
 
-  getItems() {
-    this.store.pipe(select(selectAllItems))
-      .subscribe(items => this.items = items);
-
-    this.store.dispatch(new ItemsActions.LoadItems());
-  }
-
   getWidgets() {
     this.widgetsService.all()
       .subscribe((widgets: Widget[]) => this.widgets = widgets);

apps/dashboard/src/app/items/items.component.html

@@ -1,15 +1,15 @@
 <div class="container">
   <div class="col-50">
-    <app-items-total [items]="items"></app-items-total>
+    <app-items-total [items]="items$ | async"></app-items-total>
 
-    <app-items-list [items]="items"
+    <app-items-list [items]="items$ | async"
                     (selected)="selectItem($event)"
                     (deleted)="deleteItem($event)">
     </app-items-list>
   </div>
 
   <app-item-detail class="col-50" [item]="currentItem"
                    (saved)="saveItem($event)"
-                   (cancelled)="cancel($event)">
+                   (cancelled)="resetCurrentItem($event)">
   </app-item-detail>
 </div>

apps/dashboard/src/app/items/items.component.ts

@@ -1,41 +1,24 @@
 import { Component, OnInit } from '@angular/core';
-import { Item, ItemsService } from '@workspace/common-data';
-import { ActionsSubject, select, Store } from '@ngrx/store';
-import { ItemsState } from '../../../../../libs/common-data/src/lib/state/items.reducer';
-import * as ItemsActions from '../../../../../libs/common-data/src/lib/state/items.actions';
-import { filter, tap } from 'rxjs/operators';
-import { ItemsActionTypes } from '../../../../../libs/common-data/src/lib/state/items.actions';
-import { selectAllItems } from '../../../../../libs/common-data/src/lib/state';
+import { Observable } from 'rxjs';
+import { Item, ItemsFacade } from '@workspace/common-data';
 
 @Component({
   selector: 'app-items',
   templateUrl: './items.component.html',
   styleUrls: ['./items.component.css']
 })
 export class ItemsComponent implements OnInit {
-  items: Item[];
+  items$: Observable<Item[]> = this.itemsFacade.allItems$;
   currentItem: Item;
 
-  constructor(private itemsService: ItemsService, private store: Store<ItemsState>, private actions$: ActionsSubject) { }
+  constructor(private itemsFacade: ItemsFacade,) { }
 
   ngOnInit() {
-    this.getItems();
-    this.handleActions();
+    this.itemsFacade.loadAll();
+    this.itemsFacade.mutations$.subscribe(_ => this.resetCurrentItem());
     this.resetCurrentItem();
   }
 
-  handleActions() {
-    this.actions$.pipe(
-      filter(action =>
-        action.type === ItemsActionTypes.AddItem
-        || action.type === ItemsActionTypes.UpdateItem
-        || action.type === ItemsActionTypes.DeleteItem
-      ),
-      tap(_ => this.resetCurrentItem())
-    )
-    .subscribe();
-  }
-
   resetCurrentItem() {
     this.currentItem = { id: null, name: '', price: 0, description: '' };
   }
@@ -44,26 +27,15 @@ export class ItemsComponent implements OnInit {
     this.currentItem = item;
   }
 
-  cancel(item) {
-    this.resetCurrentItem();
-  }
-
-  getItems() {
-    this.store.pipe(select(selectAllItems))
-      .subscribe(items => this.items = items);
-
-    this.store.dispatch(new ItemsActions.LoadItems());
-  }
-
   saveItem(item) {
     if (!item.id) {
-      this.store.dispatch(new ItemsActions.AddItem(item));
+      this.itemsFacade.addItem(item);
     } else {
-      this.store.dispatch(new ItemsActions.UpdateItem(item));
+      this.itemsFacade.updateItem(item);
     }
   }
 
   deleteItem(item) {
-    this.store.dispatch(new ItemsActions.DeleteItem(item));
+    this.itemsFacade.deleteItem(item);
   }
 }

libs/common-data/src/index.ts

@@ -5,3 +5,5 @@ export { ItemsService } from './lib/items/items.service';
 
 export { Widget } from './lib/widgets/widget.model';
 export { WidgetsService } from './lib/widgets/widgets.service';
+
+export { ItemsFacade } from './lib/state/items.facade';

libs/common-data/src/lib/common-data.module.ts

@@ -7,6 +7,7 @@ import { StoreModule } from '@ngrx/store';
 import { EffectsModule } from '@ngrx/effects';
 import { itemsReducer, initialState as itemsInitialState } from './state/items.reducer';
 import { ItemsEffects } from './state/items.effects';
+import { ItemsFacade } from './state/items.facade';
 
 @NgModule({
   imports: [
@@ -18,7 +19,8 @@ import { ItemsEffects } from './state/items.effects';
   providers: [
     ItemsService,
     WidgetsService,
-    ItemsEffects
+    ItemsEffects,
+    ItemsFacade
   ],
   exports: [
     StoreModule,

libs/common-data/src/lib/state/items.facade.spec.ts

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

libs/common-data/src/lib/state/items.facade.ts

@@ -0,0 +1,39 @@
+import { Injectable } from '@angular/core';
+import { ActionsSubject, select, Store } from '@ngrx/store';
+import { filter } from 'rxjs/operators';
+import { ItemsState } from './items.reducer';
+import { ItemsActionTypes } from './items.actions';
+import { selectAllItems } from './index';
+import * as ItemsActions from './items.actions';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ItemsFacade {
+  allItems$ = this.store.pipe(select(selectAllItems));
+  mutations$ = this.actions$.pipe(
+    filter(action =>
+      action.type === ItemsActionTypes.AddItem
+      || action.type === ItemsActionTypes.UpdateItem
+      || action.type === ItemsActionTypes.DeleteItem
+    )
+  );
+
+  constructor(private store: Store<ItemsState>, private actions$: ActionsSubject) {}
+
+  loadAll() {
+    this.store.dispatch(new ItemsActions.LoadItems());
+  }
+
+  addItem(item) {
+    this.store.dispatch(new ItemsActions.AddItem(item));
+  }
+
+  updateItem(item) {
+    this.store.dispatch(new ItemsActions.UpdateItem(item));
+  }
+
+  deleteItem(item) {
+    this.store.dispatch(new ItemsActions.DeleteItem(item));
+  }
+}