From 0b88aa89cc74d3ed192e67fb085117a04c95d149 Mon Sep 17 00:00:00 2001 From: tomastrajan Date: Mon, 17 Jul 2017 23:06:23 +0200 Subject: [PATCH] feat: migrate to angular 4.3 and ngrx 4 --- package.json | 43 +++++++------- src/app/app.component.html | 11 +++- src/app/app.component.scss | 58 +++++++++++-------- src/app/app.component.scss-theme.scss | 2 +- src/app/app.component.spec.ts | 4 +- src/app/app.component.ts | 8 ++- src/app/app.module.ts | 10 ++-- src/app/core/core.interfaces.ts | 4 ++ src/app/core/core.module.ts | 28 +++------ src/app/core/index.ts | 2 +- .../local-storage/local-storage.middleware.ts | 13 ----- .../local-storage/local-storage.service.ts | 18 ++++-- src/app/examples/examples.module.ts | 25 ++++---- .../examples/examples.component.spec.ts | 4 +- .../stock-market.component.spec.ts | 5 +- .../stock-market/stock-market.component.ts | 8 +-- .../stock-market/stock-market.effects.ts | 7 ++- .../stock-market/stock-market.reducer.ts | 8 ++- .../stock-market/stock-market.service.spec.ts | 2 +- .../examples/todos/todos.component.spec.ts | 5 +- src/app/examples/todos/todos.component.ts | 20 ++++--- src/app/examples/todos/todos.effects.ts | 6 +- src/app/examples/todos/todos.reducer.ts | 20 ++++--- src/app/settings/settings.effects.ts | 6 +- src/app/settings/settings.module.ts | 9 +-- src/app/settings/settings.reducer.ts | 6 +- .../settings/settings.component.spec.ts | 4 +- .../settings/settings/settings.component.ts | 6 +- .../big-input-action.component.spec.ts | 2 +- .../big-input/big-input.component.spec.ts | 2 +- src/app/shared/shared.module.ts | 7 ++- .../features/features.component.spec.ts | 4 +- src/app/static/static.module.ts | 4 +- src/environments/environment.prod.ts | 5 +- src/environments/environment.ts | 5 +- tsconfig.json | 4 ++ tslint.json | 2 +- 37 files changed, 212 insertions(+), 165 deletions(-) create mode 100644 src/app/core/core.interfaces.ts delete mode 100644 src/app/core/local-storage/local-storage.middleware.ts diff --git a/package.json b/package.json index 601ae0db7..acc3f9488 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,7 @@ "ng": "ng", "start": "ng serve", "build": "ng build", - "test": "ng test", + "test": "npm run lint && ng test --single-run", "lint": "ng lint", "e2e": "ng e2e", "watch": "ng test --browsers PhantomJS --reporters spec", @@ -15,23 +15,25 @@ "clean": "rm -rf ./dist/", "server": "cd dist && http-server", "prod": "npm run clean && npm run build:prod && npm run server", - "ci": "npm run clean && ng lint && ng test --browsers PhantomJS --single-run --reporters spec && npm run build:travisci" + "ci": "npm run clean && ng lint && ng test --browsers PhantomJS --single-run --reporters spec && npm run build:travisci", + "release": "standard-version && git push --follow-tags origin master" }, "private": true, "dependencies": { - "@angular/animations": "^4.1.1", - "@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/material": "^2.0.0-beta.3", - "@angular/platform-browser": "^4.0.0", - "@angular/platform-browser-dynamic": "^4.0.0", - "@angular/router": "^4.0.0", - "@ngrx/core": "^1.2.0", - "@ngrx/effects": "^2.0.3", - "@ngrx/store": "^2.2.2", + "@angular/animations": "^4.3.0", + "@angular/cdk": "^2.0.0-beta.8", + "@angular/common": "^4.3.0", + "@angular/compiler": "^4.3.0", + "@angular/core": "^4.3.0", + "@angular/forms": "^4.3.0", + "@angular/http": "^4.3.0", + "@angular/material": "^2.0.0-beta.8", + "@angular/platform-browser": "^4.3.0", + "@angular/platform-browser-dynamic": "^4.3.0", + "@angular/router": "^4.3.0", + "@ngrx/store": "github:ngrx/store-builds", + "@ngrx/effects": "github:ngrx/effects-builds", + "@ngrx/router-store": "github:ngrx/router-store-builds", "@types/node-uuid": "0.0.28", "bootstrap": "^4.0.0-alpha.6", "classlist.js": "^1.1", @@ -39,13 +41,13 @@ "hammerjs": "^2.0.8", "intl": "^1.2.5", "node-uuid": "^1.4.8", - "rxjs": "^5.1.0", + "rxjs": "^5.4.2", "web-animations-js": "^2.2.5", - "zone.js": "^0.8.4" + "zone.js": "0.8.12" }, "devDependencies": { - "@angular/cli": "1.0.3", - "@angular/compiler-cli": "^4.0.0", + "@angular/cli": "1.3.0-beta.1", + "@angular/compiler-cli": "^4.3.0", "@types/jasmine": "2.5.38", "@types/node": "~6.0.60", "codelyzer": "~2.0.0", @@ -60,8 +62,9 @@ "karma-phantomjs-launcher": "^1.0.4", "karma-spec-reporter": "0.0.31", "protractor": "~5.1.0", + "standard-version": "^4.2.0", "ts-node": "~2.0.0", "tslint": "~4.5.0", - "typescript": "~2.2.0" + "typescript": "~2.3.0" } } diff --git a/src/app/app.component.html b/src/app/app.component.html index de399792b..9040a1c41 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -46,7 +46,9 @@ - + @@ -88,8 +90,13 @@
-
+
© {{year}} - Tomas Trajan + + {{version}} +
diff --git a/src/app/app.component.scss b/src/app/app.component.scss index 25b07afc9..256dd8f35 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -41,42 +41,52 @@ $footer-height: 140px; .row { padding: 10px 0; - a { - transition: padding 0.5s; - display: inline-block; - padding: 20px 5px; - &:hover { - text-decoration: none; - } - - span { + .links { + a { + transition: padding 0.5s; display: inline-block; - width: 70px; - padding: 0 0 0 5px; - overflow: hidden; - text-align: left; - white-space: nowrap; - transition: width 0.5s; - } - } + padding: 20px 5px; - @media (max-width: map-get($grid-breakpoints, md)) { - a { - padding: 20px; + &:hover { + text-decoration: none; + } span { - width: 0; - padding: 0; + display: inline-block; + width: 70px; + padding: 0 0 0 5px; + overflow: hidden; + text-align: left; + white-space: nowrap; + transition: width 0.5s; + } + } + + @media (max-width: map-get($grid-breakpoints, md)) { + a { + padding: 20px; + + span { + width: 0; + padding: 0; + } + } + } + + @media (max-width: map-get($grid-breakpoints, sm)) { + a { + padding: 20px 5px; } } } - @media (max-width: map-get($grid-breakpoints, sm)) { + .signature { a { - padding: 20px 5px; + float: right; } } + } } diff --git a/src/app/app.component.scss-theme.scss b/src/app/app.component.scss-theme.scss index 70074b687..df41c7533 100644 --- a/src/app/app.component.scss-theme.scss +++ b/src/app/app.component.scss-theme.scss @@ -29,7 +29,7 @@ color: mat-color($primary, lighter); background-color: mat-color($primary, darker); - .links { + .links, .signature { a { color: mat-color($primary, lighter); &:hover { diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts index 3d1e02fe2..c39002424 100644 --- a/src/app/app.component.spec.ts +++ b/src/app/app.component.spec.ts @@ -1,8 +1,8 @@ import { TestBed, async } from '@angular/core/testing'; import { RouterTestingModule } from '@angular/router/testing'; -import { SharedModule } from './shared'; -import { CoreModule } from './core'; +import { SharedModule } from '@app/shared'; +import { CoreModule } from '@app/core'; import { AppComponent } from './app.component'; diff --git a/src/app/app.component.ts b/src/app/app.component.ts index e2f35fef5..08d08b736 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -4,6 +4,11 @@ import { Store } from '@ngrx/store'; import { Subject } from 'rxjs/Subject'; import 'rxjs/add/operator/takeUntil'; import 'rxjs/add/operator/map'; +import 'rxjs/add/operator/filter'; + +import { environment as env } from '@env/environment'; + +import { selectorSettings } from './settings'; @Component({ selector: 'anms-root', @@ -13,6 +18,7 @@ import 'rxjs/add/operator/map'; export class AppComponent implements OnDestroy { themeClass: string; + version = env.versions.app; year = new Date().getFullYear(); private unsubscribe$: Subject = new Subject(); @@ -29,7 +35,7 @@ export class AppComponent implements OnDestroy { private store: Store ) { store - .select('settings') + .select(selectorSettings) .takeUntil(this.unsubscribe$) .map(({ theme }) => theme.toLowerCase()) .subscribe(theme => { diff --git a/src/app/app.module.ts b/src/app/app.module.ts index c03aee420..eced4dbfe 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,11 +1,12 @@ import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { NgModule } from '@angular/core'; -import { HttpModule } from '@angular/http'; +import { StoreModule } from '@ngrx/store'; +import { EffectsModule } from '@ngrx/effects'; -import { SharedModule } from './shared/shared.module'; +import { SharedModule } from '@app/shared'; +import { CoreModule } from '@app/core'; -import { CoreModule } from './core'; import { SettingsModule } from './settings'; import { StaticModule } from './static'; @@ -17,7 +18,6 @@ import { AppComponent } from './app.component'; // angular BrowserAnimationsModule, BrowserModule, - HttpModule, // core & shared CoreModule, @@ -28,7 +28,7 @@ import { AppComponent } from './app.component'; SettingsModule, // app - AppRoutingModule + AppRoutingModule, ], declarations: [ AppComponent diff --git a/src/app/core/core.interfaces.ts b/src/app/core/core.interfaces.ts new file mode 100644 index 000000000..c3bf23067 --- /dev/null +++ b/src/app/core/core.interfaces.ts @@ -0,0 +1,4 @@ +export interface Action { + type: string; + payload: any; +} diff --git a/src/app/core/core.module.ts b/src/app/core/core.module.ts index 3c6010f07..e9bb314f8 100644 --- a/src/app/core/core.module.ts +++ b/src/app/core/core.module.ts @@ -1,34 +1,24 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { HttpModule } from '@angular/http'; -import { StoreModule, combineReducers, ActionReducer } from '@ngrx/store'; - -import { settingsReducer } from '../settings'; +import { StoreModule } from '@ngrx/store'; +import { EffectsModule } from '@ngrx/effects'; import { LocalStorageService } from './local-storage/local-storage.service'; -import { - localStorageInitStateMiddleware -} from './local-storage/local-storage.middleware'; -export function createReducer(asyncReducers = {}): ActionReducer { - return localStorageInitStateMiddleware( - combineReducers(Object.assign({ - settings: settingsReducer - }, asyncReducers)) - ); -} - -const reducer = createReducer(); - -export function reducerAoT(state, action) { - return reducer(state, action); +export function getInitialState() { + return LocalStorageService.loadInitialState(); } @NgModule({ imports: [ + // angular CommonModule, HttpModule, - StoreModule.provideStore(reducerAoT) + + // ngrx + StoreModule.forRoot({}, { initialState: getInitialState }), + EffectsModule.forRoot([]), ], declarations: [], providers: [LocalStorageService] diff --git a/src/app/core/index.ts b/src/app/core/index.ts index 8c8c95bd1..90c741a88 100644 --- a/src/app/core/index.ts +++ b/src/app/core/index.ts @@ -1,3 +1,3 @@ export * from './local-storage/local-storage.service'; -export * from './local-storage/local-storage.middleware'; +export * from './core.interfaces'; export * from './core.module'; diff --git a/src/app/core/local-storage/local-storage.middleware.ts b/src/app/core/local-storage/local-storage.middleware.ts deleted file mode 100644 index 84fb906af..000000000 --- a/src/app/core/local-storage/local-storage.middleware.ts +++ /dev/null @@ -1,13 +0,0 @@ -import {Dispatcher} from '@ngrx/store'; - -import { LocalStorageService } from './local-storage.service'; - -export function localStorageInitStateMiddleware(reducer: any) { - return function (state, action: any) { - if (action.type === Dispatcher.INIT) { - state = LocalStorageService.loadInitialState(); - } - return reducer(state, action); - }; -} - diff --git a/src/app/core/local-storage/local-storage.service.ts b/src/app/core/local-storage/local-storage.service.ts index ae440ab0b..e13db2250 100644 --- a/src/app/core/local-storage/local-storage.service.ts +++ b/src/app/core/local-storage/local-storage.service.ts @@ -17,11 +17,21 @@ export class LocalStorageService { static loadInitialState() { return Object.keys(localStorage) - .reduce((state: any, key) => { - if (key.includes(APP_PREFIX)) { + .reduce((state: any, storageKey) => { + if (storageKey.includes(APP_PREFIX)) { state = state || {}; - const stateKey = key.replace(APP_PREFIX, '').toLowerCase(); - state[stateKey] = JSON.parse(localStorage.getItem(key)); + const stateKey = storageKey.replace(APP_PREFIX, '').toLowerCase() + .split('.'); + let currentStateRef = state; + stateKey.forEach((key, index) => { + if (index === stateKey.length - 1) { + currentStateRef[key] = JSON + .parse(localStorage.getItem(storageKey)); + return; + } + currentStateRef[key] = currentStateRef[key] || {}; + currentStateRef = currentStateRef[key]; + }); } return state; }, undefined); diff --git a/src/app/examples/examples.module.ts b/src/app/examples/examples.module.ts index f73923f83..9715d955c 100644 --- a/src/app/examples/examples.module.ts +++ b/src/app/examples/examples.module.ts @@ -1,9 +1,9 @@ import { NgModule } from '@angular/core'; -import { Store } from '@ngrx/store'; +import { StoreModule } from '@ngrx/store'; import { EffectsModule } from '@ngrx/effects'; -import { CoreModule, createReducer } from '../core'; -import { SharedModule } from '../shared'; +import { CoreModule } from '@app/core'; +import { SharedModule } from '@app/shared'; import { ExamplesRoutingModule } from './examples-routing.module'; import { ExamplesComponent } from './examples/examples.component'; @@ -15,18 +15,19 @@ import { stockMarketReducer } from './stock-market/stock-market.reducer'; import { StockMarketEffects } from './stock-market/stock-market.effects'; import { StockMarketService } from './stock-market/stock-market.service'; -export const appReducerWithExamples = createReducer({ - todos: todosReducer, - stocks: stockMarketReducer -}); - @NgModule({ imports: [ CoreModule, SharedModule, ExamplesRoutingModule, - EffectsModule.run(TodosEffects), - EffectsModule.run(StockMarketEffects) + StoreModule.forFeature('examples', { + todos: todosReducer, + stocks: stockMarketReducer + }), + EffectsModule.forFeature([ + TodosEffects, + StockMarketEffects + ]) ], declarations: [ ExamplesComponent, @@ -39,8 +40,6 @@ export const appReducerWithExamples = createReducer({ }) export class ExamplesModule { - constructor(private store: Store ) { - store.replaceReducer(appReducerWithExamples); - } + constructor() {} } diff --git a/src/app/examples/examples/examples.component.spec.ts b/src/app/examples/examples/examples.component.spec.ts index b28562c5f..eadb0f6a5 100644 --- a/src/app/examples/examples/examples.component.spec.ts +++ b/src/app/examples/examples/examples.component.spec.ts @@ -1,8 +1,8 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { RouterTestingModule } from '@angular/router/testing'; -import { SharedModule } from '../../shared'; -import { CoreModule } from '../../core'; +import { SharedModule } from '@app/shared'; +import { CoreModule } from '@app/core'; import { ExamplesComponent } from './examples.component'; diff --git a/src/app/examples/stock-market/stock-market.component.spec.ts b/src/app/examples/stock-market/stock-market.component.spec.ts index 0e900fe06..7b089b4b9 100644 --- a/src/app/examples/stock-market/stock-market.component.spec.ts +++ b/src/app/examples/stock-market/stock-market.component.spec.ts @@ -1,8 +1,9 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; -import { CoreModule } from '../../core'; -import { SharedModule } from '../../shared'; +import { CoreModule } from '@app/core'; +import { SharedModule } from '@app/shared'; + import { ExamplesModule } from '../examples.module'; import { StockMarketComponent } from './stock-market.component'; diff --git a/src/app/examples/stock-market/stock-market.component.ts b/src/app/examples/stock-market/stock-market.component.ts index 77964e213..8c7759a1e 100644 --- a/src/app/examples/stock-market/stock-market.component.ts +++ b/src/app/examples/stock-market/stock-market.component.ts @@ -4,7 +4,7 @@ import { Subject } from 'rxjs/Subject'; import 'rxjs/add/operator/takeUntil'; import 'rxjs/add/operator/map'; -import { retrieveStock } from './stock-market.reducer'; +import { actionRetrieveStock, selectorStocks } from './stock-market.reducer'; @Component({ selector: 'anms-stock-market', @@ -25,14 +25,14 @@ export class StockMarketComponent implements OnInit, OnDestroy { ngOnInit() { this.initialized = false; this.store - .select('stocks') + .select(selectorStocks) .takeUntil(this.unsubscribe$) .subscribe((stocks: any) => { this.stocks = stocks; if (!this.initialized) { this.initialized = true; - this.store.dispatch(retrieveStock(stocks.symbol)); + this.store.dispatch(actionRetrieveStock(stocks.symbol)); } }); } @@ -43,7 +43,7 @@ export class StockMarketComponent implements OnInit, OnDestroy { } onSymbolChange(symbol: string) { - this.store.dispatch(retrieveStock(symbol)); + this.store.dispatch(actionRetrieveStock(symbol)); } } diff --git a/src/app/examples/stock-market/stock-market.effects.ts b/src/app/examples/stock-market/stock-market.effects.ts index 2b565962c..e8c30b1a3 100644 --- a/src/app/examples/stock-market/stock-market.effects.ts +++ b/src/app/examples/stock-market/stock-market.effects.ts @@ -1,13 +1,14 @@ import { Injectable } from '@angular/core'; import { Actions, Effect } from '@ngrx/effects'; -import { Action } from '@ngrx/store'; import { Observable } from 'rxjs/Observable'; import 'rxjs/add/operator/map'; import 'rxjs/add/operator/debounceTime'; import 'rxjs/add/operator/distinctUntilChanged'; +import 'rxjs/add/operator/switchMap'; +import 'rxjs/add/operator/catch'; import 'rxjs/add/observable/of'; -import { LocalStorageService } from '../../core'; +import { LocalStorageService, Action } from '@app/core'; import { STOCK_MARKET_KEY, @@ -21,7 +22,7 @@ import { StockMarketService } from './stock-market.service'; export class StockMarketEffects { constructor( - private actions$: Actions, + private actions$: Actions, private localStorageService: LocalStorageService, private service: StockMarketService ) {} diff --git a/src/app/examples/stock-market/stock-market.reducer.ts b/src/app/examples/stock-market/stock-market.reducer.ts index 02963e36c..ec591d3e4 100644 --- a/src/app/examples/stock-market/stock-market.reducer.ts +++ b/src/app/examples/stock-market/stock-market.reducer.ts @@ -1,17 +1,19 @@ -import { Action } from '@ngrx/store'; +import { Action } from '@app/core'; export const initialState = { symbol: 'GOOGL' }; -export const STOCK_MARKET_KEY = 'STOCKS'; +export const STOCK_MARKET_KEY = 'EXAMPLES.STOCKS'; export const STOCK_MARKET_RETRIEVE = 'STOCK_MARKET_RETRIEVE'; export const STOCK_MARKET_RETRIEVE_SUCCESS = 'STOCK_MARKET_RETRIEVE_SUCCESS'; export const STOCK_MARKET_RETRIEVE_ERROR = 'STOCK_MARKET_RETRIEVE_ERROR'; -export const retrieveStock = (symbol: string) => +export const actionRetrieveStock = (symbol: string) => ({ type: STOCK_MARKET_RETRIEVE, payload: symbol }); +export const selectorStocks = state => state.examples.stocks; + export function stockMarketReducer(state = initialState, action: Action) { switch (action.type) { case STOCK_MARKET_RETRIEVE: diff --git a/src/app/examples/stock-market/stock-market.service.spec.ts b/src/app/examples/stock-market/stock-market.service.spec.ts index b7f457c2b..447ae64fb 100644 --- a/src/app/examples/stock-market/stock-market.service.spec.ts +++ b/src/app/examples/stock-market/stock-market.service.spec.ts @@ -1,6 +1,6 @@ import { TestBed, inject } from '@angular/core/testing'; -import { CoreModule } from '../../core'; +import { CoreModule } from '@app/core'; import { StockMarketService } from './stock-market.service'; diff --git a/src/app/examples/todos/todos.component.spec.ts b/src/app/examples/todos/todos.component.spec.ts index a6d6534ae..c61660044 100644 --- a/src/app/examples/todos/todos.component.spec.ts +++ b/src/app/examples/todos/todos.component.spec.ts @@ -1,7 +1,8 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; -import { CoreModule } from '../../core'; -import { SharedModule } from '../../shared'; +import { CoreModule } from '@app/core'; +import { SharedModule } from '@app/shared'; + import { ExamplesModule } from '../examples.module'; import { TodosComponent } from './todos.component'; diff --git a/src/app/examples/todos/todos.component.ts b/src/app/examples/todos/todos.component.ts index 9c072d84f..6139986ea 100644 --- a/src/app/examples/todos/todos.component.ts +++ b/src/app/examples/todos/todos.component.ts @@ -5,7 +5,13 @@ import 'rxjs/add/operator/takeUntil'; import 'rxjs/add/operator/map'; import { - addTodo, persistTodos, toggleTodo, removeDoneTodos, Todo, filterTodos, + actionAddTodo, + actionPersistTodos, + actionToggleTodo, + actionRemoveDoneTodos, + actionFilterTodos, + selectorTodos, + Todo, TodoFilter } from './todos.reducer'; @@ -27,11 +33,11 @@ export class TodosComponent implements OnInit, OnDestroy { ngOnInit() { this.store - .select('todos') + .select(selectorTodos) .takeUntil(this.unsubscribe$) .subscribe(todos => { this.todos = todos; - this.store.dispatch(persistTodos(todos)); + this.store.dispatch(actionPersistTodos(todos)); }); } @@ -68,20 +74,20 @@ export class TodosComponent implements OnInit, OnDestroy { } onAddTodo() { - this.store.dispatch(addTodo(this.newTodo)); + this.store.dispatch(actionAddTodo(this.newTodo)); this.newTodo = ''; } onToggleTodo(todo: Todo) { - this.store.dispatch(toggleTodo(todo.id)); + this.store.dispatch(actionToggleTodo(todo.id)); } onRemoveDoneTodos() { - this.store.dispatch(removeDoneTodos()); + this.store.dispatch(actionRemoveDoneTodos()); } onFilterTodos(filter: TodoFilter) { - this.store.dispatch(filterTodos(filter)); + this.store.dispatch(actionFilterTodos(filter)); } } diff --git a/src/app/examples/todos/todos.effects.ts b/src/app/examples/todos/todos.effects.ts index c44599d50..de1003a7f 100644 --- a/src/app/examples/todos/todos.effects.ts +++ b/src/app/examples/todos/todos.effects.ts @@ -1,9 +1,9 @@ import { Injectable } from '@angular/core'; import { Actions, Effect } from '@ngrx/effects'; -import { Action } from '@ngrx/store'; import { Observable } from 'rxjs/Observable'; +import 'rxjs/add/operator/do'; -import { LocalStorageService } from '../../core'; +import { LocalStorageService, Action } from '@app/core'; import { TODOS_KEY, @@ -14,7 +14,7 @@ import { export class TodosEffects { constructor( - private actions$: Actions, + private actions$: Actions, private localStorageService: LocalStorageService ) {} diff --git a/src/app/examples/todos/todos.reducer.ts b/src/app/examples/todos/todos.reducer.ts index c64f989b0..cc2d6b72f 100644 --- a/src/app/examples/todos/todos.reducer.ts +++ b/src/app/examples/todos/todos.reducer.ts @@ -1,6 +1,7 @@ -import { Action } from '@ngrx/store'; import { v4 as uuid } from 'node-uuid'; +import { Action } from '@app/core'; + export const initialState = { items: [ { id: uuid(), name: 'Open Todo list example', done: true }, @@ -12,20 +13,25 @@ export const initialState = { export type TodoFilter = 'ALL' | 'DONE' | 'ACTIVE'; -export const TODOS_KEY = 'TODOS'; +export const TODOS_KEY = 'EXAMPLES.TODOS'; export const TODOS_ADD = 'TODOS_ADD'; export const TODOS_TOGGLE = 'TODOS_TOGGLE'; export const TODOS_REMOVE_DONE = 'TODOS_REMOVE_DONE'; export const TODOS_FILTER = 'TODOS_FILTER'; export const TODOS_PERSIST = 'TODOS_PERSIST'; -export const addTodo = (name: string) => ({ type: TODOS_ADD, payload: name }); -export const toggleTodo = (id: string) => ({ type: TODOS_TOGGLE, payload: id }); -export const removeDoneTodos = () => ({ type: TODOS_REMOVE_DONE }); -export const persistTodos = (todos) => ({ type: TODOS_PERSIST, payload: todos }); -export const filterTodos = (filter: TodoFilter) => +export const actionRemoveDoneTodos = () => ({ type: TODOS_REMOVE_DONE }); +export const actionAddTodo = (name: string) => + ({ type: TODOS_ADD, payload: name }); +export const actionToggleTodo = (id: string) => + ({ type: TODOS_TOGGLE, payload: id }); +export const actionPersistTodos = (todos) => + ({ type: TODOS_PERSIST, payload: todos }); +export const actionFilterTodos = (filter: TodoFilter) => ({ type: TODOS_FILTER, payload: filter }); +export const selectorTodos = state => state.examples.todos; + export function todosReducer(state = initialState, action: Action) { switch (action.type) { case TODOS_ADD: diff --git a/src/app/settings/settings.effects.ts b/src/app/settings/settings.effects.ts index d6eb9b5f9..1fee970a3 100644 --- a/src/app/settings/settings.effects.ts +++ b/src/app/settings/settings.effects.ts @@ -1,9 +1,9 @@ import { Injectable } from '@angular/core'; import { Actions, Effect } from '@ngrx/effects'; -import { Action } from '@ngrx/store'; import { Observable } from 'rxjs/Observable'; +import 'rxjs/add/operator/do'; -import { LocalStorageService } from '../core'; +import { LocalStorageService, Action } from '@app/core'; import { SETTINGS_KEY, @@ -14,7 +14,7 @@ import { export class SettingsEffects { constructor( - private actions$: Actions, + private actions$: Actions, private localStorageService: LocalStorageService ) {} diff --git a/src/app/settings/settings.module.ts b/src/app/settings/settings.module.ts index e3b088e7e..f42635a3c 100644 --- a/src/app/settings/settings.module.ts +++ b/src/app/settings/settings.module.ts @@ -1,17 +1,18 @@ import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; +import { StoreModule } from '@ngrx/store'; import { EffectsModule } from '@ngrx/effects'; import { SharedModule } from '../shared'; -import { SettingsComponent } from './settings/settings.component'; +import { settingsReducer } from './settings.reducer'; import { SettingsEffects } from './settings.effects'; +import { SettingsComponent } from './settings/settings.component'; @NgModule({ imports: [ - CommonModule, SharedModule, - EffectsModule.run(SettingsEffects) + StoreModule.forFeature('settings', settingsReducer), + EffectsModule.forFeature([SettingsEffects]) ], declarations: [SettingsComponent] }) diff --git a/src/app/settings/settings.reducer.ts b/src/app/settings/settings.reducer.ts index c13347e38..95a8958f5 100644 --- a/src/app/settings/settings.reducer.ts +++ b/src/app/settings/settings.reducer.ts @@ -1,4 +1,4 @@ -import { Action } from '@ngrx/store'; +import { Action } from '@app/core'; export const initialState = { theme: 'DEFAULT-THEME' @@ -7,9 +7,11 @@ export const initialState = { export const SETTINGS_KEY = 'SETTINGS'; export const SETTINGS_CHANGE_THEME = 'SETTINGS_CHANGE_THEME'; -export const changeThemeAction = (theme: string) => +export const actionChangeTheme = (theme: string) => ({ type: SETTINGS_CHANGE_THEME, payload: theme }); +export const selectorSettings = state => state.settings || { theme: '' }; + export function settingsReducer(state = initialState, action: Action) { switch (action.type) { case SETTINGS_CHANGE_THEME: diff --git a/src/app/settings/settings/settings.component.spec.ts b/src/app/settings/settings/settings.component.spec.ts index 8b45d5d75..a7d102d52 100644 --- a/src/app/settings/settings/settings.component.spec.ts +++ b/src/app/settings/settings/settings.component.spec.ts @@ -1,8 +1,8 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; -import { CoreModule } from '../../core'; -import { SharedModule } from '../../shared'; +import { CoreModule } from '@app/core'; +import { SharedModule } from '@app/shared'; import { SettingsComponent } from './settings.component'; diff --git a/src/app/settings/settings/settings.component.ts b/src/app/settings/settings/settings.component.ts index a8c5fb0e9..99e0d90be 100644 --- a/src/app/settings/settings/settings.component.ts +++ b/src/app/settings/settings/settings.component.ts @@ -3,7 +3,7 @@ import { Store } from '@ngrx/store'; import { Subject } from 'rxjs/Subject'; import 'rxjs/add/operator/takeUntil'; -import { changeThemeAction } from '../settings.reducer'; +import { selectorSettings, actionChangeTheme } from '../settings.reducer'; @Component({ selector: 'anms-settings', @@ -22,7 +22,7 @@ export class SettingsComponent implements OnInit, OnDestroy { ]; constructor(private store: Store) { - store.select('settings') + store.select(selectorSettings) .takeUntil(this.unsubscribe$) .subscribe(({ theme }) => this.theme = theme); } @@ -36,7 +36,7 @@ export class SettingsComponent implements OnInit, OnDestroy { } onThemeSelect({ value }) { - this.store.dispatch(changeThemeAction(value)); + this.store.dispatch(actionChangeTheme(value)); } } diff --git a/src/app/shared/big-input/big-input-action.component.spec.ts b/src/app/shared/big-input/big-input-action.component.spec.ts index 652d31da9..a5a873dce 100644 --- a/src/app/shared/big-input/big-input-action.component.spec.ts +++ b/src/app/shared/big-input/big-input-action.component.spec.ts @@ -1,6 +1,6 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; -import { SharedModule } from '../../shared'; +import { SharedModule } from '@app/shared'; import { BigInputActionComponent } from './big-input-action.component'; diff --git a/src/app/shared/big-input/big-input.component.spec.ts b/src/app/shared/big-input/big-input.component.spec.ts index 27a75a066..b027200e8 100644 --- a/src/app/shared/big-input/big-input.component.spec.ts +++ b/src/app/shared/big-input/big-input.component.spec.ts @@ -1,6 +1,6 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; -import { SharedModule } from '../../shared'; +import { SharedModule } from '@app/shared'; import { BigInputComponent } from './big-input.component'; diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts index 61faf6349..0a7abbd6e 100644 --- a/src/app/shared/shared.module.ts +++ b/src/app/shared/shared.module.ts @@ -14,7 +14,8 @@ import { MdCheckboxModule, MdCardModule, MdListModule, - MdIconModule + MdIconModule, + MdTooltipModule } from '@angular/material'; import { BigInputComponent } from './big-input/big-input.component'; @@ -37,7 +38,8 @@ import { BigInputActionComponent } from './big-input/big-input-action.component' MdCheckboxModule, MdListModule, MdMenuModule, - MdIconModule + MdIconModule, + MdTooltipModule ], declarations: [ BigInputComponent, @@ -60,6 +62,7 @@ import { BigInputActionComponent } from './big-input/big-input-action.component' MdSelectModule, MdToolbarModule, MdIconModule, + MdTooltipModule, BigInputComponent, BigInputActionComponent diff --git a/src/app/static/features/features.component.spec.ts b/src/app/static/features/features.component.spec.ts index cc78845d0..b646db7e9 100644 --- a/src/app/static/features/features.component.spec.ts +++ b/src/app/static/features/features.component.spec.ts @@ -1,7 +1,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; -import { SharedModule } from '../../shared'; -import { CoreModule } from '../../core'; +import { SharedModule } from '@app/shared'; +import { CoreModule } from '@app/core'; import { FeaturesComponent } from './features.component'; diff --git a/src/app/static/static.module.ts b/src/app/static/static.module.ts index b3524c7f6..2eca940e3 100644 --- a/src/app/static/static.module.ts +++ b/src/app/static/static.module.ts @@ -1,7 +1,6 @@ import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { SharedModule } from '../shared'; +import { SharedModule } from '@app/shared'; import { StaticRoutingModule } from './static-routing.module'; import { AboutComponent } from './about/about.component'; @@ -9,7 +8,6 @@ import { FeaturesComponent } from './features/features.component'; @NgModule({ imports: [ - CommonModule, SharedModule, StaticRoutingModule ], diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts index 3612073bc..c412dc49d 100644 --- a/src/environments/environment.prod.ts +++ b/src/environments/environment.prod.ts @@ -1,3 +1,6 @@ export const environment = { - production: true + production: true, + versions: { + app: require('../../package.json').version + } }; diff --git a/src/environments/environment.ts b/src/environments/environment.ts index b7f639aec..a095eb384 100644 --- a/src/environments/environment.ts +++ b/src/environments/environment.ts @@ -4,5 +4,8 @@ // The list of which env maps to which file can be found in `.angular-cli.json`. export const environment = { - production: false + production: false, + versions: { + app: require('../../package.json').version + } }; diff --git a/tsconfig.json b/tsconfig.json index a35a8ee3a..39ff62121 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -12,6 +12,10 @@ "typeRoots": [ "node_modules/@types" ], + "paths": { + "@app/*": ["app/*"], + "@env/*": ["environments/*"] + }, "lib": [ "es2016", "dom" diff --git a/tslint.json b/tslint.json index 7d51b9ad5..e6ffd9e0e 100644 --- a/tslint.json +++ b/tslint.json @@ -21,7 +21,7 @@ true, "spaces" ], - "interface-over-type-literal": true, + "interface-over-type-literal": false, "label-position": true, "max-line-length": [ true,