refactor: ngrx-store use enum ActionTypes and Action classes everywhere (#919)

packages/uhk-web/src/app/components/device/mouse-speed/mouse-speed.component.ts

@@ -2,7 +2,6 @@ import { Component, OnInit, OnDestroy } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { AppState, getUserConfiguration } from '../../../store';
 import { SetUserConfigurationValueAction } from '../../../store/actions/user-config';
-import { DefaultUserConfigurationService } from '../../../services/default-user-configuration.service';
 import { SliderPips, SliderProps } from '../../slider-wrapper/slider-wrapper.component';
 import { Subscription } from 'rxjs/Subscription';
 import { UserConfiguration } from 'uhk-common';
@@ -117,7 +116,8 @@ export class MouseSpeedComponent implements OnInit, OnDestroy {
     private userConfig$: Store<UserConfiguration>;
     private userConfigSubscription: Subscription;
 
-    constructor(private store: Store<AppState>, private defaultUserConfigurationService: DefaultUserConfigurationService) {}
+    constructor(private store: Store<AppState>) {
+    }
 
     ngOnInit(): void {
         this.userConfig$ = this.store.select(getUserConfiguration);
@@ -132,7 +132,9 @@ export class MouseSpeedComponent implements OnInit, OnDestroy {
     }
 
     ngOnDestroy(): void {
-        this.userConfigSubscription.unsubscribe();
+        if (this.userConfigSubscription) {
+            this.userConfigSubscription.unsubscribe();
+        }
     }
 
     onSetPropertyValue(propertyName: string, value: number): void {
@@ -143,6 +145,6 @@ export class MouseSpeedComponent implements OnInit, OnDestroy {
     }
 
     resetToDefault() {
-       this.store.dispatch(new ResetMouseSpeedSettingsAction());
+        this.store.dispatch(new ResetMouseSpeedSettingsAction());
     }
 }

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

@@ -2,12 +2,11 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { Keymap } from 'uhk-common';
 
-import { BehaviorSubject } from 'rxjs/BehaviorSubject';
-import { Observable } from 'rxjs/Observable';
+import { BehaviorSubject, Observable } from 'rxjs';
 import { combineLatest, publishReplay, refCount } from 'rxjs/operators';
 
 import { AppState } from '../../../store';
-import { KeymapActions } from '../../../store/actions';
+import { AddKeymapAction } from '../../../store/actions/keymap';
 
 @Component({
     selector: 'keymap-add',
@@ -42,6 +41,6 @@ export class KeymapAddComponent {
     }
 
     addKeymap(keymap: Keymap) {
-        this.store.dispatch(KeymapActions.addKeymap(keymap));
+        this.store.dispatch(new AddKeymapAction(keymap));
     }
 }

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

@@ -2,16 +2,13 @@ import { Injectable } from '@angular/core';
 import { CanActivate, Router } from '@angular/router';
 import { Keymap } from 'uhk-common';
 
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 import { of } from 'rxjs/observable/of';
 import { switchMap, tap } from 'rxjs/operators';
 
-import 'rxjs/add/operator/let';
-
 import { Store } from '@ngrx/store';
 
-import { AppState } from '../../../store';
-import { getKeymaps } from '../../../store/reducers/user-configuration';
+import { AppState, getDefaultKeymap } from '../../../store';
 
 @Injectable()
 export class KeymapEditGuard implements CanActivate {
@@ -20,10 +17,9 @@ export class KeymapEditGuard implements CanActivate {
 
     canActivate(): Observable<boolean> {
         return this.store
-            .let(getKeymaps())
+            .select(getDefaultKeymap)
             .pipe(
-                tap((keymaps: Keymap[]) => {
-                    const defaultKeymap = keymaps.find(keymap => keymap.isDefault);
+                tap((defaultKeymap: Keymap) => {
                     if (defaultKeymap) {
                         this.router.navigate(['/keymap', defaultKeymap.abbreviation]);
                     }

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

@@ -1,18 +1,23 @@
-import { ChangeDetectionStrategy, Component, HostListener } from '@angular/core';
+import { ChangeDetectionStrategy, Component, HostListener, OnDestroy } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { Store } from '@ngrx/store';
 import { Keymap } from 'uhk-common';
 
-import { Observable } from 'rxjs/Observable';
-import { combineLatest, first, map, pluck, publishReplay, refCount, switchMap } from 'rxjs/operators';
-import 'rxjs/add/operator/let';
+import { Observable, Subscription } from 'rxjs';
+import { combineLatest, first, map, pluck, switchMap } from 'rxjs/operators';
 
 import { saveAs } from 'file-saver';
 
-import { layerDoubleTapSupported, AppState, getKeyboardLayout } from '../../../store';
-import { getKeymap, getKeymaps, getUserConfiguration } from '../../../store/reducers/user-configuration';
+import {
+    getUserConfiguration,
+    getSelectedKeymap,
+    isKeymapDeletable,
+    layerDoubleTapSupported,
+    AppState,
+    getKeyboardLayout
+} from '../../../store';
 import { KeyboardLayout } from '../../../keyboard/keyboard-layout.enum';
-import { KeymapActions } from '../../../store/actions';
+import { EditDescriptionAction, SelectKeymapAction } from '../../../store/actions/keymap';
 import { ChangeKeymapDescription } from '../../../models/ChangeKeymapDescription';
 
 @Component({
@@ -24,7 +29,7 @@ import { ChangeKeymapDescription } from '../../../models/ChangeKeymapDescription
         'class': 'container-fluid'
     }
 })
-export class KeymapEditComponent {
+export class KeymapEditComponent implements OnDestroy {
 
     keyboardSplit: boolean;
 
@@ -33,26 +38,29 @@ export class KeymapEditComponent {
     keyboardLayout$: Observable<KeyboardLayout>;
     allowLayerDoubleTap$: Observable<boolean>;
 
+    private routeSubscription: Subscription;
+
     constructor(protected store: Store<AppState>,
                 route: ActivatedRoute) {
-        this.keymap$ = route
+        this.routeSubscription = route
             .params
             .pipe(
-                pluck<{}, string>('abbr'),
-                switchMap((abbr: string) => store.let(getKeymap(abbr))),
-                publishReplay(1),
-                refCount()
-            );
+                pluck<{}, string>('abbr')
+            )
+            .subscribe(abbr => store.dispatch(new SelectKeymapAction(abbr)));
 
-        this.deletable$ = store.let(getKeymaps())
-            .pipe(
-                map((keymaps: Keymap[]) => keymaps.length > 1)
-            );
+        this.keymap$ = store.select(getSelectedKeymap);
+
+        this.deletable$ = store.select(isKeymapDeletable);
 
         this.keyboardLayout$ = store.select(getKeyboardLayout);
         this.allowLayerDoubleTap$ = store.select(layerDoubleTapSupported);
     }
 
+    ngOnDestroy(): void {
+        this.routeSubscription.unsubscribe();
+    }
+
     downloadKeymap() {
         const exportableJSON$: Observable<string> = this.keymap$
             .pipe(
@@ -79,12 +87,12 @@ export class KeymapEditComponent {
     }
 
     descriptionChanged(event: ChangeKeymapDescription): void {
-        this.store.dispatch(new KeymapActions.EditDescriptionAction(event));
+        this.store.dispatch(new EditDescriptionAction(event));
     }
 
     private toExportableJSON(keymap: Keymap): Observable<any> {
         return this.store
-            .let(getUserConfiguration())
+            .select(getUserConfiguration)
             .pipe(
                 first(),
                 map(userConfiguration => {

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

@@ -16,7 +16,13 @@ import { Keymap } from 'uhk-common';
 import { Store } from '@ngrx/store';
 
 import { AppState } from '../../../store';
-import { KeymapActions } from '../../../store/actions';
+import {
+    DuplicateKeymapAction,
+    EditKeymapAbbreviationAction,
+    EditKeymapNameAction,
+    RemoveKeymapAction,
+    SetDefaultKeymapAction
+} from '../../../store/actions/keymap';
 import * as util from '../../../util';
 
 const DEFAULT_TRASH_TITLE = '<span class="text-nowrap">Delete keymap</span>';
@@ -59,18 +65,18 @@ export class KeymapHeaderComponent implements OnChanges {
 
     setDefault() {
         if (!this.keymap.isDefault) {
-            this.store.dispatch(KeymapActions.setDefault(this.keymap.abbreviation));
+            this.store.dispatch(new SetDefaultKeymapAction(this.keymap.abbreviation));
         }
     }
 
     removeKeymap() {
         if (this.deletable) {
-            this.store.dispatch(KeymapActions.removeKeymap(this.keymap.abbreviation));
+            this.store.dispatch(new RemoveKeymapAction(this.keymap.abbreviation));
         }
     }
 
     duplicateKeymap() {
-        this.store.dispatch(KeymapActions.duplicateKeymap(this.keymap));
+        this.store.dispatch(new DuplicateKeymapAction(this.keymap));
     }
 
     editKeymapName(name: string) {
@@ -79,7 +85,7 @@ export class KeymapHeaderComponent implements OnChanges {
             return;
         }
 
-        this.store.dispatch(KeymapActions.editKeymapName(this.keymap.abbreviation, name));
+        this.store.dispatch(new EditKeymapNameAction({ abbr: this.keymap.abbreviation, name }));
     }
 
     editKeymapAbbr(newAbbr: string) {
@@ -91,7 +97,11 @@ export class KeymapHeaderComponent implements OnChanges {
         }
 
         newAbbr = newAbbr.toUpperCase();
-        this.store.dispatch(KeymapActions.editKeymapAbbr(this.keymap.name, this.keymap.abbreviation, newAbbr));
+        this.store.dispatch(new EditKeymapAbbreviationAction({
+            name: this.keymap.name,
+            abbr: this.keymap.abbreviation,
+            newAbbr
+        }));
     }
 
     setKeymapTitle(): void {

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

@@ -3,13 +3,17 @@ import { ActivatedRoute } from '@angular/router';
 import { Store } from '@ngrx/store';
 import { Macro, MacroAction } from 'uhk-common';
 
-import { Observable } from 'rxjs/Observable';
-import { Subscription } from 'rxjs/Subscription';
-import { pluck, switchMap } from 'rxjs/operators';
+import { Observable, Subscription } from 'rxjs';
 
-import { MacroActions } from '../../../store/actions';
-import { AppState, macroPlaybackSupported } from '../../../store';
-import { getMacro } from '../../../store/reducers/user-configuration';
+import {
+    AddMacroActionAction,
+    DeleteMacroActionAction,
+    ReorderMacroActionAction,
+    SaveMacroActionAction,
+    SelectMacroAction
+} from '../../../store/actions/macro';
+import { AppState, getSelectedMacro, macroPlaybackSupported } from '../../../store';
+import { pluck } from 'rxjs/operators';
 
 @Component({
     selector: 'macro-edit',
@@ -25,18 +29,20 @@ export class MacroEditComponent implements OnDestroy {
     macroId: number;
     macroPlaybackSupported$: Observable<boolean>;
 
-    private subscription: Subscription;
+    private selectedMacroSubscription: Subscription;
+    private routeSubscription: Subscription;
 
-    constructor(private store: Store<AppState>, public route: ActivatedRoute) {
-        this.subscription = route
+    constructor(private store: Store<AppState>,
+                public route: ActivatedRoute) {
+
+        this.routeSubscription = route
             .params
             .pipe(
-                pluck<{}, string>('id'),
-                switchMap((id: string) => {
-                    this.macroId = +id;
-                    return store.let(getMacro(this.macroId));
-                })
+                pluck<{}, string>('id')
             )
+            .subscribe(id => store.dispatch(new SelectMacroAction(+id)));
+
+        this.selectedMacroSubscription = store.select(getSelectedMacro)
             .subscribe((macro: Macro) => {
                 this.macro = macro;
             });
@@ -46,22 +52,23 @@ export class MacroEditComponent implements OnDestroy {
     }
 
     ngOnDestroy() {
-        this.subscription.unsubscribe();
+        this.selectedMacroSubscription.unsubscribe();
+        this.routeSubscription.unsubscribe();
     }
 
     addAction(macroId: number, action: MacroAction) {
-        this.store.dispatch(MacroActions.addMacroAction(macroId, action));
+        this.store.dispatch(new AddMacroActionAction({ id: macroId, action }));
     }
 
     editAction(macroId: number, index: number, action: MacroAction) {
-        this.store.dispatch(MacroActions.saveMacroAction(macroId, index, action));
+        this.store.dispatch(new SaveMacroActionAction({ id: macroId, index, action }));
     }
 
     deleteAction(macroId: number, index: number, action: MacroAction) {
-        this.store.dispatch(MacroActions.deleteMacroAction(macroId, index, action));
+        this.store.dispatch(new DeleteMacroActionAction({ id: macroId, index, action }));
     }
 
     reorderAction(macroId: number, oldIndex: number, newIndex: number) {
-        this.store.dispatch(MacroActions.reorderMacroAction(macroId, oldIndex, newIndex));
+        this.store.dispatch(new ReorderMacroActionAction({ id: macroId, oldIndex, newIndex }));
     }
 }

packages/uhk-web/src/app/components/macro/header/macro-header.component.ts

@@ -13,7 +13,7 @@ import {
 import { Store } from '@ngrx/store';
 import { Macro } from 'uhk-common';
 
-import { MacroActions } from '../../../store/actions';
+import { DuplicateMacroAction, EditMacroNameAction, RemoveMacroAction } from '../../../store/actions/macro';
 import { AppState } from '../../../store';
 import * as util from '../../../util';
 
@@ -51,11 +51,11 @@ export class MacroHeaderComponent implements AfterViewInit, OnChanges {
     }
 
     removeMacro() {
-        this.store.dispatch(MacroActions.removeMacro(this.macro.id));
+        this.store.dispatch(new RemoveMacroAction(this.macro.id));
     }
 
     duplicateMacro() {
-        this.store.dispatch(MacroActions.duplicateMacro(this.macro));
+        this.store.dispatch(new DuplicateMacroAction(this.macro));
     }
 
     editMacroName(name: string) {
@@ -64,7 +64,7 @@ export class MacroHeaderComponent implements AfterViewInit, OnChanges {
             return;
         }
 
-        this.store.dispatch(MacroActions.editMacroName(this.macro.id, name));
+        this.store.dispatch(new EditMacroNameAction({ id: this.macro.id, name }));
     }
 
     calculateHeaderTextWidth(text): void {

packages/uhk-web/src/app/components/macro/not-found/macro-not-found-guard.service.ts

@@ -8,8 +8,7 @@ import 'rxjs/add/operator/let';
 
 import { Store } from '@ngrx/store';
 
-import { AppState } from '../../../store/index';
-import { getMacros } from '../../../store/reducers/user-configuration';
+import { AppState, getMacros } from '../../../store';
 
 @Injectable()
 export class MacroNotFoundGuard implements CanActivate {
@@ -18,7 +17,7 @@ export class MacroNotFoundGuard implements CanActivate {
 
     canActivate(): Observable<boolean> {
         return this.store
-            .let(getMacros())
+            .select(getMacros)
             .pipe(
                 map((macros: Macro[]) => {
                     const hasMacros = macros.length > 0;

packages/uhk-web/src/app/components/popover/popover.component.ts

@@ -31,8 +31,7 @@ import {
 
 import { Tab } from './tab';
 
-import { AppState, macroPlaybackSupported } from '../../store';
-import { getKeymaps } from '../../store/reducers/user-configuration';
+import { AppState, getKeymaps, macroPlaybackSupported } from '../../store';
 import { KeyActionRemap } from '../../models/key-action-remap';
 import { RemapInfo } from '../../models/remap-info';
 
@@ -153,7 +152,7 @@ export class PopoverComponent implements OnChanges {
     constructor(private store: Store<AppState>,
                 private cdRef: ChangeDetectorRef) {
         this.animationState = 'closed';
-        this.keymaps$ = store.let(getKeymaps())
+        this.keymaps$ = store.select(getKeymaps)
             .pipe(
                 combineLatest(this.currentKeymap$),
                 map(([keymaps, currentKeymap]: [Keymap[], Keymap]) =>

packages/uhk-web/src/app/components/popover/tab/macro/macro-tab.component.ts

@@ -5,8 +5,7 @@ import { KeyAction, Macro, PlayMacroAction } from 'uhk-common';
 
 import { Tab } from '../tab';
 
-import { AppState } from '../../../../store';
-import { getMacros } from '../../../../store/reducers/user-configuration';
+import { AppState, getMacros } from '../../../../store';
 import { SelectOptionData } from '../../../../models/select-option-data';
 
 @Component({
@@ -26,7 +25,7 @@ export class MacroTabComponent extends Tab implements OnInit, OnChanges, OnDestr
 
     constructor(store: Store<AppState>) {
         super();
-        this.subscription = store.let(getMacros())
+        this.subscription = store.select(getMacros)
             .subscribe((macros: Macro[]) => this.macros = macros);
         this.macroOptions = [];
         this.selectedMacroIndex = 0;

packages/uhk-web/src/app/components/side-menu/side-menu.component.ts

@@ -14,7 +14,7 @@ import { Store } from '@ngrx/store';
 import { Subscription } from 'rxjs/Subscription';
 
 import { AppState, getSideMenuPageState } from '../../store';
-import { MacroActions } from '../../store/actions';
+import { AddMacroAction } from '../../store/actions/macro';
 import { RenameUserConfigurationAction } from '../../store/actions/user-config';
 import { SideMenuPageState } from '../../models/side-menu-page-state';
 
@@ -92,7 +92,7 @@ export class SideMenuComponent implements OnInit, OnDestroy {
     }
 
     addMacro() {
-        this.store.dispatch(MacroActions.addMacro());
+        this.store.dispatch(new AddMacroAction());
     }
 
     editDeviceName(name: string): void {

packages/uhk-web/src/app/components/svg/keys/svg-keyboard-key/svg-keyboard-key.component.ts

@@ -26,8 +26,7 @@ import {
 import { CaptureService } from '../../../../services/capture.service';
 import { MapperService } from '../../../../services/mapper.service';
 
-import { AppState } from '../../../../store';
-import { getMacros } from '../../../../store/reducers/user-configuration';
+import { AppState, getMacros } from '../../../../store';
 import { SvgKeyCaptureEvent, SvgKeyClickEvent } from '../../../../models/svg-key-events';
 import { OperatingSystem } from '../../../../models/operating-system';
 import { KeyModifierModel } from '../../../../models/key-modifier-model';
@@ -114,7 +113,7 @@ export class SvgKeyboardKeyComponent implements OnInit, OnChanges, OnDestroy {
         private element: ElementRef,
         private captureService: CaptureService
     ) {
-        this.subscription = store.let(getMacros())
+        this.subscription = store.select(getMacros)
             .subscribe((macros: Macro[]) => this.macros = macros);
 
         this.reset();

packages/uhk-web/src/app/components/svg/wrap/svg-keyboard-wrap.component.ts

@@ -36,8 +36,8 @@ import {
 } from 'uhk-common';
 
 import { MapperService } from '../../../services/mapper.service';
-import { AppState } from '../../../store';
-import { KeymapActions } from '../../../store/actions';
+import { AppState, getKeymaps, getMacros } from '../../../store';
+import { SaveKeyAction } from '../../../store/actions/keymap';
 import { PopoverComponent } from '../../popover';
 import { KeyboardLayout } from '../../../keyboard/keyboard-layout.enum';
 import { ChangeKeymapDescription } from '../../../models/ChangeKeymapDescription';
@@ -71,7 +71,7 @@ export class SvgKeyboardWrapComponent implements OnInit, OnChanges {
 
     @Output() descriptionChanged = new EventEmitter<ChangeKeymapDescription>();
 
-    @ViewChild(PopoverComponent, {read: ElementRef}) popover: ElementRef;
+    @ViewChild(PopoverComponent, { read: ElementRef }) popover: ElementRef;
 
     popoverShown: boolean;
     keyEditConfig: { moduleId: number, keyId: number };
@@ -185,27 +185,29 @@ export class SvgKeyboardWrapComponent implements OnInit, OnChanges {
         keystrokeAction.modifierMask = mapLeftRigthModifierToKeyActionModifier(event.captured.left, event.captured.right);
 
         this.store.dispatch(
-            KeymapActions.saveKey(
-                this.keymap,
-                this.currentLayer,
-                event.moduleId,
-                event.keyId,
-                {
+            new SaveKeyAction({
+                keymap: this.keymap,
+                layer: this.currentLayer,
+                module: event.moduleId,
+                key: event.keyId,
+                keyAction: {
                     remapOnAllKeymap: event.shiftPressed,
                     remapOnAllLayer: event.altPressed,
                     action: keystrokeAction
-                })
+                }
+            })
         );
     }
 
     onRemap(keyAction: KeyActionRemap): void {
         this.store.dispatch(
-            KeymapActions.saveKey(
-                this.keymap,
-                this.currentLayer,
-                this.keyEditConfig.moduleId,
-                this.keyEditConfig.keyId,
-                keyAction)
+            new SaveKeyAction({
+                keymap: this.keymap,
+                layer: this.currentLayer,
+                module: this.keyEditConfig.moduleId,
+                key: this.keyEditConfig.keyId,
+                keyAction
+            })
         );
         this.hidePopover();
     }
@@ -318,7 +320,7 @@ export class SvgKeyboardWrapComponent implements OnInit, OnChanges {
         } else if (keyAction instanceof PlayMacroAction) {
             const playMacroAction: PlayMacroAction = keyAction;
             return this.store
-                .select(appState => appState.userConfiguration.macros)
+                .select(getMacros)
                 .pipe(
                     map(macroState => macroState.find(macro => {
                         return macro.id === playMacroAction.macroId;
@@ -340,7 +342,7 @@ export class SvgKeyboardWrapComponent implements OnInit, OnChanges {
         } else if (keyAction instanceof SwitchKeymapAction) {
             const switchKeymapAction: SwitchKeymapAction = keyAction;
             return this.store
-                .select(appState => appState.userConfiguration.keymaps)
+                .select(getKeymaps)
                 .pipe(
                     map(keymaps => keymaps.find(keymap => keymap.abbreviation === switchKeymapAction.keymapAbbreviation).name),
                     map(keymapName => {