merging ngrx into main app

CHANGELOG.md

@@ -1,3 +1,10 @@
+<a name="1.12.0"></a>
+# 1.12.0 (2016-08-24)
+
+### Features
+
+* **App**: Implement ngrx PR [#133](https://github.com/lathonez/clicker/pull/133) ([](https://github.com/lathonez/clicker/commit/))
+
 <a name="1.11.0"></a>
 # 1.11.0 (2016-08-17)
 

README.md

@@ -50,6 +50,7 @@ Issues and PRs are welcome, see the [roadmap sticky](https://github.com/lathonez
 * This started out as a fork of [Angular 2 Seed](https://github.com/mgechev/angular2-seed) and would not be possible without it
 * @bengro for the lightweightify inspiration (#68)
 * @ric9176 and @DanielaGSB for E2E tests (#50)
+* @tja4472 for the ngxr implementation (#133)
 * [Everyone else](https://github.com/lathonez/clicker/graphs/contributors) for the advice, help, PRs etc
 
 ## Changelog
@@ -78,6 +79,11 @@ External dependencies are listed here to justify their inclusion and to allow fo
 * karma-jasmine: jasmine framework for Karma
 * karma-mocha-reporter: mocha progress reporter for Karma
 * karma-phantomjs-launcher: allows using phantom with Karma
+* @ngrx/core: ngrx
+* @ngrx/effects: ngrx
+* @ngrx/store: ngrx
+* ngrx-store-logger: ngrx debug logging
+* ngrx-store-freeze: ngrx state mutation prevetion
 * phantomjs-prebuilt: phantom headless browser
 * protractor: e2e test runner
 * protractor-jasmine2-screenshot-reporter: screenshot reporter for Jasmine

app/actions/index.ts

@@ -1,4 +1,4 @@
-import { ClickerActions } from './clicker.action';
+import { ClickerActions } from './clicker';
 
 export {
 ClickerActions

app/app.spec.ts

@@ -32,8 +32,8 @@ describe('ClickerApp', () => {
     clickerApp = new ClickerApp(mockClass, mockClass);
   });
 
-  it('initialises with three possible pages', () => {
-    expect(clickerApp['pages'].length).toEqual(3);
+  it('initialises with two possible pages', () => {
+    expect(clickerApp['pages'].length).toEqual(2);
   });
 
   it('initialises with a root page', () => {

app/app.ts

@@ -2,16 +2,15 @@
 
 import { Component, provide, Type, ViewChild }           from '@angular/core';
 import { disableDeprecatedForms, provideForms }          from '@angular/forms';
+import { provideStore }                                  from '@ngrx/store';
+import { runEffects }                                    from '@ngrx/effects';
 import { ionicBootstrap, MenuController, Nav, Platform } from 'ionic-angular';
 import { StatusBar }                                     from 'ionic-native';
-import { ClickerService, ClickerDataService, Clickers, Storage, StorageService } from './services';
-import { ClickerList, ClickerListNgrxPage, Page2 } from './pages';
-
-import actions from './actions';
-import effects from './effects';
-import reducers from './reducers';
-import { provideStore } from '@ngrx/store';
-import { runEffects } from '@ngrx/effects';
+import { ClickersService, DataService, StorageService }  from './services';
+import { ClickerList, Page2 }                            from './pages';
+import actions                                           from './actions';
+import effects                                           from './effects';
+import reducers                                          from './reducers';
 
 // Add the RxJS Observable operators we need in this app.
 import './rxjs-operators';
@@ -40,7 +39,6 @@ export class ClickerApp {
     this.pages = [
       { title: 'Clickers', component: ClickerList },
       { title: 'Goodbye Ionic', component: Page2 },
-      { title: 'Clickers ngrx', component: ClickerListNgrxPage },
     ];
   }
 
@@ -61,13 +59,11 @@ export class ClickerApp {
 }
 
 ionicBootstrap(ClickerApp, [
-
   disableDeprecatedForms(),
   provideForms(),
   StorageService,
-  ClickerDataService,
-  ClickerService,
-  Clickers,
+  DataService,
+  ClickersService,
   provide('Storage', { useClass: Storage }),
   provideStore(reducers),
   runEffects(effects),

app/components/clickerButton/clickerButton.html

@@ -1 +1 @@
-<button block outline (click)="clickerService.doClick(clicker.id)">{{clicker.name}} ({{clicker.getCount()}})</button>
+<button block outline (click)="doClick.emit(clicker.id)">{{clicker.name}} ({{clicker.getCount()}})</button>

app/components/clickerButton/clickerButton.spec.ts

@@ -1,15 +1,15 @@
 import { beforeEach, beforeEachProviders, describe, expect, it }          from '@angular/core/testing';
 import { provide }                                                        from '@angular/core';
 import { asyncCallbackFactory, injectAsyncWrapper, providers, TestUtils } from '../../../test/diExports';
-import { ClickersMock }                                                   from '../../services/mocks';
+import { ClickersServiceMock }                                            from '../../services/mocks';
 import { ClickerButton }                                                  from './clickerButton';
-import { Clickers }                                                       from '../../services';
+import { ClickersService }                                                from '../../services';
 
 this.fixture = null;
 this.instance = null;
 
 let clickerButtonProviders: Array<any> = [
- provide(Clickers, {useClass: ClickersMock}),
+ provide(ClickersService, {useClass: ClickersServiceMock}),
 ];
 
 describe('ClickerButton', () => {
@@ -31,10 +31,9 @@ describe('ClickerButton', () => {
     expect(this.fixture.nativeElement.querySelectorAll('.button-inner')[0].innerHTML).toEqual('TEST CLICKER (10)');
   });
 
-  it('does a click', () => {
+  it('does a click', (done) => {
     this.fixture.detectChanges();
-    spyOn(this.instance['clickerService'], 'doClick');
+    this.instance.doClick.subscribe(done);
     TestUtils.eventFire(this.fixture.nativeElement.querySelectorAll('button')[0], 'click');
-    expect(this.instance['clickerService'].doClick).toHaveBeenCalled();
   });
 });

app/components/clickerButton/clickerButton.ts

@@ -1,21 +1,24 @@
 'use strict';
 
-import { Component } from '@angular/core';
-import { Button }    from 'ionic-angular';
-import { Clickers }  from '../../services';
+import { ChangeDetectionStrategy, Component, Input, Output, EventEmitter } from '@angular/core';
+import { Button }                                                          from 'ionic-angular';
+import { ClickersService }                                                 from '../../services';
+import { Clicker }                                                         from '../../models';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'clicker-button',
-  inputs: ['clicker: clicker'],
   templateUrl: 'build/components/clickerButton/clickerButton.html',
   directives: [Button],
 })
 
 export class ClickerButton {
+  @Input() public clicker: Clicker;
+  @Output() public doClick: EventEmitter<string> = new EventEmitter<string>();
 
-  private clickerService: Clickers;
+  private clickerService: ClickersService;
 
-  constructor(clickerService: Clickers) {
+  constructor(clickerService: ClickersService) {
     this.clickerService = clickerService;
   }
 }

app/components/clickerForm/clickerForm.html

@@ -1,4 +1,4 @@
-<form [formGroup]="form" (submit)="newClicker(form.value)">
+<form [formGroup]="form" (submit)="newClickerLocal(form.value)">
   <ion-row>
     <ion-col width-80>
       <ion-item >

app/components/clickerForm/clickerForm.spec.ts

@@ -1,22 +1,21 @@
 import { beforeEach, beforeEachProviders, describe, expect, it }          from '@angular/core/testing';
 import { provide }                                                        from '@angular/core';
 import { asyncCallbackFactory, injectAsyncWrapper, providers, TestUtils } from '../../../test/diExports';
-import { ClickersMock }                                                   from '../../services/mocks';
-import { Clickers, Utils }                                                from '../../services';
+import { ClickersServiceMock }                                            from '../../services/mocks';
+import { ClickersService, Utils }                                         from '../../services';
 import { ClickerForm }                                                    from './clickerForm';
 
 this.fixture = null;
 this.instance = null;
 
 let clickerFormProviders: Array<any> = [
-  provide(Clickers, {useClass: ClickersMock}),
+  provide(ClickersService, {useClass: ClickersServiceMock}),
 ];
 
 describe('ClickerForm', () => {
 
   let beforeEachFn: Function = ((testSpec) => {
-    spyOn(testSpec.instance, 'newClicker').and.callThrough();
-    spyOn(testSpec.instance['clickerService'], 'newClicker').and.callThrough();
+    spyOn(testSpec.instance, 'newClickerLocal').and.callThrough();
   });
 
   beforeEachProviders(() => providers.concat(clickerFormProviders));
@@ -35,8 +34,7 @@ describe('ClickerForm', () => {
     input.value = clickerName;
     TestUtils.eventFire(input, 'input');
     TestUtils.eventFire(button, 'click');
-    expect(this.instance.newClicker).toHaveBeenCalledWith(Object({ clickerNameInput: clickerName }));
-    expect(this.instance['clickerService'].newClicker).toHaveBeenCalledWith(clickerName);
+    expect(this.instance.newClickerLocal).toHaveBeenCalledWith(Object({ clickerNameInput: clickerName }));
     expect(Utils.resetControl).toHaveBeenCalledWith(this.instance.form.controls.clickerNameInput);
   });
 
@@ -45,7 +43,6 @@ describe('ClickerForm', () => {
     this.instance.clickerName = '';
     this.fixture.detectChanges();
     TestUtils.eventFire(button, 'click');
-    expect(this.instance.newClicker).toHaveBeenCalled();
-    expect(this.instance['clickerService'].newClicker).not.toHaveBeenCalled();
+    expect(this.instance.newClickerLocal).toHaveBeenCalled();
   });
 });

app/components/clickerForm/clickerForm.ts

@@ -1,32 +1,33 @@
 'use strict';
 
-import { FormGroup, FormBuilder, Validators }        from '@angular/forms';
-import { FORM_DIRECTIVES, REACTIVE_FORM_DIRECTIVES } from '@angular/forms';
-import { Component }                                 from '@angular/core';
-import { Button, Icon, Item, Label, TextInput }      from 'ionic-angular';
-import { Clickers, Utils }                           from '../../services';
+import { FormGroup, FormBuilder, FORM_DIRECTIVES, REACTIVE_FORM_DIRECTIVES, Validators } from '@angular/forms';
+import { ChangeDetectionStrategy, Component, Output, EventEmitter } from '@angular/core';
+import { TextInput }                                                from 'ionic-angular';
+import { ClickersService, Utils }                                   from '../../services';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'clicker-form',
   templateUrl: 'build/components/clickerForm/clickerForm.html',
-  directives: [Button, Icon, Item, Label, TextInput, FORM_DIRECTIVES, REACTIVE_FORM_DIRECTIVES],
+  directives: [TextInput, FORM_DIRECTIVES, REACTIVE_FORM_DIRECTIVES],
 })
 
 export class ClickerForm {
 
-  private clickerService: Clickers;
+  private clickerService: ClickersService;
   private form: FormGroup;
 
-  constructor(clickerService: Clickers, fb: FormBuilder) {
+  @Output() public newClicker: EventEmitter<string> = new EventEmitter<string>();
+
+  constructor(clickerService: ClickersService, fb: FormBuilder) {
     this.clickerService = clickerService;
 
     this.form = fb.group({
       clickerNameInput: ['', Validators.required],
     });
   }
 
-  public newClicker(formValue: Object): boolean {
-
+  public newClickerLocal(formValue: Object): boolean {
     // need to mark the clickerName control as touched so validation
     // will apply after the user has tried to add a clicker
     this.form.controls['clickerNameInput'].markAsTouched();
@@ -35,7 +36,8 @@ export class ClickerForm {
       return false;
     }
 
-    this.clickerService.newClicker(formValue['clickerNameInput']);
+    // this.clickerService.newClicker(formValue['clickerNameInput']);
+    this.newClicker.emit(formValue['clickerNameInput']);
 
     // reset the value of the contorl and all validation / state
     this.form.controls['clickerNameInput'] = Utils.resetControl(this.form.controls['clickerNameInput']);

app/components/index.ts

@@ -1,4 +1,2 @@
 export * from './clickerButton/clickerButton';
 export * from './clickerForm/clickerForm';
-export * from './clicker-ngrx-form/clicker-ngrx-form';
-export * from './clicker-ngrx-button/clicker-ngrx-button';