Merge pull request #83 from aviabird/migrate_to_ngrx_store_4_and_angu…

…lar_5

Migrate to ngrx store 4.1.1 and angular 5

.angular-cli.json

@@ -21,7 +21,8 @@
       "testTsconfig": "tsconfig.spec.json",
       "prefix": "app",
       "styles": [
-        "styles.scss"
+        "styles.scss",
+        "../node_modules/font-awesome/css/font-awesome.css"
       ],
       "scripts": [],
       "environmentSource": "environments/environment.ts",

.vscode/launch.json

@@ -0,0 +1,19 @@
+{
+  "version": "0.1.0",
+  "configurations": [
+    {
+      "name": "Launch localhost",
+      "type": "chrome",
+      "request": "launch",
+      "url": "http://localhost:4200",
+      "webRoot": "${workspaceRoot}/wwwroot"
+    },
+    {
+      "name": "Launch index.html (disable sourcemaps)",
+      "type": "chrome",
+      "request": "launch",
+      "sourceMaps": false,
+      "file": "${workspaceRoot}/index.html"
+    }
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,21 @@
+{
+  "typescript.check.workspaceVersion": false,
+  "files.exclude": {
+    "**/.git": true,
+    "**/.svn": true,
+    "**/.hg": true,
+    "**/.DS_Store": true,
+    // "node_modules": true,
+    "bin": true,
+    "obj": true,
+    "dist": true,
+    "Properties": true,
+    ".vs": true,
+    "*.csproj": true,
+    "*.sln": true,
+    "*.csproj.user": true,
+    "*.suo": true,
+    ".docker": false,
+    "docs": false
+  }
+}

package.json

@@ -4,70 +4,72 @@
   "license": "MIT",
   "scripts": {
     "ng": "./node_modules/@angular/cli/bin/ng",
-    "start-mock": "ng serve -H 0.0.0.0 --environment=mock",
+    "start:mock": "ng serve -H 0.0.0.0 --environment=mock",
     "start": "ng serve -H 0.0.0.0",
     "build": "ng build",
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e",
     "compodoc": "./node_modules/.bin/compodoc -p src/tsconfig.app.json -d docs/",
-    "build--prod": "ng build --prod --no-sourcemap --stats-json && npm run sw",
+    "build:prod": "ng build --prod --no-sourcemap --stats-json && npm run sw",
     "sw": "sw-precache --root=dist --config=sw-precache-config.js",
     "static-serve": "cd dist && live-server --port=4200 --host=localhost --entry-file=/index.html"
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^4.2.6",
-    "@angular/common": "^4.2.6",
-    "@angular/compiler": "^4.2.6",
-    "@angular/core": "^4.2.6",
-    "@angular/forms": "^4.2.6",
-    "@angular/http": "^4.2.6",
-    "@angular/platform-browser": "^4.2.6",
-    "@angular/platform-browser-dynamic": "^4.2.6",
-    "@angular/router": "^4.2.6",
-    "@ngrx/core": "^1.2.0",
-    "@ngrx/effects": "^2.0.4",
-    "@ngrx/store": "^2.2.1",
+    "@angular/animations": "^5.1.0",
+    "@angular/common": "^5.1.0",
+    "@angular/compiler": "^5.1.0",
+    "@angular/core": "^5.1.0",
+    "@angular/forms": "^5.1.0",
+    "@angular/http": "^5.1.0",
+    "@angular/platform-browser": "^5.1.0",
+    "@angular/platform-browser-dynamic": "^5.1.0",
+    "@angular/router": "^5.1.0",
+    "@ngrx/core": "1.2.0",
+    "@ngrx/effects": "^4.1.1",
+    "@ngrx/router-store": "^4.1.1",
+    "@ngrx/store": "^4.1.1",
     "bootstrap": "^3.3.7",
     "bootstrap-sass": "^3.3.7",
     "core-js": "^2.4.1",
     "font-awesome": "^4.7.0",
     "immutable": "^3.8.1",
     "ngx-bootstrap": "^1.7.1",
     "reselect": "^2.5.4",
-    "rxjs": "^5.3.0",
-    "zone.js": "0.8.7"
+    "rxjs": "^5.5.2",
+    "zone.js": "^0.8.14"
   },
   "devDependencies": {
-    "@angular/cli": "^1.1.2",
-    "@angular/compiler-cli": "^4.2.6",
+    "@angular/cli": "^1.5.0",
+    "@angular/compiler-cli": "^5.1.0",
+    "@angular/language-service": "^5.0.0",
     "@angularclass/hmr": "^1.2.2",
     "@compodoc/compodoc": "^1.0.0-beta.8",
-    "@ngrx/store-devtools": "^3.2.3",
+    "@ngrx/store-devtools": "^4.1.1",
     "@types/grecaptcha": "^2.0.31",
     "@types/jasmine": "2.5.38",
     "@types/morris.js": "^0.5.6",
     "@types/node": "~6.0.60",
     "codelyzer": "^2.0.1",
-    "jasmine-core": "^2.5.2",
-    "jasmine-spec-reporter": "^3.2.0",
-    "karma": "^1.4.1",
-    "karma-chrome-launcher": "^2.0.0",
-    "karma-cli": "^1.0.1",
-    "karma-coverage-istanbul-reporter": "^0.2.3",
-    "karma-jasmine": "^1.1.0",
+    "jasmine-core": "~2.6.2",
+    "jasmine-spec-reporter": "~4.1.0",
+    "karma": "~1.7.0",
+    "karma-chrome-launcher": "~2.1.1",
+    "karma-cli": "~1.0.1",
+    "karma-coverage-istanbul-reporter": "^1.2.1",
+    "karma-jasmine": "~1.1.0",
     "karma-jasmine-html-reporter": "^0.2.2",
     "ngrx-store-freeze": "^0.1.9",
     "node-sass": "^4.5.0",
     "nswag": "10.6.0",
-    "protractor": "^5.1.1",
+    "protractor": "~5.1.2",
     "raw-loader": "^0.5.1",
     "sass-loader": "^6.0.3",
     "sw-precache": "^5.0.0",
-    "ts-node": "^1.7.2",
-    "tslint": "^4.5.1",
-    "typescript": "2.3"
+    "ts-node": "~3.2.0",
+    "tslint": "~5.7.0",
+    "typescript": "~2.4.2"
   },
   "description": "Spree for Angular2",
   "main": "index.js",

src/app/app.module.ts

@@ -1,8 +1,11 @@
+import { EffectsModule } from '@ngrx/effects';
+import { environment } from './../environments/environment.prod';
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { HttpModule } from '@angular/http';
-import { RouterModule } from '@angular/router';
+import { RouterModule, PreloadAllModules } from '@angular/router';
+import { StoreDevtoolsModule } from '@ngrx/store-devtools';
 
 // Components
 import { AppComponent } from './app.component';
@@ -15,7 +18,7 @@ import { HomeModule } from './home/index';
 import { LayoutModule } from './layout/index';
 import { CoreModule } from './core/index';
 import { StoreModule } from '@ngrx/store';
-import { reducer } from './app.reducers';
+import { reducers, metaReducers } from './app.reducers';
 import { CheckoutHeaderComponent } from './layout/checkout-header/checkout-header.component';
 import { CheckoutFooterComponent } from './layout/checkout-footer/checkout-footer.component';
 
@@ -35,8 +38,30 @@ import 'rxjs/add/observable/of';
     CheckoutFooterComponent
   ],
   imports: [
-    RouterModule.forRoot(routes),
-    StoreModule.provideStore(reducer),
+    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules }),
+    StoreModule.forRoot(reducers, { metaReducers }),
+
+    /**
+     * Store devtools instrument the store retaining past versions of state
+     * and recalculating new states. This enables powerful time-travel
+     * debugging.
+     *
+     * To use the debugger, install the Redux Devtools extension for either
+     * Chrome or Firefox
+     *
+     * See: https://github.com/zalmoxisus/redux-devtools-extension
+     */
+    !environment.production ? StoreDevtoolsModule.instrument() : [],
+
+    /**
+     * EffectsModule.forRoot() is imported once in the root module and
+     * sets up the effects class to be initialized immediately when the
+     * application starts.
+     *
+     * See: https://github.com/ngrx/platform/blob/master/docs/effects/api.md#forroot
+     */
+    EffectsModule.forRoot([]),
+
     BrowserModule,
     FormsModule,
     HttpModule,

