Merge pull request onehungrymind#1 from onehungrymind/feature/ngrx

First cut at NGRX

Author: Lukas Ruebbelke

.angulardoc.json

@@ -0,0 +1,4 @@
+{
+  "repoId": "e66f58f4-e577-4eb4-b671-d7505ea7ad13",
+  "lastSync": 0
+}

apps/dashboard/src/app/app.module.ts

@@ -18,6 +18,10 @@ import { WidgetDetailComponent } from './widgets/widget-detail/widget-detail.com
 import { WidgetsListComponent } from './widgets/widgets-list/widgets-list.component';
 import { ItemsTotalComponent } from './items/items-total/items-total.component';
 import { WidgetsTotalComponent } from './widgets/widgets-total/widgets-total.component';
+import { StoreModule } from '@ngrx/store';
+import { EffectsModule } from '@ngrx/effects';
+import { DataPersistence, NxModule } from '@nrwl/nx';
+import { StoreDevtoolsModule } from '@ngrx/store-devtools';
 
 @NgModule({
   declarations: [
@@ -39,7 +43,13 @@ import { WidgetsTotalComponent } from './widgets/widgets-total/widgets-total.com
     AppRoutingModule,
     AppMaterialModule,
     CommonDataModule,
-    TotalsViewModule
+    TotalsViewModule,
+    NxModule.forRoot(),
+    StoreModule.forRoot({}),
+    EffectsModule.forRoot([]),
+    StoreDevtoolsModule.instrument({
+      maxAge: 5
+    }),
   ],
   bootstrap: [AppComponent]
 })

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

