Update ngrx

.travis.yml

@@ -39,7 +39,7 @@ script:
   # Client
   - cd ../client && npm run lint
   - npm run test
-  - npm run build -- --prod
+  - npm run build
   - cd dist && ws --port 4200&
   - npm run e2e
 

client/.angular-cli.json

@@ -18,6 +18,7 @@
       "tsconfig": "tsconfig.app.json",
       "testTsconfig": "tsconfig.spec.json",
       "prefix": "app",
+      "serviceWorker": true,
       "styles": [
         "styles.scss"
       ],
@@ -55,6 +56,7 @@
   },
   "defaults": {
     "styleExt": "scss",
-    "component": {}
+    "component": {
+    }
   }
 }

client/.gitignore

@@ -32,6 +32,7 @@
 npm-debug.log
 testem.log
 /typings
+yarn-error.log
 
 # e2e
 /e2e/*.js

client/e2e/app.e2e-spec.ts

@@ -1,9 +1,9 @@
-import { ClientPage } from './app.po';
+import { AppPage } from './app.po';
 
 describe('client App', () => {
-  let page: ClientPage;
+  let page: AppPage;
 
   beforeEach(() => {
-    page = new ClientPage();
+    page = new AppPage();
   });
 });

client/e2e/app.po.ts

@@ -1,6 +1,6 @@
 import { browser, by, element } from 'protractor';
 
-export class ClientPage {
+export class AppPage {
   navigateTo() {
     return browser.get('/');
   }

client/karma.conf.js

@@ -1,5 +1,5 @@
 // Karma configuration file, see link for more information
-// https://karma-runner.github.io/0.13/config/configuration-file.html
+// https://karma-runner.github.io/1.0/config/configuration-file.html
 
 module.exports = function (config) {
   config.set({
@@ -12,14 +12,6 @@ module.exports = function (config) {
       require('karma-coverage-istanbul-reporter'),
       require('@angular/cli/plugins/karma')
     ],
-    files: [{
-      pattern: './node_modules/@angular/material/prebuilt-themes/indigo-pink.css',
-      included: true,
-      watched: true
-    }, {
-      pattern: './src/test.ts',
-      watched: false
-    }],
     client:{
       clearContext: false // leave Jasmine Spec Runner output visible in browser
     },

client/package.json

@@ -4,45 +4,45 @@
   "license": "ISC",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve --host=0.0.0.0 --proxy-config proxy.conf.json",
-    "build": "ng build",
+    "start": "ng serve --proxy-config proxy.conf.json --open",
+    "build": "ng build --prod --aot --build-optimizer",
     "test": "ng test --single-run --code-coverage",
     "lint": "ng lint",
-    "e2e": "ng e2e",
-    "sw": "sw-precache --root=dist --config=sw-precache-config.js"
+    "e2e": "ng e2e"
   },
   "private": false,
   "dependencies": {
-    "@angular/animations": "^4.0.0",
-    "@angular/common": "^4.0.0",
-    "@angular/compiler": "^4.0.0",
-    "@angular/core": "^4.0.0",
-    "@angular/forms": "^4.0.0",
-    "@angular/http": "^4.0.0",
+    "@angular/animations": "^4.2.4",
+    "@angular/common": "^4.2.4",
+    "@angular/compiler": "^4.2.4",
+    "@angular/core": "^4.2.4",
+    "@angular/forms": "^4.2.4",
+    "@angular/http": "^4.2.4",
     "@angular/material": "^2.0.0-beta.8",
-    "@angular/platform-browser": "^4.0.0",
-    "@angular/platform-browser-dynamic": "^4.0.0",
-    "@angular/router": "^4.0.0",
+    "@angular/platform-browser": "^4.2.4",
+    "@angular/platform-browser-dynamic": "^4.2.4",
+    "@angular/router": "^4.2.4",
+    "@angular/service-worker": "^1.0.0-beta.16",
     "@ngrx/core": "^1.2.0",
-    "@ngrx/effects": "^2.0.4",
-    "@ngrx/store": "^2.2.3",
+    "@ngrx/effects": "^4.0.5",
+    "@ngrx/store": "^4.0.3",
     "core-js": "^2.4.1",
     "hammerjs": "^2.0.8",
     "reselect": "^3.0.1",
-    "rxjs": "^5.4.1",
+    "rxjs": "^5.4.2",
     "zone.js": "^0.8.14"
   },
   "devDependencies": {
     "@angular/cdk": "^2.0.0-beta.8",
-    "@angular/cli": "1.2.6",
-    "@angular/compiler-cli": "^4.0.0",
-    "@angular/language-service": "^4.0.0",
-    "@ngrx/store-devtools": "^3.2.4",
+    "@angular/cli": "1.3.1",
+    "@angular/compiler-cli": "^4.2.4",
+    "@angular/language-service": "^4.2.4",
+    "@ngrx/store-devtools": "^4.0.0",
     "@types/hammerjs": "^2.0.34",
     "@types/jasmine": "~2.5.53",
     "@types/jasminewd2": "~2.0.2",
     "@types/node": "~6.0.60",
-    "codelyzer": "~3.0.1",
+    "codelyzer": "~3.1.1",
     "jasmine-core": "~2.6.2",
     "jasmine-spec-reporter": "~4.1.0",
     "karma": "~1.7.0",
@@ -53,8 +53,7 @@
     "karma-jasmine-html-reporter": "^0.2.2",
     "ngrx-store-freeze": "^0.1.9",
     "protractor": "~5.1.2",
-    "sw-precache": "^5.2.0",
-    "ts-node": "~3.0.4",
+    "ts-node": "~3.2.0",
     "tslint": "~5.3.2",
     "typescript": "~2.3.3"
   }

client/src/app/app-routing.module.ts

@@ -1,6 +1,5 @@
-
 import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
+import { Routes, RouterModule } from '@angular/router';
 
 import { UsersComponent } from './components/users/users.component';
 
@@ -9,9 +8,8 @@ const routes: Routes = [
   { path: 'users', component: UsersComponent },
 ];
 
-
 @NgModule({
-  imports: [ RouterModule.forRoot(routes) ],
-  exports: [ RouterModule ]
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
 })
-export class AppRoutingModule {}
+export class AppRoutingModule { }

client/src/app/app.module.ts

@@ -3,13 +3,15 @@ import 'hammerjs';
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { HttpModule } from '@angular/http';
+
+import { MaterialModule } from '@angular/material';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
 import { StoreModule } from '@ngrx/store';
 import { EffectsModule } from '@ngrx/effects';
 import { StoreDevtoolsModule } from '@ngrx/store-devtools';
-import { MaterialModule } from '@angular/material';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
-import { reducer } from './reducers';
+import { reducers } from './reducers';
 import { AppRoutingModule } from './app-routing.module';
 
 import { AppComponent } from './app.component';
@@ -19,6 +21,8 @@ import { UserEffects } from './effects/user';
 
 import { UserService } from './services/user.service';
 
+import { environment } from '../environments/environment';
+
 @NgModule({
   declarations: [
     AppComponent,
@@ -30,9 +34,11 @@ import { UserService } from './services/user.service';
     AppRoutingModule,
     MaterialModule,
     BrowserAnimationsModule,
-    StoreModule.provideStore(reducer),
-    StoreDevtoolsModule.instrumentOnlyWithExtension(),
-    EffectsModule.run(UserEffects),
+    StoreModule.forRoot(reducers),
+    !environment.production ? StoreDevtoolsModule.instrument() : [],
+    EffectsModule.forRoot([
+      UserEffects,
+    ]),
   ],
   providers: [
     UserService,

client/src/app/components/users/users.component.spec.ts

@@ -5,7 +5,7 @@ import { By } from '@angular/platform-browser';
 import { DebugElement } from '@angular/core';
 import { Observable } from 'rxjs/Observable';
 import { MaterialModule } from '@angular/material';
-import { reducer } from '../../reducers';
+import { reducers } from '../../reducers';
 import { StoreModule } from '@ngrx/store';
 import 'rxjs/add/observable/of';
 
@@ -32,7 +32,7 @@ describe('UsersComponent', () => {
     TestBed.configureTestingModule({
       imports: [
         MaterialModule,
-        StoreModule.provideStore(reducer)
+        StoreModule.forRoot(reducers),
       ],
       declarations: [ UsersComponent ],
       schemas: [ NO_ERRORS_SCHEMA ]

client/src/app/components/users/users.component.ts

@@ -17,7 +17,7 @@ export class UsersComponent implements OnInit {
   constructor(
     private store: Store<fromRoot.State>,
   ) {
-    this.user$ = store.select(fromRoot.getUserState);
+    this.user$ = store.select(fromRoot.getUsersEntities);
   }
 
   ngOnInit() {

client/src/app/effects/user.spec.ts

@@ -1,45 +1,72 @@
-import { TestBed, async, inject } from '@angular/core/testing';
-import { EffectsTestingModule, EffectsRunner } from '@ngrx/effects/testing';
+import { TestBed, inject } from '@angular/core/testing';
+import { provideMockActions } from '@ngrx/effects/testing';
+import { ReplaySubject } from 'rxjs/ReplaySubject';
+import { Observable } from 'rxjs/Observable';
+
+import { Http, BaseRequestOptions } from '@angular/http';
+import { MockBackend } from '@angular/http/testing';
 
 import { UserEffects } from './user';
-import { UserService } from '../services/user.service';
+import { User } from '../models/user';
 import * as userAction from '../actions/user';
+import { UserService } from '../services/user.service';
 
-describe('UsersEffects', () => {
-  const userServiceStub = {};
-  let runner: EffectsRunner;
-  let userEffects: UserEffects;
+describe('UserEffects', () => {
+  let effects: UserEffects;
+  const actions: Observable<any> = Observable.of('');
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [
-        EffectsTestingModule,
-      ],
       providers: [
-        { provide: UserService, useValue: userServiceStub },
         UserEffects,
-      ]
+        provideMockActions(() => actions),
+        // other providers
+        UserService,
+        {
+          provide: Http,
+          useFactory: (mockBackend, options) => {
+            return new Http(mockBackend, options);
+          },
+          deps: [MockBackend, BaseRequestOptions]
+        },
+        MockBackend,
+        BaseRequestOptions,
+      ],
     });
-  });
 
-  beforeEach(inject([
-      EffectsRunner, UserEffects
-    ],
-    (_runner, _userEffects) => {
-      runner = _runner;
-      userEffects = _userEffects;
-    }
-  ));
+    effects = TestBed.get(UserEffects);
+  });
 
-  it('should create the service', inject([UserEffects], (service: UserEffects) => {
+  it('should create the effects', inject([UserService], (service: UserService) => {
     expect(service).toBeTruthy();
   }));
 
-  it('should return a LOAD_USER_SUCCESS action after LOAD_USER', () => {
-    runner.queue({ type: 'LOAD_USER' });
+  it('loadQuarters$ should work', () => {
+    const user1 = {
+      url: 'www.nirgn.com',
+      username: 'nirgn',
+      email: 'nirgn@example.com',
+      groups: [
+        'admin'
+      ],
+    } as User;
+    const user2 = {
+      url: 'www.adisaar.com',
+      username: 'adisaar',
+      email: 'adisaar@example.com',
+      groups: [
+        'user'
+      ]
+    } as User;
+    const users = [user1, user2];
+
+    const action = new userAction.LoadUserAction();
+    const completion = new userAction.LoadUserSuccessAction(users);
+    const someAction = new ReplaySubject(1);
+    someAction.next(action);
 
-    userEffects.loadUser$.subscribe(result => {
-      expect(result).toEqual({ type: 'LOAD_USER_SUCCESS' });
-    });
+    effects.loadUser$.subscribe(result => {
+        expect(result).toBe(completion);
+      });
   });
 });

client/src/app/effects/user.ts

@@ -17,7 +17,8 @@ export class UserEffects {
   @Effect()
   loadUser$: Observable<Action>= this.actions$
     .ofType(user.LOAD_USER)
-    .switchMap(() => this.userService.getUsers())
-    .map(users => new user.LoadUserSuccessAction(users));
-
+    .switchMap(_ => this.userService.getUsers()
+      .map(users => new user.LoadUserSuccessAction(users))
+      // .catch(error => Observable.of(getPostsFail(error)))
+    );
 }

client/src/app/models/user.ts

@@ -4,3 +4,10 @@ export interface User {
   email: string;
   groups: Array<string>;
 }
+
+export interface UserResponse {
+  count: number;
+  next: string | null;
+  previous: string | null;
+  results: User[];
+}