src/app/app.reducers.ts

@@ -1,10 +1,9 @@
-import { searchReducer } from './home/reducers/search.reducers';
 import { environment } from './../environments/environment';
-import { productReducer } from './product/reducers/product-reducer';
+import * as fromProduct from './product/reducers/product-reducer';
 import { ProductState } from './product/reducers/product-state';
-import { userReducer } from './user/reducers/user.reducer';
-import { checkoutReducer } from './checkout/reducers/checkout.reducer';
-import { authReducer } from './auth/reducers/auth.reducer';
+import * as fromUser from './user/reducers/user.reducer';
+import * as fromCheckout from './checkout/reducers/checkout.reducer';
+import * as fromAuth from './auth/reducers/auth.reducer';
 
 /**
  * combineReducers is another useful metareducer that takes a map of reducer
@@ -14,9 +13,9 @@ import { authReducer } from './auth/reducers/auth.reducer';
  *
  * More: https://egghead.io/lessons/javascript-redux-implementing-combinereducers-from-scratch
  */
-import { combineReducers, ActionReducer } from '@ngrx/store';
+import { combineReducers, ActionReducer, ActionReducerMap, MetaReducer } from '@ngrx/store';
 
-import { AppState } from './interfaces';
+import { AppState as State } from './interfaces';
 
 /**
  * The compose function is one of our most handy tools. In basic terms, you give
@@ -35,30 +34,28 @@ import { compose } from '@ngrx/core/compose';
  */
 import { storeFreeze } from 'ngrx-store-freeze';
 
