fix(user-config): Fix user configuration savings (#433)

* test(user-config): Fix saveAs functionality

* feat(user-config): Add 2 space indent when save user-config to json file

* refactor(user-config): Move user config savings into user config effect

* build: Remove unused package

Author: ert78gb

packages/uhk-web/package-lock.json

@@ -52,7 +52,7 @@
     "dragula": "^3.7.2",
     "exports-loader": "^0.6.3",
     "file-loader": "^0.10.0",
-    "filesaver.js": "^0.2.0",
+    "file-saver": "1.3.3",
     "font-awesome": "^4.7.0",
     "html-webpack-plugin": "^2.29.0",
     "istanbul-instrumenter-loader": "^2.0.0",

packages/uhk-web/package.json

@@ -2,7 +2,6 @@ import { Component, HostListener, ViewEncapsulation } from '@angular/core';
 import { animate, style, transition, trigger } from '@angular/animations';
 import { Observable } from 'rxjs/Observable';
 import { Action, Store } from '@ngrx/store';
-import { UhkBuffer } from 'uhk-common';
 
 import 'rxjs/add/operator/last';
 
@@ -14,8 +13,8 @@ import {
     runningInElectron,
     saveToKeyboardState
 } from './store';
-import { getUserConfiguration } from './store/reducers/user-configuration';
 import { ProgressButtonState } from './store/reducers/progress-button-state';
+import { SaveUserConfigInBinaryFileAction, SaveUserConfigInJsonFileAction } from './store/actions/user-config';
 
 @Component({
     selector: 'main-app',
@@ -65,28 +64,13 @@ export class MainAppComponent {
     onAltJ(event: KeyboardEvent): void {
         event.preventDefault();
         event.stopPropagation();
-        this.store
-            .let(getUserConfiguration())
-            .first()
-            .subscribe(userConfiguration => {
-                const asString = JSON.stringify(userConfiguration.toJsonObject());
-                const asBlob = new Blob([asString], {type: 'text/plain'});
-                saveAs(asBlob, 'UserConfiguration.json');
-            });
+        this.store.dispatch(new SaveUserConfigInJsonFileAction());
     }
 
     @HostListener('window:keydown.alt.b', ['$event'])
     onAltB(event: KeyboardEvent): void {
         event.preventDefault();
         event.stopPropagation();
-        this.store
-            .let(getUserConfiguration())
-            .first()
-            .map(userConfiguration => {
-                const uhkBuffer = new UhkBuffer();
-                userConfiguration.toBinary(uhkBuffer);
-                return new Blob([uhkBuffer.getBufferContent()]);
-            })
-            .subscribe(blob => saveAs(blob, 'UserConfiguration.bin'));
+        this.store.dispatch(new SaveUserConfigInBinaryFileAction());
     }
 }

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

@@ -9,7 +9,9 @@ export const ActionTypes = {
     LOAD_CONFIG_FROM_DEVICE: type(PREFIX + 'Load User Config from Device'),
     LOAD_CONFIG_FROM_DEVICE_REPLY: type(PREFIX + 'Load User Config from Device reply'),
     LOAD_USER_CONFIG_SUCCESS: type(PREFIX + 'Load User Config Success'),
-    SAVE_USER_CONFIG_SUCCESS: type(PREFIX + 'Save User Config Success')
+    SAVE_USER_CONFIG_SUCCESS: type(PREFIX + 'Save User Config Success'),
+    SAVE_USER_CONFIG_IN_JSON_FILE: type(PREFIX + 'Save User Config in JSON file'),
+    SAVE_USER_CONFIG_IN_BIN_FILE: type(PREFIX + 'Save User Config in binary file')
 };
 
 export class LoadUserConfigAction implements Action {
@@ -38,10 +40,20 @@ export class SaveUserConfigSuccessAction implements Action {
     constructor(public payload: UserConfiguration) { }
 }
 
+export class SaveUserConfigInJsonFileAction implements Action {
+    type = ActionTypes.SAVE_USER_CONFIG_IN_JSON_FILE;
+}
+
+export class SaveUserConfigInBinaryFileAction implements Action {
+    type = ActionTypes.SAVE_USER_CONFIG_IN_BIN_FILE;
+}
+
 export type Actions
     = LoadUserConfigAction
     | LoadUserConfigSuccessAction
     | SaveUserConfigSuccessAction
     | LoadConfigFromDeviceAction
     | LoadConfigFromDeviceReplyAction
+    | SaveUserConfigInJsonFileAction
+    | SaveUserConfigInBinaryFileAction
     ;

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

@@ -3,6 +3,7 @@ import { go } from '@ngrx/router-store';
 import { Actions, Effect, toPayload } from '@ngrx/effects';
 import { Observable } from 'rxjs/Observable';
 import { Action, Store } from '@ngrx/store';
+import { saveAs } from 'file-saver';
 
 import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/switchMap';
@@ -148,6 +149,25 @@ export class UserConfigEffects {
             }
         });
 
+    @Effect({dispatch: false}) saveUserConfigInJsonFile$ = this.actions$
+        .ofType(ActionTypes.SAVE_USER_CONFIG_IN_JSON_FILE)
+        .withLatestFrom(this.store.select(getUserConfiguration))
+        .do(([action, userConfiguration]) => {
+            const asString = JSON.stringify(userConfiguration.toJsonObject(), null, 2);
+            const asBlob = new Blob([asString], {type: 'text/plain'});
+            saveAs(asBlob, 'UserConfiguration.json');
+        });
+
+    @Effect({dispatch: false}) saveUserConfigInBinFile$ = this.actions$
+        .ofType(ActionTypes.SAVE_USER_CONFIG_IN_BIN_FILE)
+        .withLatestFrom(this.store.select(getUserConfiguration))
+        .do(([action, userConfiguration]) => {
+            const uhkBuffer = new UhkBuffer();
+            userConfiguration.toBinary(uhkBuffer);
+            const blob = new Blob([uhkBuffer.getBufferContent()]);
+            saveAs(blob, 'UserConfiguration.bin');
+        });
+
     constructor(private actions$: Actions,
                 private dataStorageRepository: DataStorageRepositoryService,
                 private store: Store<AppState>,