Removing ngrx, remaining changes to get app up and running on rc0

src/app/app.module.ts

@@ -1,39 +1,24 @@
-import { NgModule } from '@angular/core';
-import { IonicApp, IonicModule } from 'ionic-angular';
-import { StoreModule } from '@ngrx/store';
-import { ClickerApp } from './app.component';
-import { ClickerList } from '../pages';
-import { ClickerForm } from '../components';
-import { ClickerButton } from '../components';
-import { ClickersService } from '../services';
-// import { ClickerActions } from '../actions';
-import { Page2 } from '../pages';
-// import { clickerReducer, initialState } from '../reducers';
-import { reducer } from '../reducers';
-
-// Add the RxJS Observable operators we need in this app.
-import './rxjs-operators';
+import { NgModule }                        from '@angular/core';
+import { IonicApp, IonicModule }           from 'ionic-angular';
+import { ClickerApp }                      from './app.component';
+import { ClickerList, PagesModule, Page2 } from '../pages';
+import { ClickersService, StorageService } from '../services';
 
 @NgModule({
   declarations: [
     ClickerApp,
-    ClickerList,
-    Page2,
-    ClickerForm,
-    ClickerButton,
   ],
   imports: [
+    PagesModule,
     IonicModule.forRoot(ClickerApp),
-    // StoreModule.provideStore({ clicker: clickerReducer }, { clicker: initialState }),
-    StoreModule.provideStore(reducer),
-    // EffectsModule.run(AppFirebaseEffects),    
   ],
   bootstrap: [IonicApp],
   entryComponents: [
     ClickerApp,
     ClickerList,
     Page2,
   ],
-  providers: [ ClickersService ],
+  providers: [ ClickersService, StorageService ],
 })
+
 export class AppModule {}

src/components/clickerButton/clickerButton.html

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

src/components/clickerButton/clickerButton.spec.ts

@@ -31,9 +31,10 @@ describe('ClickerButton', () => {
     expect(this.fixture.nativeElement.querySelectorAll('.button-inner')[0].innerHTML).toEqual('TEST CLICKER (10)');
   });
 
-  it('does a click', (done) => {
+  it('does a click', () => {
     this.fixture.detectChanges();
-    this.instance.doClick.subscribe(done);
+    spyOn(this.instance['clickerService'], 'doClick');
     TestUtils.eventFire(this.fixture.nativeElement.querySelectorAll('button')[0], 'click');
+    expect(this.instance['clickerService'].doClick).toHaveBeenCalled();
   });
 });

src/components/clickerButton/clickerButton.ts

@@ -1,18 +1,16 @@
 'use strict';
 