-const reducers = {
-  products: productReducer,
-  auth: authReducer,
-  checkout: checkoutReducer,
-  users: userReducer,
-  search: searchReducer
+export const reducers: ActionReducerMap<State> = {
+  products: fromProduct.reducer,
+  auth: fromAuth.reducer,
+  checkout: fromCheckout.reducer,
+  users: fromUser.reducer
 };
 
-export const developmentReducer: ActionReducer<AppState> = compose(storeFreeze, combineReducers)(reducers); ;
-const productionReducer: ActionReducer<AppState> = combineReducers(reducers);
+// console.log all actions
+export function logger(reducer: ActionReducer<State>): ActionReducer<any, any> {
+  return function(state: State, action: any): State {
+    console.log('state', state);
+    console.log('action', action);
 
-/**
- *
- *
- * @export
- * @param {*} state
- * @param {*} action
- * @returns
- */
-export function reducer(state: any, action: any) {
-  if (environment.production) {
-    return productionReducer(state, action);
-  } else {
-    return developmentReducer(state, action);
-  }
+    return reducer(state, action);
+  };
 }
 
+/**
+ * By default, @ngrx/store uses combineReducers with the reducer map to compose
+ * the root meta-reducer. To add more meta-reducers, provide an array of meta-reducers
+ * that will be composed to form the root meta-reducer.
+ */
+export const metaReducers: MetaReducer<State>[] = !environment.production
+  ? [logger]
+  : [];

src/app/auth/actions/auth.actions.ts

@@ -7,23 +7,23 @@ export class AuthActions {
   static LOGOUT_SUCCESS = 'LOGOUT_SUCCESS';
   static AUTHORIZE = 'AUTHORIZE';
 
-  authorize(): Action {
+  authorize() {
     return { type: AuthActions.AUTHORIZE };
   }
 
-  login(): Action {
+  login() {
     return { type: AuthActions.LOGIN };
   }
 
-  loginSuccess(): Action {
+  loginSuccess() {
     return { type: AuthActions.LOGIN_SUCCESS};
   }
 
-  logout(): Action {
+  logout() {
     return { type: AuthActions.LOGOUT };
   }
 
-  logoutSuccess(): Action {
+  logoutSuccess() {
     return { type: AuthActions.LOGOUT_SUCCESS };
   }
 }

src/app/auth/reducers/auth.reducer.ts

@@ -4,8 +4,7 @@ import { AuthState, AuthStateRecord } from './auth.state';
 
 export const initialState: AuthState = new AuthStateRecord() as AuthState;
 
-export const authReducer: ActionReducer<AuthState> =
-  (state: AuthState = initialState, { type, payload }: Action): AuthState => {
+export function reducer(state = initialState, { type, payload }: any): AuthState {
     switch (type) {
       case AuthActions.LOGIN_SUCCESS:
         return state.merge({ isAuthenticated: true }) as AuthState;

src/app/checkout/actions/checkout.actions.ts

@@ -28,61 +28,61 @@ export class CheckoutActions {
     };
   }
 
-  addToCart(variant_id: number): Action {
+  addToCart(variant_id: number) {
     return {
       type: CheckoutActions.ADD_TO_CART,
       payload: variant_id
     };
   }
 
-  addToCartSuccess(lineItem: LineItem): Action {
+  addToCartSuccess(lineItem: LineItem) {
     return {
       type: CheckoutActions.ADD_TO_CART_SUCCESS,
       payload: lineItem
     };
   }
 
-  removeLineItem(lineItemId: number): Action {
+  removeLineItem(lineItemId: number) {
     return {
       type: CheckoutActions.REMOVE_LINE_ITEM,
       payload: lineItemId
     };
   }
 
-  removeLineItemSuccess(lineItem: LineItem): Action {
+  removeLineItemSuccess(lineItem: LineItem) {
     return {
       type: CheckoutActions.REMOVE_LINE_ITEM_SUCCESS,
       payload: lineItem
     };
   }
 
-  changeLineItemQuantity(quantity: number, lineItemId: number): Action {
+  changeLineItemQuantity(quantity: number, lineItemId: number) {
     return {
       type: CheckoutActions.CHANGE_LINE_ITEM_QUANTITY,
       payload: { quantity, lineItemId }
     };
   }
 
-  placeOrder(): Action {
+  placeOrder() {
     return { type: CheckoutActions.PLACE_ORDER };
   }
 
-  changeOrderState(): Action {
+  changeOrderState() {
     return { type: CheckoutActions.CHANGE_ORDER_STATE };
   }
 
-  changeOrderStateSuccess(order: Order): Action {
+  changeOrderStateSuccess(order: Order) {
     return {
       type: CheckoutActions.CHANGE_ORDER_STATE_SUCCESS,
       payload: order
     };
   }
 
-  updateOrder(): Action {
+  updateOrder() {
     return { type: CheckoutActions.UPDATE_ORDER };
   }
 
-  updateOrderSuccess(order: Order): Action {
+  updateOrderSuccess(order: Order) {
     return {
       type: CheckoutActions.UPDATE_ORDER_SUCCESS,
       payload: order