@@ -1,5 +1,11 @@
 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';
 
 @Component({
   selector: 'app-items',
@@ -10,13 +16,26 @@ export class ItemsComponent implements OnInit {
   items: Item[];
   currentItem: Item;
 
-  constructor(private itemsService: ItemsService) { }
+  constructor(private itemsService: ItemsService, private store: Store<ItemsState>, private actions$: ActionsSubject) { }
 
   ngOnInit() {
     this.getItems();
+    this.handleActions();
     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: '' };
   }
@@ -30,39 +49,21 @@ export class ItemsComponent implements OnInit {
   }
 
   getItems() {
-    this.itemsService.all()
-      .subscribe((items: Item[]) => this.items = items);
+    this.store.pipe(select(selectAllItems))
+      .subscribe(items => this.items = items);
+
+    this.store.dispatch(new ItemsActions.LoadItems());
   }
 
   saveItem(item) {
     if (!item.id) {
-      this.createItem(item);
+      this.store.dispatch(new ItemsActions.AddItem(item));
     } else {
-      this.updateItem(item);
+      this.store.dispatch(new ItemsActions.UpdateItem(item));
     }
   }
 
-  createItem(item) {
-    this.itemsService.create(item)
-      .subscribe(response => {
-        this.getItems();
-        this.resetCurrentItem();
-      });
-  }
-
-  updateItem(item) {
-    this.itemsService.update(item)
-      .subscribe(response => {
-        this.getItems();
-        this.resetCurrentItem();
-      });
-  }
-
   deleteItem(item) {
-    this.itemsService.delete(item)
-      .subscribe(response => {
-        this.getItems();
-        this.resetCurrentItem();
-      });
+    this.store.dispatch(new ItemsActions.DeleteItem(item));
   }
 }

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

@@ -3,15 +3,26 @@ import { CommonModule } from '@angular/common';
 import { HttpClientModule } from '@angular/common/http';
 import { ItemsService } from './items/items.service';
 import { WidgetsService } from './widgets/widgets.service';
+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';
 
 @NgModule({
   imports: [
     CommonModule,
-    HttpClientModule
+    HttpClientModule,
+    StoreModule.forFeature('items', itemsReducer, { initialState: itemsInitialState }),
+    EffectsModule.forFeature([ItemsEffects]),
   ],
   providers: [
     ItemsService,
-    WidgetsService
+    WidgetsService,
+    ItemsEffects
+  ],
+  exports: [
+    StoreModule,
+    EffectsModule
   ]
 })
 

libs/common-data/src/lib/state/index.ts

@@ -0,0 +1,43 @@
+import {
+  createSelector,
+  createFeatureSelector,
+  ActionReducerMap,
+} from '@ngrx/store';
+import * as fromItems from './items.reducer';
+
+export interface ItemsState {
+  items: fromItems.ItemsState;
+}
+
+export const reducers: ActionReducerMap<ItemsState> = {
+  items: fromItems.itemsReducer,
+};
+
+export const selectItemItemsState = createFeatureSelector<fromItems.ItemsState>('items');
+
+export const selectItemIds = createSelector(
+  selectItemItemsState,
+  fromItems.selectItemIds
+);
+export const selectItemEntities = createSelector(
+  selectItemItemsState,
+  fromItems.selectItemEntities
+);
+export const selectAllItems = createSelector(
+  selectItemItemsState,
+  fromItems.selectAllItems
+);
+export const selectItemTotal = createSelector(
+  selectItemItemsState,
+  fromItems.selectItemTotal
+);
+export const selectCurrentItemId = createSelector(
+  selectItemItemsState,
+  fromItems.getSelectedItemId
+);
+
+export const selectCurrentItem = createSelector(
+  selectItemEntities,
+  selectCurrentItemId,
+  (itemEntities, itemId) => itemEntities[itemId]
+);

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

@@ -0,0 +1,59 @@
+import { Action } from '@ngrx/store';
+import { Item } from '@workspace/common-data';
+
+export enum ItemsActionTypes {
+  ItemsAction = '[Items] Action',
+  LoadItems = '[Items] Load Data',
+  ItemsLoaded = '[Items] Data Loaded',
+  AddItem = '[Items] Add Data',
+  ItemAdded = '[Items] Data Added',
+  UpdateItem = '[Items] Update Data',
+  ItemUpdated = '[Items] Data Updated',
+  DeleteItem = '[Items] Delete Data',
+  ItemDeleted = '[Items] Data Deleted',
+}
+
+export class Items implements Action {
+  readonly type = ItemsActionTypes.ItemsAction;
+}
+export class LoadItems implements Action {
+  readonly type = ItemsActionTypes.LoadItems;
+  constructor() {}
+}
+
+export class ItemsLoaded implements Action {
+  readonly type = ItemsActionTypes.ItemsLoaded;
+  constructor(public payload: Item[]) {}
+}
+
+export class AddItem implements Action {
+  readonly type = ItemsActionTypes.AddItem;
+  constructor(public payload: Item) {}
+}
+
+export class ItemAdded implements Action {
+  readonly type = ItemsActionTypes.ItemAdded;
+  constructor(public payload: Item) {}
+}
+
+export class UpdateItem implements Action {
+  readonly type = ItemsActionTypes.UpdateItem;
+  constructor(public payload: Item) {}
+}
+
+export class ItemUpdated implements Action {
+  readonly type = ItemsActionTypes.ItemUpdated;
+  constructor(public payload: Item) {}
+}
+
+export class DeleteItem implements Action {
+  readonly type = ItemsActionTypes.DeleteItem;
+  constructor(public payload: Item) {}
+}
+
+export class ItemDeleted implements Action {
+  readonly type = ItemsActionTypes.ItemDeleted;
+  constructor(public payload: Item) {}
+}
+
+export type ItemsActions = Items | LoadItems | ItemsLoaded | AddItem | ItemAdded | UpdateItem | ItemUpdated | DeleteItem | ItemDeleted;

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

@@ -0,0 +1,37 @@
+import { TestBed } from '@angular/core/testing';
+import { StoreModule } from '@ngrx/store';
+import { provideMockActions } from '@ngrx/effects/testing';
+import { DataPersistence } from '@nrwl/nx';
+import { hot } from '@nrwl/nx/testing';
+
+import { ItemsEffects } from './items.effects';
+import { LoadItems, ItemsLoaded } from './items.actions';
+
+import { Observable } from 'rxjs';
+
+describe('ItemsEffects', () => {
+  let actions$: Observable<any>;
+  let effects$: ItemsEffects;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [StoreModule.forRoot({})],
+      providers: [
+        ItemsEffects,
+        DataPersistence,
+        provideMockActions(() => actions$)
+      ]
+    });
+
+    effects$ = TestBed.get(ItemsEffects);
+  });
+
+  describe('someEffect', () => {
+    it('should work', () => {
+      actions$ = hot('-a-|', { a: new LoadItems({}) });
+      expect(effects$.loadItems$).toBeObservable(
+        hot('-a-|', { a: new ItemsLoaded({}) })
+      );
+    });
+  });
+});

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