-import { ChangeDetectionStrategy, Component, Input, Output, EventEmitter } from '@angular/core';
-import { ClickersService }                                                 from '../../services';
-import { Clicker }                                                         from '../../models';
+import { Component, Input } from '@angular/core';
+import { ClickersService }  from '../../services';
+import { Clicker }          from '../../models';
 
 @Component({
-  changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'clicker-button',
   templateUrl: 'clickerButton.html',
 })
 
 export class ClickerButton {
   @Input() public clicker: Clicker;
-  @Output() public doClick: EventEmitter<string> = new EventEmitter<string>();
 
   private clickerService: ClickersService;
 

src/components/clickerForm/clickerForm.html

@@ -1,14 +1,14 @@
-<form [formGroup]="form" (submit)="newClickerLocal(form.value)">
+<form [formGroup]="form" (submit)="newClicker(form.value)">
   <ion-row>
     <ion-col width-80>
       <ion-item >
         <ion-input block formControlName="clickerNameInput" type="text" placeholder="New Clicker"></ion-input>
       </ion-item>
     </ion-col>
     <ion-col>
-      <button type="submit" block secondary outline>
+      <button ion-button type="submit" block secondary outline>
         <ion-icon name="add-circle"></ion-icon>
       </button>
     </ion-col>
   </ion-row>
-</form>
+</form>

src/components/clickerForm/clickerForm.spec.ts

@@ -15,7 +15,8 @@ let clickerFormProviders: Array<any> = [
 describe('ClickerForm', () => {
 
   let beforeEachFn: Function = ((testSpec) => {
-    spyOn(testSpec.instance, 'newClickerLocal').and.callThrough();
+    spyOn(testSpec.instance, 'newClicker').and.callThrough();
+    spyOn(testSpec.instance['clickerService'], 'newClicker').and.callThrough();
   });
 
   beforeEachProviders(() => providers.concat(clickerFormProviders));
@@ -34,17 +35,17 @@ describe('ClickerForm', () => {
     input.value = clickerName;
     TestUtils.eventFire(input, 'input');
     TestUtils.eventFire(button, 'click');
-    // expect(this.instance.newClickerLocal).toHaveBeenCalledWith(Object({ clickerNameInput: clickerName }));
-    // expect(Utils.resetControl).toHaveBeenCalledWith(this.instance.form.controls.clickerNameInput);
-    console.log('this test is failing on travis and needs to be fixed');
+    expect(this.instance.newClicker).toHaveBeenCalledWith(Object({ clickerNameInput: clickerName }));
+    expect(this.instance['clickerService'].newClicker).toHaveBeenCalledWith(clickerName);
+    expect(Utils.resetControl).toHaveBeenCalledWith(this.instance.form.controls.clickerNameInput);
   });
 
   it('doesn\'t try to add a clicker with no name', () => {
     let button: any = this.fixture.nativeElement.querySelectorAll('button')[1];
     this.instance.clickerName = '';
     this.fixture.detectChanges();
     TestUtils.eventFire(button, 'click');
-    // expect(this.instance.newClickerLocal).toHaveBeenCalled();
-    console.log('this test is failing on travis and needs to be fixed');
+    expect(this.instance.newClicker).toHaveBeenCalled();
+    expect(this.instance['clickerService'].newClicker).not.toHaveBeenCalled();
   });
 });

src/components/clickerForm/clickerForm.ts

@@ -1,11 +1,10 @@
 'use strict';
 
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
-import { ChangeDetectionStrategy, Component, Output, EventEmitter } from '@angular/core';
-import { ClickersService, Utils }                                   from '../../services';
+import { Component }                          from '@angular/core';
+import { ClickersService }                    from '../../services';
 
 @Component({
-  changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'clicker-form',
   templateUrl: 'clickerForm.html',
 })
@@ -15,8 +14,6 @@ export class ClickerForm {
   private clickerService: ClickersService;
   private form: FormGroup;
 
-  @Output() public newClicker: EventEmitter<string> = new EventEmitter<string>();
-
   constructor(clickerService: ClickersService, fb: FormBuilder) {
     this.clickerService = clickerService;
 
@@ -25,7 +22,8 @@ export class ClickerForm {
     });
   }
 
-  public newClickerLocal(formValue: Object): boolean {
+  public newClicker(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();
@@ -34,11 +32,9 @@ export class ClickerForm {
       return false;
     }
 
-    // this.clickerService.newClicker(formValue['clickerNameInput']);
-    this.newClicker.emit(formValue['clickerNameInput']);
+    this.clickerService.newClicker(formValue['clickerNameInput']);
 
-    // reset the value of the contorl and all validation / state
-    this.form.controls['clickerNameInput'] = Utils.resetControl(this.form.controls['clickerNameInput']);
+    this.form.reset();
 
     return true;
   }

src/components/components.module.ts

@@ -0,0 +1,24 @@
+import { NgModule }                         from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { IonicModule }                 from 'ionic-angular';
+import { ClickerButton, ClickerForm }       from './';
+
+@NgModule({
+  declarations: [
+    ClickerForm,
+    ClickerButton,
+  ],
+  imports: [
+    FormsModule,
+    IonicModule,
+    ReactiveFormsModule,
+  ],
+  exports: [
+    ClickerButton,
+    ClickerForm,
+  ],
+  entryComponents: [],
+  providers: [ ],
+})
+
+export class ComponentsModule {}

src/components/index.ts

@@ -1,2 +1,3 @@
 export * from './clickerButton/clickerButton';
 export * from './clickerForm/clickerForm';
+export * from './components.module';

src/models/clicker.ts

@@ -5,9 +5,9 @@ import { Click } from './';
 // Represents a single Clicker
 export class Clicker {
 
-  public id: string;
-  public name: string;
-  public clicks: Array<Click>;
+  private id: string;
+  private name: string;
+  private clicks: Array<Click>;
 
   constructor(id: string, name: string) {
     this.id = id;