Upgrade to ngrx v4 (#378)

* Update ngrx to v4

* package.json files

* release: Remove zadic references from release script

* fix(user-config): Fix user-config loading

* build: Lock package dependencies

* build: fix app version

* ci: remove build:test step

* fix(user-config): Revert switch-keymap-action modifications

* test(user-config): xit keystroke-action test

* fix(user-config): Fix user config loading

* fix(user-config): Fix user config loading

packages/uhk-web/src/app/components/keymap/edit/keymap-edit.component.ts

@@ -3,8 +3,6 @@ import { ActivatedRoute } from '@angular/router';
 import { Store } from '@ngrx/store';
 import { Keymap } from 'uhk-common';
 
-import '@ngrx/core/add/operator/select';
-
 import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/operator/first';
 import 'rxjs/add/operator/let';
@@ -18,8 +16,7 @@ import { saveAs } from 'file-saver';
 
 import { AppState, getKeyboardLayout } from '../../../store';
 import { getKeymap, getKeymaps, getUserConfiguration } from '../../../store/reducers/user-configuration';
-import 'rxjs/add/operator/pluck';
-import { SvgKeyboardWrapComponent } from '../../svg/wrap/svg-keyboard-wrap.component';
+import { SvgKeyboardWrapComponent } from '../../svg/wrap';
 import { KeyboardLayout } from '../../../keyboard/keyboard-layout.enum';
 
 @Component({

packages/uhk-web/src/app/shared.module.ts

@@ -0,0 +1,191 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { NotifierModule } from 'angular-notifier';
+
+import { DragulaModule } from 'ng2-dragula/ng2-dragula';
+import { Select2Module } from 'ng2-select2/ng2-select2';
+
+import { AddOnComponent } from './components/add-on';
+import { KeyboardSliderComponent } from './components/keyboard/slider';
+import { DeviceSettingsComponent } from './components/device';
+import { KeymapAddComponent, KeymapEditComponent, KeymapHeaderComponent } from './components/keymap';
+import { LayersComponent } from './components/layers';
+import {
+    MacroActionEditorComponent,
+    MacroDelayTabComponent,
+    MacroEditComponent,
+    MacroHeaderComponent,
+    MacroItemComponent,
+    MacroKeyTabComponent,
+    MacroListComponent,
+    MacroMouseTabComponent,
+    MacroNotFoundComponent,
+    MacroTextTabComponent
+} from './components/macro';
+import { NotificationComponent } from './components/notification';
+import { PopoverComponent } from './components/popover';
+import {
+    KeymapTabComponent,
+    KeypressTabComponent,
+    LayerTabComponent,
+    MacroTabComponent,
+    MouseTabComponent,
+    NoneTabComponent
+} from './components/popover/tab';
+import { CaptureKeystrokeButtonComponent } from './components/popover/widgets/capture-keystroke';
+import { IconComponent } from './components/popover/widgets/icon';
+import { SettingsComponent } from './components/settings';
+import { SideMenuComponent } from './components/side-menu';
+import { SvgKeyboardComponent } from './components/svg/keyboard';
+import {
+    SvgIconTextKeyComponent,
+    SvgKeyboardKeyComponent,
+    SvgKeystrokeKeyComponent,
+    SvgMouseClickKeyComponent,
+    SvgMouseKeyComponent,
+    SvgMouseMoveKeyComponent,
+    SvgMouseScrollKeyComponent,
+    SvgMouseSpeedKeyComponent,
+    SvgOneLineTextKeyComponent,
+    SvgSingleIconKeyComponent,
+    SvgSwitchKeymapKeyComponent,
+    SvgTextIconKeyComponent,
+    SvgTwoLineTextKeyComponent
+} from './components/svg/keys';
+import { SvgModuleComponent } from './components/svg/module';
+import { SvgKeyboardWrapComponent } from './components/svg/wrap';
+import { appRoutingProviders, routing } from './app.routes';
+
+import { CancelableDirective, TooltipDirective } from './directives';
+import { SafeStylePipe } from './pipes';
+
+import { CaptureService } from './services/capture.service';
+import { MapperService } from './services/mapper.service';
+import { SvgModuleProviderService } from './services/svg-module-provider.service';
+
+import { KeymapEditGuard } from './components/keymap/edit';
+import { MacroNotFoundGuard } from './components/macro/not-found';
+import { DataStorageRepositoryService } from './services/datastorage-repository.service';
+import { DefaultUserConfigurationService } from './services/default-user-configuration.service';
+import { LogService } from 'uhk-common';
+import { AutoUpdateSettings } from './components/auto-update-settings/auto-update-settings';
+import { angularNotifierConfig } from './models/angular-notifier-config';
+import { UndoableNotifierComponent } from './components/undoable-notifier';
+import { UhkHeader } from './components/uhk-header/uhk-header';
+import { UpdateAvailableComponent } from './components/update-available/update-available.component';
+import { UhkMessageComponent } from './components/uhk-message/uhk-message.component';
+import { AppRendererService } from './services/app-renderer.service';
+import { AppUpdateRendererService } from './services/app-update-renderer.service';
+import { IpcCommonRenderer } from './services/ipc-common-renderer';
+import { MissingDeviceComponent } from './components/missing-device/missing-device.component';
+import { PrivilegeCheckerComponent } from './components/privilege-checker/privilege-checker.component';
+import { UhkDeviceConnectedGuard } from './services/uhk-device-connected.guard';
+import { UhkDeviceDisconnectedGuard } from './services/uhk-device-disconnected.guard';
+import { UhkDeviceUninitializedGuard } from './services/uhk-device-uninitialized.guard';
+import { MainPage } from './pages/main-page/main.page';
+import { DeviceEffects } from './store/effects/device';
+import { DeviceRendererService } from './services/device-renderer.service';
+import { UhkDeviceInitializedGuard } from './services/uhk-device-initialized.guard';
+import { ProgressButtonComponent } from './components/progress-button/progress-button.component';
+import { MainAppComponent } from './app.component';
+
+@NgModule({
+    declarations: [
+        MainAppComponent,
+        DeviceSettingsComponent,
+        KeymapEditComponent,
+        KeymapHeaderComponent,
+        NotificationComponent,
+        SvgIconTextKeyComponent,
+        SvgKeyboardKeyComponent,
+        SvgKeystrokeKeyComponent,
+        SvgMouseKeyComponent,
+        SvgMouseClickKeyComponent,
+        SvgMouseMoveKeyComponent,
+        SvgMouseScrollKeyComponent,
+        SvgMouseSpeedKeyComponent,
+        SvgOneLineTextKeyComponent,
+        SvgSingleIconKeyComponent,
+        SvgSwitchKeymapKeyComponent,
+        SvgTextIconKeyComponent,
+        SvgTwoLineTextKeyComponent,
+        SvgKeyboardKeyComponent,
+        SvgKeyboardWrapComponent,
+        SvgKeyboardComponent,
+        SvgModuleComponent,
+        LayersComponent,
+        PopoverComponent,
+        KeymapAddComponent,
+        SideMenuComponent,
+        KeypressTabComponent,
+        KeymapTabComponent,
+        LayerTabComponent,
+        MacroTabComponent,
+        MouseTabComponent,
+        NoneTabComponent,
+        CaptureKeystrokeButtonComponent,
+        IconComponent,
+        MacroEditComponent,
+        MacroListComponent,
+        MacroHeaderComponent,
+        MacroItemComponent,
+        MacroActionEditorComponent,
+        MacroDelayTabComponent,
+        MacroKeyTabComponent,
+        MacroMouseTabComponent,
+        MacroTextTabComponent,
+        MacroNotFoundComponent,
+        AddOnComponent,
+        SettingsComponent,
+        KeyboardSliderComponent,
+        CancelableDirective,
+        TooltipDirective,
+        SafeStylePipe,
+        AutoUpdateSettings,
+        UndoableNotifierComponent,
+        UhkHeader,
+        UpdateAvailableComponent,
+        UhkMessageComponent,
+        MissingDeviceComponent,
+        PrivilegeCheckerComponent,
+        MainPage,
+        ProgressButtonComponent
+    ],
+    imports: [
+        CommonModule,
+        BrowserAnimationsModule,
+        FormsModule,
+        DragulaModule,
+        routing,
+        Select2Module,
+        NotifierModule.withConfig(angularNotifierConfig)
+    ],
+    providers: [
+        SvgModuleProviderService,
+        MapperService,
+        appRoutingProviders,
+        KeymapEditGuard,
+        MacroNotFoundGuard,
+        CaptureService,
+        DataStorageRepositoryService,
+        DefaultUserConfigurationService,
+        LogService,
+        DefaultUserConfigurationService,
+        AppUpdateRendererService,
+        AppRendererService,
+        IpcCommonRenderer,
+        DeviceRendererService,
+        UhkDeviceConnectedGuard,
+        UhkDeviceDisconnectedGuard,
+        UhkDeviceInitializedGuard,
+        UhkDeviceUninitializedGuard
+    ],
+    exports: [
+        UhkMessageComponent,
+        MainAppComponent
+    ]
+})
+export class SharedModule {
+}

packages/uhk-web/src/app/store/actions/keymap.ts

@@ -1,19 +1,102 @@
 import { Action } from '@ngrx/store';
 import { KeyAction, Keymap, Macro } from 'uhk-common';
+import { UndoUserConfigData } from '../../models/undo-user-config-data';
+
+export type KeymapAction =
+    KeymapActions.AddKeymapAction |
+    KeymapActions.DuplicateKeymapAction |
+    KeymapActions.EditKeymapNameAction |
+    KeymapActions.EditKeymapAbbreviationAction |
+    KeymapActions.LoadKeymapSuccessAction |
+    KeymapActions.SetDefaultAction |
+    KeymapActions.RemoveKeymapAction |
+    KeymapActions.SaveKeyAction |
+    KeymapActions.CheckMacroAction;
 
 export namespace KeymapActions {
-    export const PREFIX = '[Keymap] ';
-    export const ADD = KeymapActions.PREFIX + 'Add keymap';
-    export const DUPLICATE = KeymapActions.PREFIX + 'Duplicate keymap';
-    export const EDIT_ABBR = KeymapActions.PREFIX + 'Edit keymap abbreviation';
-    export const EDIT_NAME = KeymapActions.PREFIX + 'Edit keymap title';
-    export const SAVE_KEY = KeymapActions.PREFIX + 'Save key action';
-    export const SET_DEFAULT = KeymapActions.PREFIX + 'Set default option';
-    export const REMOVE = KeymapActions.PREFIX + 'Remove keymap';
-    export const CHECK_MACRO = KeymapActions.PREFIX + 'Check deleted macro';
-    export const LOAD_KEYMAPS = KeymapActions.PREFIX + 'Load keymaps';
-    export const LOAD_KEYMAPS_SUCCESS = KeymapActions.PREFIX + 'Load keymaps success';
-    export const UNDO_LAST_ACTION = KeymapActions.PREFIX + 'Undo last action';
+    export const ADD = '[Keymap] Add keymap';
+
+    export type AddKeymapAction = {
+        type: typeof ADD,
+        payload: Keymap
+    };
+
+    export const DUPLICATE = '[Keymap] Duplicate keymap';
+
+    export type DuplicateKeymapAction = {
+        type: typeof DUPLICATE,
+        payload: Keymap
+    };
+
+    export const EDIT_ABBR = '[Keymap] Edit keymap abbreviation';
+
+    export type EditKeymapAbbreviationAction = {
+        type: typeof EDIT_ABBR,
+        payload: {
+            abbr: string;
+            newAbbr: string;
+            name: string;
+        }
+    };
+
+    export const EDIT_NAME = '[Keymap] Edit keymap title';
+
+    export type EditKeymapNameAction = {
+        type: typeof EDIT_NAME,
+        payload: {
+            abbr: string;
+            name: string;
+        }
+    };
+
+    export const SAVE_KEY = '[Keymap] Save key action';
+
+    export type SaveKeyAction = {
+        type: typeof SAVE_KEY,
+        payload: {
+            keymap: Keymap;
+            layer: number;
+            module: number;
+            key: number;
+            keyAction: KeyAction;
+        }
+    };
+
+    export const SET_DEFAULT = '[Keymap] Set default option';
+
+    export type SetDefaultAction = {
+        type: typeof SET_DEFAULT,
+        payload: string
+    };
+
+    export const REMOVE = '[Keymap] Remove keymap';
+
+    export type RemoveKeymapAction = {
+        type: typeof REMOVE,
+        payload: string
+    };
+
+    export const CHECK_MACRO = '[Keymap] Check deleted macro';
+
+    export type CheckMacroAction = {
+        type: typeof CHECK_MACRO,
+        payload: Macro
+    };
+
+    export const LOAD_KEYMAPS = '[Keymap] Load keymaps';
+    export const LOAD_KEYMAPS_SUCCESS = '[Keymap] Load keymaps success';
+
+    export type LoadKeymapSuccessAction = {
+        type: typeof LOAD_KEYMAPS_SUCCESS,
+        payload: Keymap[]
+    };
+
+    export const UNDO_LAST_ACTION = '[Keymap] Undo last action';
+
+    export type UndoLastAction = {
+        type: typeof UNDO_LAST_ACTION,
+        payload: UndoUserConfigData
+    };
 
     export function loadKeymaps(): Action {
         return {
@@ -21,42 +104,42 @@ export namespace KeymapActions {
         };
     }
 
-    export function loadKeymapsSuccess(keymaps: Keymap[]): Action {
+    export function loadKeymapsSuccess(keymaps: Keymap[]): LoadKeymapSuccessAction {
         return {
             type: KeymapActions.LOAD_KEYMAPS_SUCCESS,
             payload: keymaps
         };
     }
 
-    export function addKeymap(item: Keymap): Action {
+    export function addKeymap(item: Keymap): AddKeymapAction {
         return {
             type: KeymapActions.ADD,
             payload: item
         };
     }
 
-    export function setDefault(abbr: string): Action {
+    export function setDefault(abbr: string): SetDefaultAction {
         return {
             type: KeymapActions.SET_DEFAULT,
             payload: abbr
         };
     }
 
-    export function removeKeymap(abbr: string): Action {
+    export function removeKeymap(abbr: string): RemoveKeymapAction {
         return {
             type: KeymapActions.REMOVE,
             payload: abbr
         };
     }
 
-    export function duplicateKeymap(keymap: Keymap): Action {
+    export function duplicateKeymap(keymap: Keymap): DuplicateKeymapAction {
         return {
             type: KeymapActions.DUPLICATE,
             payload: keymap
         };
     }
 
-    export function editKeymapName(abbr: string, name: string): Action {
+    export function editKeymapName(abbr: string, name: string): EditKeymapNameAction {
         return {
             type: KeymapActions.EDIT_NAME,
             payload: {
@@ -66,7 +149,7 @@ export namespace KeymapActions {
         };
     }
 
-    export function editKeymapAbbr(name: string, abbr: string, newAbbr: string): Action {
+    export function editKeymapAbbr(name: string, abbr: string, newAbbr: string): EditKeymapAbbreviationAction {
         return {
             type: KeymapActions.EDIT_ABBR,
             payload: {
@@ -77,7 +160,7 @@ export namespace KeymapActions {
         };
     }
 
-    export function saveKey(keymap: Keymap, layer: number, module: number, key: number, keyAction: KeyAction): Action {
+    export function saveKey(keymap: Keymap, layer: number, module: number, key: number, keyAction: KeyAction): SaveKeyAction {
         return {
             type: KeymapActions.SAVE_KEY,
             payload: {
@@ -90,7 +173,7 @@ export namespace KeymapActions {
         };
     }
 
-    export function checkMacro(macro: Macro): Action {
+    export function checkMacro(macro: Macro): CheckMacroAction {
         return {
             type: KeymapActions.CHECK_MACRO,
             payload: macro

packages/uhk-web/src/app/store/actions/macro.ts

@@ -1,5 +1,7 @@
 import { Action } from '@ngrx/store';
-import { Macro, MacroAction } from 'uhk-common';
+import { Macro, MacroAction as ConfigItemMacroAction } from 'uhk-common';
+
+export type MacroAction = Action & { payload?: any };
 
 export namespace MacroActions {
     export const PREFIX = '[Macro] ';
@@ -14,27 +16,27 @@ export namespace MacroActions {
     export const DELETE_ACTION = MacroActions.PREFIX + 'Delete macro action';
     export const REORDER_ACTION = MacroActions.PREFIX + 'Reorder macro action';
 
-    export function addMacro(): Action {
+    export function addMacro(): MacroAction {
         return {
             type: MacroActions.ADD
         };
     }
 
-    export function removeMacro(macroId: number): Action {
+    export function removeMacro(macroId: number): MacroAction {
         return {
             type: MacroActions.REMOVE,
             payload: macroId
         };
     }
 
-    export function duplicateMacro(macro: Macro): Action {
+    export function duplicateMacro(macro: Macro): MacroAction {
         return {
             type: MacroActions.DUPLICATE,
             payload: macro
         };
     }
 
-    export function editMacroName(id: number, name: string): Action {
+    export function editMacroName(id: number, name: string): MacroAction {
         return {
             type: MacroActions.EDIT_NAME,
             payload: {
@@ -44,7 +46,7 @@ export namespace MacroActions {
         };
     }
 
-    export function addMacroAction(id: number, action: MacroAction): Action {
+    export function addMacroAction(id: number, action: ConfigItemMacroAction): MacroAction {
         return {
             type: MacroActions.ADD_ACTION,
             payload: {
@@ -54,7 +56,7 @@ export namespace MacroActions {
         };
     }
 
-    export function saveMacroAction(id: number, index: number, action: MacroAction): Action {
+    export function saveMacroAction(id: number, index: number, action: ConfigItemMacroAction): MacroAction {
         return {
             type: MacroActions.SAVE_ACTION,
             payload: {
@@ -65,7 +67,7 @@ export namespace MacroActions {
         };
     }
 
-    export function deleteMacroAction(id: number, index: number, action: MacroAction): Action {
+    export function deleteMacroAction(id: number, index: number, action: ConfigItemMacroAction): MacroAction {
         return {
             type: MacroActions.DELETE_ACTION,
             payload: {
@@ -76,7 +78,7 @@ export namespace MacroActions {
         };
     }
 
-    export function reorderMacroAction(id: number, oldIndex: number, newIndex: number): Action {
+    export function reorderMacroAction(id: number, oldIndex: number, newIndex: number): MacroAction {
         return {
             type: MacroActions.REORDER_ACTION,
             payload: {

packages/uhk-web/src/app/store/effects/index.ts

@@ -1,5 +1,21 @@
+import { DeviceEffects } from './device';
+import { AutoUpdateSettingsEffects } from './auto-update-settings';
+import { MacroEffects } from './macro';
+import { KeymapEffects } from './keymap';
+import { UserConfigEffects } from './user-config';
+import { ApplicationEffects } from './app';
+
 export * from './keymap';
 export * from './macro';
 export * from './user-config';
 export * from './auto-update-settings';
 export * from './app';
+
+export const effects = [
+    ApplicationEffects,
+    UserConfigEffects,
+    KeymapEffects,
+    MacroEffects,
+    AutoUpdateSettingsEffects,
+    DeviceEffects
+];

packages/uhk-web/src/app/store/effects/keymap.ts

@@ -54,7 +54,7 @@ export class KeymapEffects {
     @Effect({ dispatch: false }) editAbbr$: any = this.actions$
         .ofType(KeymapActions.EDIT_ABBR)
         .withLatestFrom(this.store)
-        .do(([action, store]) => {
+        .do(([action, store]: [KeymapActions.EditKeymapAbbreviationAction, AppState]) => {
             for (const keymap of store.userConfiguration.keymaps) {
                 if (keymap.name === action.payload.name && keymap.abbreviation === action.payload.newAbbr) {
                     this.router.navigate(['/keymap', action.payload.newAbbr]);

packages/uhk-web/src/app/store/effects/macro.ts

@@ -16,7 +16,7 @@ export class MacroEffects {
 
     @Effect({ dispatch: false }) remove$: any = this.actions$
         .ofType(MacroActions.REMOVE)
-        .map(action => this.store.dispatch(KeymapActions.checkMacro(action.payload)))
+        .do<any>(action => this.store.dispatch(KeymapActions.checkMacro(action.payload)))
         .withLatestFrom(this.store)
         .map(([action, state]) => state.userConfiguration.macros)
         .do(macros => {

packages/uhk-web/src/app/store/effects/user-config.ts

@@ -1,7 +1,8 @@
 import { Injectable } from '@angular/core';
-import { go } from '@ngrx/router-store';
+import { Router } from '@angular/router';
 import { Actions, Effect, toPayload } from '@ngrx/effects';
 import { Observable } from 'rxjs/Observable';
+import { defer } from 'rxjs/observable/defer';
 import { Action, Store } from '@ngrx/store';
 import { saveAs } from 'file-saver';
 
@@ -23,7 +24,6 @@ import {
 
 import {
     ActionTypes,
-    LoadUserConfigAction,
     LoadUserConfigSuccessAction,
     SaveUserConfigSuccessAction
 } from '../actions/user-config';
@@ -31,12 +31,11 @@ import {
 import { DataStorageRepositoryService } from '../../services/datastorage-repository.service';
 import { DefaultUserConfigurationService } from '../../services/default-user-configuration.service';
 import { AppState, getPrevUserConfiguration, getUserConfiguration } from '../index';
-import { KeymapActions } from '../actions/keymap';
-import { MacroActions } from '../actions/macro';
-import { UndoUserConfigData } from '../../models/undo-user-config-data';
+import { KeymapAction, KeymapActions, MacroAction, MacroActions } from '../actions';
 import { ShowNotificationAction, DismissUndoNotificationAction, LoadHardwareConfigurationSuccessAction } from '../actions/app';
 import { ShowSaveToKeyboardButtonAction } from '../actions/device';
 import { DeviceRendererService } from '../../services/device-renderer.service';
+import { UndoUserConfigData } from '../../models/undo-user-config-data';
 
 @Injectable()
 export class UserConfigEffects {
@@ -64,17 +63,17 @@ export class UserConfigEffects {
         return null;
     }
 
-    @Effect() loadUserConfig$: Observable<Action> = this.actions$
-        .ofType(ActionTypes.LOAD_USER_CONFIG)
-        .startWith(new LoadUserConfigAction())
-        .switchMap(() => Observable.of(new LoadUserConfigSuccessAction(this.getUserConfiguration())));
+    @Effect() loadUserConfig$: Observable<Action> = defer(() => {
+        return Observable.of(new LoadUserConfigSuccessAction(this.getUserConfiguration()));
+    });
 
-    @Effect() saveUserConfig$: Observable<Action> = this.actions$
+    @Effect() saveUserConfig$: Observable<Action> = (this.actions$
         .ofType(
             KeymapActions.ADD, KeymapActions.DUPLICATE, KeymapActions.EDIT_NAME, KeymapActions.EDIT_ABBR,
             KeymapActions.SET_DEFAULT, KeymapActions.REMOVE, KeymapActions.SAVE_KEY,
             MacroActions.ADD, MacroActions.DUPLICATE, MacroActions.EDIT_NAME, MacroActions.REMOVE, MacroActions.ADD_ACTION,
-            MacroActions.SAVE_ACTION, MacroActions.DELETE_ACTION, MacroActions.REORDER_ACTION)
+            MacroActions.SAVE_ACTION, MacroActions.DELETE_ACTION, MacroActions.REORDER_ACTION) as
+        Observable<KeymapAction | MacroAction>)
         .withLatestFrom(this.store.select(getUserConfiguration), this.store.select(getPrevUserConfiguration))
         .mergeMap(([action, config, prevUserConfiguration]) => {
             this.dataStorageRepository.saveConfig(config);
@@ -114,7 +113,8 @@ export class UserConfigEffects {
         .mergeMap((payload: UndoUserConfigData) => {
             const config = new UserConfiguration().fromJsonObject(payload.config);
             this.dataStorageRepository.saveConfig(config);
-            return [new LoadUserConfigSuccessAction(config), go(payload.path)];
+            this.router.navigate([payload.path]);
+            return [new LoadUserConfigSuccessAction(config)];
         });
 
     @Effect({dispatch: false}) loadConfigFromDevice$ = this.actions$
@@ -173,7 +173,8 @@ export class UserConfigEffects {
                 private store: Store<AppState>,
                 private defaultUserConfigurationService: DefaultUserConfigurationService,
                 private deviceRendererService: DeviceRendererService,
-                private logService: LogService) {
+                private logService: LogService,
+                private router: Router) {
     }
 
     private getUserConfiguration() {
@@ -193,5 +194,4 @@ export class UserConfigEffects {
         return config;
 
     }
-
 }

packages/uhk-web/src/app/store/index.ts

@@ -1,22 +1,22 @@
 import { createSelector } from 'reselect';
-import { compose } from '@ngrx/core/compose';
-import { ActionReducer, combineReducers } from '@ngrx/store';
-import { RouterState, routerReducer } from '@ngrx/router-store';
+import { MetaReducer } from '@ngrx/store';
+import { RouterReducerState } from '@ngrx/router-store';
 import { storeFreeze } from 'ngrx-store-freeze';
 import { Keymap, UserConfiguration } from 'uhk-common';
 
-import userConfigurationReducer from './reducers/user-configuration';
-import presetReducer from './reducers/preset';
+import * as fromUserConfig from './reducers/user-configuration';
+import * as fromPreset from './reducers/preset';
 import * as fromAppUpdate from './reducers/app-update.reducer';
 import * as autoUpdateSettings from './reducers/auto-update-settings';
 import * as fromApp from './reducers/app.reducer';
 import * as fromDevice from './reducers/device';
 import { initProgressButtonState } from './reducers/progress-button-state';
+import { environment } from '../../environments/environment';
+import { RouterStateUrl } from './router-util';
 
 export const reducers = {
-    userConfiguration: userConfigurationReducer,
-    presetKeymaps: presetReducer,
-    router: routerReducer,
+    userConfiguration: fromUserConfig.reducer,
+    presetKeymaps: fromPreset.reducer,
     autoUpdateSettings: autoUpdateSettings.reducer,
     app: fromApp.reducer,
     appUpdate: fromAppUpdate.reducer,
@@ -29,21 +29,14 @@ export interface AppState {
     presetKeymaps: Keymap[];
     autoUpdateSettings: autoUpdateSettings.State;
     app: fromApp.State;
-    router: RouterState;
+    router: RouterReducerState<RouterStateUrl>;
     appUpdate: fromAppUpdate.State;
     device: fromDevice.State;
 }
 
-const developmentReducer: ActionReducer<AppState> = compose(storeFreeze, combineReducers)(reducers);
-const productionReducer: ActionReducer<AppState> = combineReducers(reducers);
-
-export function reducer(state: any, action: any) {
-    // if (isDev) {
-    // return developmentReducer(state, action);
-    // } else {
-    return productionReducer(state, action);
-    // }
-}
+export const metaReducers: MetaReducer<AppState>[] = environment.production
+    ? []
+    : [storeFreeze];
 
 export const getUserConfiguration = (state: AppState) => state.userConfiguration;
 

packages/uhk-web/src/app/store/reducers/app-update.reducer.ts

@@ -6,7 +6,7 @@ export interface State {
     doNotUpdateApp: boolean;
 }
 
-const initialState: State = {
+export const initialState: State = {
     updateAvailable: false,
     updateDownloaded: false,
     doNotUpdateApp: false

packages/uhk-web/src/app/store/reducers/app.reducer.ts

@@ -1,4 +1,4 @@
-import { routerActions } from '@ngrx/router-store';
+import { ROUTER_NAVIGATION } from '@ngrx/router-store';
 import { Action } from '@ngrx/store';
 
 import { HardwareConfiguration, runInElectron, Notification, NotificationType, UserConfiguration } from 'uhk-common';
@@ -17,7 +17,7 @@ export interface State {
     hardwareConfig?: HardwareConfiguration;
 }
 
-const initialState: State = {
+export const initialState: State = {
     started: false,
     showAddonMenu: false,
     navigationCountAfterNotification: 0,
@@ -25,7 +25,7 @@ const initialState: State = {
     configLoading: true
 };
 
-export function reducer(state = initialState, action: Action) {
+export function reducer(state = initialState, action: Action & { payload: any }) {
     switch (action.type) {
         case ActionTypes.APP_STARTED: {
             return {
@@ -56,8 +56,8 @@ export function reducer(state = initialState, action: Action) {
         // Required to dismiss the undoNotification dialog, when user navigate in the app.
         // When deleted a keymap or macro the app automaticaly navigate to other keymap, or macro, so
         // so we have to count the navigations and when reach the 2nd then remove the dialog.
-        case routerActions.UPDATE_LOCATION: {
-            const newState = {...state};
+        case ROUTER_NAVIGATION: {
+            const newState = { ...state };
             newState.navigationCountAfterNotification++;
 
             if (newState.navigationCountAfterNotification > 1) {

packages/uhk-web/src/app/store/reducers/auto-update-settings.ts

@@ -13,7 +13,7 @@ export const initialState: State = {
     checkingForUpdate: false
 };
 
-export function reducer(state = initialState, action: Action): State {
+export function reducer(state = initialState, action: Action & { payload?: any}): State {
     switch (action.type) {
         case ActionTypes.TOGGLE_CHECK_FOR_UPDATE_ON_STARTUP: {
             return Object.assign({}, state, { checkForUpdateOnStartUp: action.payload });

packages/uhk-web/src/app/store/reducers/device.ts

@@ -1,6 +1,9 @@
 import { Action } from '@ngrx/store';
 
-import { ActionTypes, HideSaveToKeyboardButton, SaveConfigurationAction } from '../actions/device';
+import {
+    ActionTypes, ConnectionStateChangedAction, HideSaveToKeyboardButton, PermissionStateChangedAction,
+    SaveConfigurationAction
+} from '../actions/device';
 import { initProgressButtonState, ProgressButtonState } from './progress-button-state';
 
 export interface State {
@@ -9,7 +12,7 @@ export interface State {
     saveToKeyboard: ProgressButtonState;
 }
 
-const initialState: State = {
+export const initialState: State = {
     connected: true,
     hasPermission: true,
     saveToKeyboard: initProgressButtonState
@@ -20,13 +23,13 @@ export function reducer(state = initialState, action: Action) {
         case ActionTypes.CONNECTION_STATE_CHANGED:
             return {
                 ...state,
-                connected: action.payload
+                connected: (<ConnectionStateChangedAction>action).payload
             };
 
         case ActionTypes.PERMISSION_STATE_CHANGED:
             return {
                 ...state,
-                hasPermission: action.payload
+                hasPermission: (<PermissionStateChangedAction>action).payload
             };
 
         case ActionTypes.SAVING_CONFIGURATION: {

packages/uhk-web/src/app/store/reducers/preset.ts

@@ -1,11 +1,10 @@
-import { Action } from '@ngrx/store';
 import { Keymap } from 'uhk-common';
 
-import { KeymapActions } from '../actions/keymap';
+import { KeymapAction, KeymapActions } from '../actions';
 
-const initialState: Keymap[] = [];
+export const initialState: Keymap[] = [];
 
-export default function(state = initialState, action: Action): Keymap[] {
+export function reducer(state = initialState, action: KeymapAction): Keymap[] {
     switch (action.type) {
         case KeymapActions.LOAD_KEYMAPS_SUCCESS: {
             return action.payload;

packages/uhk-web/src/app/store/reducers/user-configuration.ts

@@ -1,4 +1,3 @@
-import '@ngrx/core/add/operator/select';
 import { Action } from '@ngrx/store';
 
 import { Observable } from 'rxjs/Observable';
@@ -10,9 +9,9 @@ import { KeymapActions, MacroActions } from '../actions';
 import { AppState } from '../index';
 import { ActionTypes } from '../actions/user-config';
 
-const initialState: UserConfiguration = new UserConfiguration();
+export const initialState: UserConfiguration = new UserConfiguration();
 
-export default function (state = initialState, action: Action): UserConfiguration {
+export function reducer(state = initialState, action: Action & { payload?: any }): UserConfiguration {
     const changedUserConfiguration: UserConfiguration = Object.assign(new UserConfiguration(), state);
 
     switch (action.type) {
@@ -240,12 +239,12 @@ export default function (state = initialState, action: Action): UserConfiguratio
 
 export function getUserConfiguration(): (state$: Observable<AppState>) => Observable<UserConfiguration> {
     return (state$: Observable<AppState>) => state$
-        .select(state => state.userConfiguration);
+        .map(state => state.userConfiguration);
 }
 
 export function getKeymaps(): (state$: Observable<AppState>) => Observable<Keymap[]> {
     return (state$: Observable<AppState>) => state$
-        .select(state => state.userConfiguration.keymaps);
+        .map(state => state.userConfiguration.keymaps);
 }
 
 export function getKeymap(abbr: string) {
@@ -268,7 +267,7 @@ export function getDefaultKeymap() {
 
 export function getMacros(): (state$: Observable<AppState>) => Observable<Macro[]> {
     return (state$: Observable<AppState>) => state$
-        .select(state => state.userConfiguration.macros);
+        .map(state => state.userConfiguration.macros);
 }
 
 export function getMacro(id: number) {

packages/uhk-web/src/app/store/router-util.ts

@@ -0,0 +1,26 @@
+import { RouterStateSerializer } from '@ngrx/router-store';
+import { RouterStateSnapshot, Params } from '@angular/router';
+
+/**
+ * The RouterStateSerializer takes the current RouterStateSnapshot
+ * and returns any pertinent information needed. The snapshot contains
+ * all information about the state of the router at the given point in time.
+ * The entire snapshot is complex and not always needed. In this case, you only
+ * need the URL and query parameters from the snapshot in the store. Other items could be
+ * returned such as route parameters and static route data.
+ */
+
+export interface RouterStateUrl {
+    url: string;
+    queryParams: Params;
+}
+
+export class CustomRouterStateSerializer
+    implements RouterStateSerializer<RouterStateUrl> {
+    serialize(routerState: RouterStateSnapshot): RouterStateUrl {
+        const { url } = routerState;
+        const queryParams = routerState.root.queryParams;
+
+        return { url, queryParams };
+    }
+}

packages/uhk-web/src/app/web.module.ts

@@ -1,212 +1,25 @@
 import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { NotifierModule } from 'angular-notifier';
-
 import { EffectsModule } from '@ngrx/effects';
+
+import { SharedModule } from './shared.module';
+import { MainAppComponent } from './app.component';
+import { reducers } from './store';
+import { StoreRouterConnectingModule } from '@ngrx/router-store';
 import { StoreModule } from '@ngrx/store';
 import { StoreDevtoolsModule } from '@ngrx/store-devtools';
-import { RouterStoreModule } from '@ngrx/router-store';
-
-import { DragulaModule } from 'ng2-dragula/ng2-dragula';
-import { Select2Module } from 'ng2-select2/ng2-select2';
-
-import { MainAppComponent } from './app.component';
-import { AddOnComponent } from './components/add-on';
-import { KeyboardSliderComponent } from './components/keyboard/slider';
-import { DeviceSettingsComponent } from './components/device';
-import { KeymapAddComponent, KeymapEditComponent, KeymapHeaderComponent } from './components/keymap';
-import { LayersComponent } from './components/layers';
-import {
-    MacroActionEditorComponent,
-    MacroDelayTabComponent,
-    MacroEditComponent,
-    MacroHeaderComponent,
-    MacroItemComponent,
-    MacroKeyTabComponent,
-    MacroListComponent,
-    MacroMouseTabComponent,
-    MacroNotFoundComponent,
-    MacroTextTabComponent
-} from './components/macro';
-import { NotificationComponent } from './components/notification';
-import { PopoverComponent } from './components/popover';
-import {
-    KeymapTabComponent,
-    KeypressTabComponent,
-    LayerTabComponent,
-    MacroTabComponent,
-    MouseTabComponent,
-    NoneTabComponent
-} from './components/popover/tab';
-import { CaptureKeystrokeButtonComponent } from './components/popover/widgets/capture-keystroke';
-import { IconComponent } from './components/popover/widgets/icon';
-import { SettingsComponent } from './components/settings';
-import { SideMenuComponent } from './components/side-menu';
-import { SvgKeyboardComponent } from './components/svg/keyboard';
-import {
-    SvgIconTextKeyComponent,
-    SvgKeyboardKeyComponent,
-    SvgKeystrokeKeyComponent,
-    SvgMouseClickKeyComponent,
-    SvgMouseKeyComponent,
-    SvgMouseMoveKeyComponent,
-    SvgMouseScrollKeyComponent,
-    SvgMouseSpeedKeyComponent,
-    SvgOneLineTextKeyComponent,
-    SvgSingleIconKeyComponent,
-    SvgSwitchKeymapKeyComponent,
-    SvgTextIconKeyComponent,
-    SvgTwoLineTextKeyComponent
-} from './components/svg/keys';
-import { SvgModuleComponent } from './components/svg/module';
-import { SvgKeyboardWrapComponent } from './components/svg/wrap';
-import { appRoutingProviders, routing } from './app.routes';
-
-import { CancelableDirective, TooltipDirective } from './directives';
-import { SafeStylePipe } from './pipes';
-
-import { CaptureService } from './services/capture.service';
-import { MapperService } from './services/mapper.service';
-import { SvgModuleProviderService } from './services/svg-module-provider.service';
-
-import {
-    ApplicationEffects,
-    AutoUpdateSettingsEffects,
-    KeymapEffects,
-    MacroEffects,
-    UserConfigEffects
-} from './store/effects';
-
-import { KeymapEditGuard } from './components/keymap/edit';
-import { MacroNotFoundGuard } from './components/macro/not-found';
-import { DataStorageRepositoryService } from './services/datastorage-repository.service';
-import { DefaultUserConfigurationService } from './services/default-user-configuration.service';
-import { reducer } from './store';
-import { LogService } from 'uhk-common';
-import { AutoUpdateSettings } from './components/auto-update-settings/auto-update-settings';
-import { angularNotifierConfig } from './models/angular-notifier-config';
-import { UndoableNotifierComponent } from './components/undoable-notifier';
-import { UhkHeader } from './components/uhk-header/uhk-header';
-import { UpdateAvailableComponent } from './components/update-available/update-available.component';
-import { UhkMessageComponent } from './components/uhk-message/uhk-message.component';
-import { AppRendererService } from './services/app-renderer.service';
-import { AppUpdateRendererService } from './services/app-update-renderer.service';
-import { IpcCommonRenderer } from './services/ipc-common-renderer';
-import { MissingDeviceComponent } from './components/missing-device/missing-device.component';
-import { PrivilegeCheckerComponent } from './components/privilege-checker/privilege-checker.component';
-import { UhkDeviceConnectedGuard } from './services/uhk-device-connected.guard';
-import { UhkDeviceDisconnectedGuard } from './services/uhk-device-disconnected.guard';
-import { UhkDeviceUninitializedGuard } from './services/uhk-device-uninitialized.guard';
-import { MainPage } from './pages/main-page/main.page';
-import { DeviceEffects } from './store/effects/device';
-import { DeviceRendererService } from './services/device-renderer.service';
-import { UhkDeviceInitializedGuard } from './services/uhk-device-initialized.guard';
-import { ProgressButtonComponent } from './components/progress-button/progress-button.component';
+import { effects } from './store/effects';
 
 @NgModule({
-    declarations: [
-        MainAppComponent,
-        DeviceSettingsComponent,
-        KeymapEditComponent,
-        KeymapHeaderComponent,
-        NotificationComponent,
-        SvgIconTextKeyComponent,
-        SvgKeyboardKeyComponent,
-        SvgKeystrokeKeyComponent,
-        SvgMouseKeyComponent,
-        SvgMouseClickKeyComponent,
-        SvgMouseMoveKeyComponent,
-        SvgMouseScrollKeyComponent,
-        SvgMouseSpeedKeyComponent,
-        SvgOneLineTextKeyComponent,
-        SvgSingleIconKeyComponent,
-        SvgSwitchKeymapKeyComponent,
-        SvgTextIconKeyComponent,
-        SvgTwoLineTextKeyComponent,
-        SvgKeyboardKeyComponent,
-        SvgKeyboardWrapComponent,
-        SvgKeyboardComponent,
-        SvgModuleComponent,
-        LayersComponent,
-        PopoverComponent,
-        KeymapAddComponent,
-        SideMenuComponent,
-        KeypressTabComponent,
-        KeymapTabComponent,
-        LayerTabComponent,
-        MacroTabComponent,
-        MouseTabComponent,
-        NoneTabComponent,
-        CaptureKeystrokeButtonComponent,
-        IconComponent,
-        MacroEditComponent,
-        MacroListComponent,
-        MacroHeaderComponent,
-        MacroItemComponent,
-        MacroActionEditorComponent,
-        MacroDelayTabComponent,
-        MacroKeyTabComponent,
-        MacroMouseTabComponent,
-        MacroTextTabComponent,
-        MacroNotFoundComponent,
-        AddOnComponent,
-        SettingsComponent,
-        KeyboardSliderComponent,
-        CancelableDirective,
-        TooltipDirective,
-        SafeStylePipe,
-        AutoUpdateSettings,
-        UndoableNotifierComponent,
-        UhkHeader,
-        UpdateAvailableComponent,
-        UhkMessageComponent,
-        MissingDeviceComponent,
-        PrivilegeCheckerComponent,
-        MainPage,
-        ProgressButtonComponent
-    ],
     imports: [
         BrowserModule,
-        BrowserAnimationsModule,
-        FormsModule,
-        DragulaModule,
-        routing,
-        Select2Module,
-        StoreModule.provideStore(reducer),
-        RouterStoreModule.connectRouter(),
-        StoreDevtoolsModule.instrumentOnlyWithExtension(),
-        NotifierModule.withConfig(angularNotifierConfig),
-        EffectsModule.runAfterBootstrap(KeymapEffects),
-        EffectsModule.runAfterBootstrap(MacroEffects),
-        EffectsModule.runAfterBootstrap(UserConfigEffects),
-        EffectsModule.run(AutoUpdateSettingsEffects),
-        EffectsModule.run(ApplicationEffects),
-        EffectsModule.run(DeviceEffects)
-    ],
-    providers: [
-        SvgModuleProviderService,
-        MapperService,
-        appRoutingProviders,
-        KeymapEditGuard,
-        MacroNotFoundGuard,
-        CaptureService,
-        DataStorageRepositoryService,
-        DefaultUserConfigurationService,
-        LogService,
-        DefaultUserConfigurationService,
-        AppUpdateRendererService,
-        AppRendererService,
-        IpcCommonRenderer,
-        DeviceRendererService,
-        UhkDeviceConnectedGuard,
-        UhkDeviceDisconnectedGuard,
-        UhkDeviceInitializedGuard,
-        UhkDeviceUninitializedGuard
-    ],
-    exports: [
-        UhkMessageComponent
+        SharedModule,
+        StoreModule.forRoot(reducers),
+        StoreRouterConnectingModule,
+        StoreDevtoolsModule.instrument({
+            maxAge: 10
+        }),
+        EffectsModule.forRoot(effects)
     ],
     bootstrap: [MainAppComponent]
 })

packages/uhk-web/src/renderer/uhk-renderer.module.ts

@@ -1,29 +1,41 @@
 import { ErrorHandler, NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { BrowserModule } from '@angular/platform-browser';
 import { LogService } from 'uhk-common';
 import { ElectronDataStorageRepositoryService } from './services/electron-datastorage-repository.service';
 import { ElectronLogService } from './services/electron-log.service';
 import { ElectronErrorHandlerService } from './services/electron-error-handler.service';
-import { WebModule } from '../app/web.module';
 import { routing } from '../app/app.routes';
 import { MainAppComponent } from '../app/app.component';
 import { IpcUhkRenderer } from './services/ipc-uhk-renderer';
 import { IpcCommonRenderer } from '../app/services/ipc-common-renderer';
 import { DataStorageRepositoryService } from '../app/services/datastorage-repository.service';
+import { SharedModule } from '../app/shared.module';
+import { reducers } from '../app/store';
+import { EffectsModule } from '@ngrx/effects';
+import { StoreRouterConnectingModule } from '@ngrx/router-store';
+import { StoreModule } from '@ngrx/store';
+import { StoreDevtoolsModule } from '@ngrx/store-devtools';
+import { effects } from '../app/store/effects';
 
 @NgModule({
-  imports: [
-    CommonModule,
-    WebModule,
-    routing
-  ],
-  providers: [
-    { provide: DataStorageRepositoryService, useClass: ElectronDataStorageRepositoryService },
-    { provide: IpcCommonRenderer, useClass: IpcUhkRenderer },
-    { provide: LogService, useClass: ElectronLogService },
-    { provide: ErrorHandler, useClass: ElectronErrorHandlerService }
-  ],
-  bootstrap: [MainAppComponent]
+    imports: [
+        BrowserModule,
+        SharedModule,
+        routing,
+        StoreModule.forRoot(reducers),
+        StoreRouterConnectingModule,
+        StoreDevtoolsModule.instrument({
+            maxAge: 10
+        }),
+        EffectsModule.forRoot(effects)
+    ],
+    providers: [
+        {provide: DataStorageRepositoryService, useClass: ElectronDataStorageRepositoryService},
+        {provide: IpcCommonRenderer, useClass: IpcUhkRenderer},
+        {provide: LogService, useClass: ElectronLogService},
+        {provide: ErrorHandler, useClass: ElectronErrorHandlerService}
+    ],
+    bootstrap: [MainAppComponent]
 })
 export class UhkRendererModule {
 }