@@ -0,0 +1,68 @@
+import { Injectable } from '@angular/core';
+import { Actions, Effect } from '@ngrx/effects';
+import {
+  ItemsActions,
+  ItemsActionTypes,
+  LoadItems,
+  ItemsLoaded, ItemUpdated, ItemDeleted, AddItem, UpdateItem, DeleteItem, ItemAdded
+} from './items.actions';
+import { ItemsState } from './items.reducer';
+import { DataPersistence } from '@nrwl/nx';
+import { ItemsService } from '../items/items.service';
+import { map } from 'rxjs/operators';
+import { Item } from '../items/item.model';
+
+@Injectable()
+export class ItemsEffects {
+  @Effect() effect$ = this.actions$.ofType(ItemsActionTypes.ItemsAction);
+
+  @Effect()
+  loadItems$ = this.dataPersistence.fetch(ItemsActionTypes.LoadItems, {
+    run: (action: LoadItems, state: ItemsState) => {
+      return this.itemsService.all().pipe(map((res: Item[]) => new ItemsLoaded(res)))
+    },
+
+    onError: (action: LoadItems, error) => {
+      console.error('Error', error);
+    }
+  });
+
+  @Effect()
+  addItem$ = this.dataPersistence.pessimisticUpdate(ItemsActionTypes.AddItem, {
+    run: (action: AddItem, state: ItemsState) => {
+      return this.itemsService.create(action.payload).pipe(map((res: Item) => new ItemAdded(res)))
+    },
+
+    onError: (action: AddItem, error) => {
+      console.error('Error', error);
+    }
+  });
+
+  @Effect()
+  updateItem$ = this.dataPersistence.pessimisticUpdate(ItemsActionTypes.UpdateItem, {
+    run: (action: UpdateItem, state: ItemsState) => {
+      return this.itemsService.update(action.payload).pipe(map((res: Item) => new ItemUpdated(res)))
+    },
+
+    onError: (action: UpdateItem, error) => {
+      console.error('Error', error);
+    }
+  });
+
+  @Effect()
+  deleteItem$ = this.dataPersistence.pessimisticUpdate(ItemsActionTypes.DeleteItem, {
+    run: (action: DeleteItem, state: ItemsState) => {
+      return this.itemsService.delete(action.payload).pipe(map(_ => new ItemDeleted(action.payload)))
+    },
+
+    onError: (action: DeleteItem, error) => {
+      console.error('Error', error);
+    }
+  });
+
+  constructor(
+    private actions$: Actions,
+    private dataPersistence: DataPersistence<ItemsState>,
+    private itemsService: ItemsService
+  ) {}
+}

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

@@ -0,0 +1,10 @@
+import { ItemsLoaded } from './items.actions';
+import { itemsReducer, initialState } from './items.reducer';
+
+describe('itemsReducer', () => {
+  it('should work', () => {
+    const action: ItemsLoaded = new ItemsLoaded({});
+    const actual = itemsReducer(initialState, action);
+    expect(actual).toEqual({});
+  });
+});