Ngrx refactor 3

client/src/app/+heroes/components/add-hero-dialog/add-hero-dialog.component.ts

@@ -1,3 +1,6 @@
+import { HeroesState } from './../../../state/heroes/reducers/index';
+import { Store } from '@ngrx/store';
+import { AddHero } from './../../../state/heroes/actions/heroes';
 import { Component, HostListener, OnInit } from "@angular/core";
 import { FormBuilder, FormGroup, Validators } from "@angular/forms";
 import { MatAutocompleteSelectedEvent, MatDialogRef } from "@angular/material";
@@ -40,7 +43,8 @@ export class AddHeroDialogComponent implements OnInit {
     private formBuilder: FormBuilder,
     private heroesService: HeroesService,
     private matDialogRef: MatDialogRef<AddHeroDialogComponent>,
-    private powersService: PowersService
+    private powersService: PowersService,
+    private store: Store<HeroesState>
   ) {}
 
   ngOnInit() {
@@ -102,7 +106,8 @@ export class AddHeroDialogComponent implements OnInit {
     hero.powers = this.selectedPowers.map(power => power.id);
 
     // TODO: dispatch action to store
-    this.heroesService.createHero(hero).subscribe(() => this.close());
+    // this.heroesService.createHero(hero).subscribe(() => this.close());
+    this.store.dispatch(new AddHero(hero));
   }
 
   togglePower(power: Power) {

client/src/app/+heroes/containers/index/index.component.ts

@@ -1,11 +1,16 @@
+import { DeleteHero } from './../../../state/heroes/actions/heroes';
+
 import { Component, OnInit } from '@angular/core';
-import { MatDialog } from "@angular/material";
+import { MatDialog } from '@angular/material';
 
-import { Observable } from "rxjs/Observable";
+import { Store, select } from '@ngrx/store';
+import { Observable } from 'rxjs/Observable';
 
-import { HeroesService } from "../../../core/services/heroes.service";
-import { Hero } from "../../../core/models/hero.model";
-import { AddHeroDialogComponent } from "../../components/add-hero-dialog/add-hero-dialog.component";
+import { HeroesService } from '../../../core/services/heroes.service';
+import { HeroesState, getAllHeroes } from './../../../state/heroes/reducers/index';
+import { Hero } from '../../../core/models/hero.model';
+import { AddHeroDialogComponent } from '../../components/add-hero-dialog/add-hero-dialog.component';
+import { LoadHeroes } from '../../../state/heroes/actions/heroes';
 
 @Component({
   selector: 'app-index',
@@ -16,13 +21,18 @@ export class IndexComponent implements OnInit {
 
   heroes: Observable<Array<Hero>>;
 
-  //TODO: use store instead of service
-  constructor(private heroesService: HeroesService, private matDialog: MatDialog) {
-  }
+  // TODO: use store instead of service
+  // constructor(private heroesService: HeroesService, private matDialog: MatDialog) {
+  constructor(
+    private store: Store<HeroesState>,
+    private matDialog: MatDialog
+  ) { }
 
   ngOnInit() {
     // TODO: dispatch action to store
-    this.heroes = this.heroesService.getHeroes();
+    // this.heroes = this.heroesService.getHeroes();
+    this.heroes = this.store.pipe(select(getAllHeroes));
+    this.store.dispatch(new LoadHeroes());
   }
 
   add() {
@@ -32,8 +42,10 @@ export class IndexComponent implements OnInit {
   delete(hero: Hero) {
     // TODO: dispatch action to store
     // TODO: use store for emitting update to the array of heroes
-    this.heroesService.deleteHero(hero)
-      .subscribe(() => this.heroes = this.heroesService.getHeroes());
+
+    // this.heroesService.deleteHero(hero)
+    //  .subscribe(() => this.heroes = this.heroesService.getHeroes());
+    this.store.dispatch(new DeleteHero(hero));
   }
 
 }

client/src/app/+powers/containers/edit/edit.component.spec.ts

@@ -12,6 +12,7 @@ import { SharedModule } from "../../../shared/shared.module";
 import { StateModule } from "../../../state/state.module";
 import { EditPowerComponent } from "../../components/edit-power/edit-power.component";
 import { EditComponent } from "./edit.component";
+import { HeroesService } from "../../../core/services/heroes.service";
 
 class ActivatedRouteStub {
   paramMap: Observable<Map<string, string>>;
@@ -46,7 +47,8 @@ describe('EditComponent', () => {
           provide: ActivatedRoute,
           useClass: ActivatedRouteStub
         },
-        PowersService
+        PowersService,
+        HeroesService
       ]
     })
       .compileComponents();

client/src/app/+powers/containers/index/index.component.spec.ts

@@ -13,6 +13,7 @@ import { StateModule } from "../../../state/state.module";
 import { PowersComponent } from "../../components/powers/powers.component";
 
 import { IndexComponent } from './index.component';
+import { HeroesService } from "../../../core/services/heroes.service";
 
 describe('IndexComponent', () => {
   let component: IndexComponent;
@@ -38,7 +39,8 @@ describe('IndexComponent', () => {
         StateModule
       ],
       providers: [
-        PowersService
+        PowersService,
+        HeroesService
       ]
     })
       .compileComponents();

client/src/app/containers/index/index.component.spec.ts

@@ -1,9 +1,10 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { MatButtonModule, MatCardModule, MatIconModule } from "@angular/material";
-import { NoopAnimationsModule } from "@angular/platform-browser/animations";
-import { RouterTestingModule } from "@angular/router/testing";
-import { SharedModule } from "../../../shared/shared.module";
+import { MatButtonModule, MatCardModule, MatIconModule } from '@angular/material';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { RouterTestingModule } from '@angular/router/testing';
+
 import { IndexComponent } from './index.component';
+import { SharedModule } from '../../shared/shared.module';
 
 describe('IndexComponent', () => {
   let component: IndexComponent;

client/src/app/state/heroes/actions/heroes.ts

@@ -0,0 +1,114 @@
+import { Action } from '@ngrx/store';
+import { Hero } from './../../../core/models/hero.model';
+import { createActionType } from '../../shared/utils';
+
+export const ADD_HERO = createActionType('ADD_HERO');
+export const ADD_HERO_SUCCESS = createActionType('ADD_HERO_SUCCESS');
+export const ADD_HERO_DIALOG_CLOSE = createActionType('ADD_HERO_DIALOG_CLOSE');
+export const ADD_HERO_DIALOG_OPEN = createActionType('ADD_HERO_DIALOG_OPEN');
+export const DELETE_HERO = createActionType('DELETE_HERO');
+export const DELETE_HERO_SUCCESS = createActionType('DELETE_HERO_SUCCESS');
+export const LOAD_HEROS = createActionType('LOAD_HEROS');
+export const LOAD_HEROS_SUCCESS = createActionType('LOAD_HEROS_SUCCESS');
+export const LOAD_HERO = createActionType('LOAD_HERO');
+export const LOAD_HERO_SUCCESS = createActionType('LOAD_HERO_SUCCESS')
+export const SELECT_HERO = createActionType('SELECT_HERO');
+export const UPDATE_HERO = createActionType('UPDATE_HERO');
+export const UPDATE_HERO_SUCCESS = createActionType('UPDATE_HERO_SUCCESS');
+
+export class AddHero implements Action {
+  readonly type = ADD_HERO;
+
+  constructor(public payload: Hero) {
+  }
+}
+
+export class AddHeroSuccess implements Action {
+  readonly type = ADD_HERO_SUCCESS;
+
+  constructor(public payload: Hero) {
+  }
+}
+
+export class AddHeroDialogClose implements Action {
+  readonly type = ADD_HERO_DIALOG_CLOSE;
+}
+
+export class AddHeroDialogOpen implements Action {
+  readonly type = ADD_HERO_DIALOG_OPEN;
+}
+
+export class DeleteHero implements Action {
+  readonly type = DELETE_HERO;
+
+  constructor(public payload: Hero) {
+  }
+}
+
+export class DeleteHeroSuccess implements Action {
+  readonly type = DELETE_HERO_SUCCESS;
+
+  constructor(public payload: Hero) {
+  }
+}
+
+export class LoadHeroes implements Action {
+  readonly type = LOAD_HEROS;
+}
+
+export class LoadHerosSuccess implements Action {
+  readonly type = LOAD_HEROS_SUCCESS;
+
+  constructor(public payload: Hero[]) {
+  }
+}
+
+export class LoadHero implements Action {
+  readonly type = LOAD_HERO;
+
+  constructor(public payload: { id: number }) {
+  }
+}
+
+export class LoadHeroSuccess implements Action {
+  readonly type = LOAD_HERO_SUCCESS;
+
+  constructor(public payload: Hero) {
+  }
+}
+
+export class SelectHero implements Action {
+  readonly type = SELECT_HERO;
+
+  constructor(public payload: { id: number }) {
+  }
+}
+
+export class UpdateHero implements Action {
+  readonly type = UPDATE_HERO;
+
+  constructor(public payload: Hero) {
+  }
+}
+
+export class UpdateHeroSuccess implements Action {
+  readonly type = UPDATE_HERO_SUCCESS;
+
+  constructor(public payload: Hero) {
+  }
+}
+
+export type HerosAction =
+  AddHero
+  | AddHeroSuccess
+  | AddHeroDialogClose
+  | AddHeroDialogOpen
+  | DeleteHero
+  | DeleteHeroSuccess
+  | LoadHeroes
+  | LoadHerosSuccess
+  | LoadHero
+  | LoadHeroSuccess
+  | SelectHero
+  | UpdateHero
+  | UpdateHeroSuccess;