refactor: use rxjs pipe syntax (#900)

The `let` operator was not migrated because earlier two reducer needed be refactored
- user-configuration reducer
- present reducer

This commit is prerequisite of the angular upgrade.

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

@@ -2,7 +2,7 @@ import { Component } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
 import { Observable } from 'rxjs/Observable';
-import 'rxjs/add/operator/pluck';
+import { pluck } from 'rxjs/operators';
 
 @Component({
     selector: 'add-on',
@@ -18,6 +18,8 @@ export class AddOnComponent {
     constructor(route: ActivatedRoute) {
         this.name$ = route
             .params
-            .pluck<{}, string>('name');
+            .pipe(
+                pluck<{}, string>('name')
+            );
     }
 }

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

@@ -4,8 +4,7 @@ import { Keymap } from 'uhk-common';
 
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 import { Observable } from 'rxjs/Observable';
-import 'rxjs/add/operator/combineLatest';
-import 'rxjs/add/operator/publishReplay';
+import { combineLatest, publishReplay, refCount } from 'rxjs/operators';
 
 import { AppState } from '../../../store';
 import { KeymapActions } from '../../../store/actions';
@@ -29,11 +28,13 @@ export class KeymapAddComponent {
         this.filterExpression$ = new BehaviorSubject('');
 
         this.presets$ = this.presetsAll$
-            .combineLatest(this.filterExpression$, (keymaps: Keymap[], filterExpression: string) => {
-                return keymaps.filter((keymap: Keymap) => keymap.name.toLocaleLowerCase().includes(filterExpression));
-            })
-            .publishReplay(1)
-            .refCount();
+            .pipe(
+                combineLatest(this.filterExpression$, (keymaps: Keymap[], filterExpression: string) => {
+                    return keymaps.filter((keymap: Keymap) => keymap.name.toLocaleLowerCase().includes(filterExpression));
+                }),
+                publishReplay(1),
+                refCount()
+            );
     }
 
     filterKeyboards(filterExpression: string) {

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

@@ -3,15 +3,14 @@ import { CanActivate, Router } from '@angular/router';
 import { Keymap } from 'uhk-common';
 
 import { Observable } from 'rxjs/Observable';
+import { of } from 'rxjs/observable/of';
+import { switchMap, tap } from 'rxjs/operators';
 
-import 'rxjs/add/observable/of';
-import 'rxjs/add/operator/do';
 import 'rxjs/add/operator/let';
-import 'rxjs/add/operator/switchMap';
 
 import { Store } from '@ngrx/store';
 
-import { AppState } from '../../../store/index';
+import { AppState } from '../../../store';
 import { getKeymaps } from '../../../store/reducers/user-configuration';
 
 @Injectable()
@@ -22,12 +21,14 @@ export class KeymapEditGuard implements CanActivate {
     canActivate(): Observable<boolean> {
         return this.store
             .let(getKeymaps())
-            .do((keymaps: Keymap[]) => {
-                const defaultKeymap = keymaps.find(keymap => keymap.isDefault);
-                if (defaultKeymap) {
-                    this.router.navigate(['/keymap', defaultKeymap.abbreviation]);
-                }
-            })
-            .switchMap(() => Observable.of(false));
+            .pipe(
+                tap((keymaps: Keymap[]) => {
+                    const defaultKeymap = keymaps.find(keymap => keymap.isDefault);
+                    if (defaultKeymap) {
+                        this.router.navigate(['/keymap', defaultKeymap.abbreviation]);
+                    }
+                }),
+                switchMap(() => of(false))
+            );
     }
 }

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

@@ -4,13 +4,8 @@ import { Store } from '@ngrx/store';
 import { Keymap } from 'uhk-common';
 
 import { Observable } from 'rxjs/Observable';
-import 'rxjs/add/operator/first';
+import { combineLatest, first, map, pluck, publishReplay, refCount, switchMap } from 'rxjs/operators';
 import 'rxjs/add/operator/let';
-import 'rxjs/add/operator/map';
-import 'rxjs/add/operator/publishReplay';
-import 'rxjs/add/operator/switchMap';
-import 'rxjs/add/operator/pluck';
-import 'rxjs/add/operator/combineLatest';
 
 import { saveAs } from 'file-saver';
 
@@ -42,13 +37,17 @@ export class KeymapEditComponent {
                 route: ActivatedRoute) {
         this.keymap$ = route
             .params
-            .pluck<{}, string>('abbr')
-            .switchMap((abbr: string) => store.let(getKeymap(abbr)))
-            .publishReplay(1)
-            .refCount();
+            .pipe(
+                pluck<{}, string>('abbr'),
+                switchMap((abbr: string) => store.let(getKeymap(abbr))),
+                publishReplay(1),
+                refCount()
+            );
 
         this.deletable$ = store.let(getKeymaps())
-            .map((keymaps: Keymap[]) => keymaps.length > 1);
+            .pipe(
+                map((keymaps: Keymap[]) => keymaps.length > 1)
+            );
 
         this.keyboardLayout$ = store.select(getKeyboardLayout);
         this.allowLayerDoubleTap$ = store.select(layerDoubleTapSupported);
@@ -56,17 +55,21 @@ export class KeymapEditComponent {
 
     downloadKeymap() {
         const exportableJSON$: Observable<string> = this.keymap$
-            .switchMap(keymap => this.toExportableJSON(keymap))
-            .map(exportableJSON => JSON.stringify(exportableJSON));
+            .pipe(
+                switchMap(keymap => this.toExportableJSON(keymap)),
+                map(exportableJSON => JSON.stringify(exportableJSON))
+            );
 
         this.keymap$
-            .combineLatest(exportableJSON$)
-            .first()
+            .pipe(
+                combineLatest(exportableJSON$),
+                first()
+            )
             .subscribe(latest => {
                 const keymap = latest[0];
                 const exportableJSON = latest[1];
                 const fileName = keymap.name + '_keymap.json';
-                saveAs(new Blob([exportableJSON], {type: 'application/json'}), fileName);
+                saveAs(new Blob([exportableJSON], { type: 'application/json' }), fileName);
             });
     }
 
@@ -82,18 +85,20 @@ export class KeymapEditComponent {
     private toExportableJSON(keymap: Keymap): Observable<any> {
         return this.store
             .let(getUserConfiguration())
-            .first()
-            .map(userConfiguration => {
-                return {
-                    site: 'https://ultimatehackingkeyboard.com',
-                    description: 'Ultimate Hacking Keyboard keymap',
-                    keyboardModel: 'UHK60',
-                    userConfigMajorVersion: userConfiguration.userConfigMajorVersion,
-                    userConfigMinorVersion: userConfiguration.userConfigMinorVersion,
-                    userConfigPatchVersion: userConfiguration.userConfigPatchVersion,
-                    objectType: 'keymap',
-                    objectValue: keymap.toJsonObject()
-                };
-            });
+            .pipe(
+                first(),
+                map(userConfiguration => {
+                    return {
+                        site: 'https://ultimatehackingkeyboard.com',
+                        description: 'Ultimate Hacking Keyboard keymap',
+                        keyboardModel: 'UHK60',
+                        userConfigMajorVersion: userConfiguration.userConfigMajorVersion,
+                        userConfigMinorVersion: userConfiguration.userConfigMinorVersion,
+                        userConfigPatchVersion: userConfiguration.userConfigPatchVersion,
+                        objectType: 'keymap',
+                        objectValue: keymap.toJsonObject()
+                    };
+                })
+            );
     }
 }

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

@@ -5,7 +5,7 @@ import { Macro, MacroAction } from 'uhk-common';
 
 import { Observable } from 'rxjs/Observable';
 import { Subscription } from 'rxjs/Subscription';
-import 'rxjs/add/operator/pluck';
+import { pluck, switchMap } from 'rxjs/operators';
 
 import { MacroActions } from '../../../store/actions';
 import { AppState, macroPlaybackSupported } from '../../../store';
@@ -26,14 +26,17 @@ export class MacroEditComponent implements OnDestroy {
     macroPlaybackSupported$: Observable<boolean>;
 
     private subscription: Subscription;
+
     constructor(private store: Store<AppState>, public route: ActivatedRoute) {
         this.subscription = route
             .params
-            .pluck<{}, string>('id')
-            .switchMap((id: string) => {
-                this.macroId = +id;
-                return store.let(getMacro(this.macroId));
-            })
+            .pipe(
+                pluck<{}, string>('id'),
+                switchMap((id: string) => {
+                    this.macroId = +id;
+                    return store.let(getMacro(this.macroId));
+                })
+            )
             .subscribe((macro: Macro) => {
                 this.macro = macro;
             });

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

@@ -3,9 +3,8 @@ import { CanActivate, Router } from '@angular/router';
 import { Macro } from 'uhk-common';
 
 import { Observable } from 'rxjs/Observable';
-
+import { map } from 'rxjs/operators';
 import 'rxjs/add/operator/let';
-import 'rxjs/add/operator/map';
 
 import { Store } from '@ngrx/store';
 
@@ -20,12 +19,14 @@ export class MacroNotFoundGuard implements CanActivate {
     canActivate(): Observable<boolean> {
         return this.store
             .let(getMacros())
-            .map((macros: Macro[]) => {
-                const hasMacros = macros.length > 0;
-                if (hasMacros) {
-                    this.router.navigate(['/macro', macros[0].id]);
-                }
-                return !hasMacros;
-            });
+            .pipe(
+                map((macros: Macro[]) => {
+                    const hasMacros = macros.length > 0;
+                    if (hasMacros) {
+                        this.router.navigate(['/macro', macros[0].id]);
+                    }
+                    return !hasMacros;
+                })
+            );
     }
 }

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

@@ -16,8 +16,7 @@ import { animate, keyframes, state, style, transition, trigger } from '@angular/
 import { Store } from '@ngrx/store';
 import { Observable } from 'rxjs/Observable';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
-import 'rxjs/add/operator/combineLatest';
-import 'rxjs/add/operator/map';
+import { combineLatest, map } from 'rxjs/operators';
 
 import {
     KeyAction,
@@ -155,9 +154,10 @@ export class PopoverComponent implements OnChanges {
                 private cdRef: ChangeDetectorRef) {
         this.animationState = 'closed';
         this.keymaps$ = store.let(getKeymaps())
-            .combineLatest(this.currentKeymap$)
-            .map(([keymaps, currentKeymap]: [Keymap[], Keymap]) =>
-                keymaps.filter((keymap: Keymap) => currentKeymap.abbreviation !== keymap.abbreviation)
+            .pipe(
+                combineLatest(this.currentKeymap$),
+                map(([keymaps, currentKeymap]: [Keymap[], Keymap]) =>
+                        keymaps.filter((keymap: Keymap) => currentKeymap.abbreviation !== keymap.abbreviation))
             );
         this.macroPlaybackSupported$ = store.select(macroPlaybackSupported);
     }

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

@@ -12,9 +12,6 @@ import { animate, state, style, transition, trigger } from '@angular/animations'
 import { Store } from '@ngrx/store';
 
 import { Subscription } from 'rxjs/Subscription';
-import 'rxjs/add/operator/do';
-import 'rxjs/add/operator/map';
-import 'rxjs/add/operator/let';
 
 import { AppState, getSideMenuPageState } from '../../store';
 import { MacroActions } from '../../store/actions';

packages/uhk-web/src/app/components/slider-wrapper/slider-wrapper.component.ts

@@ -3,8 +3,7 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { NouisliderComponent } from 'ng2-nouislider';
 import { Observable } from 'rxjs/Observable';
 import { Observer } from 'rxjs/Observer';
-import 'rxjs/add/operator/debounceTime';
-import 'rxjs/add/operator/distinctUntilChanged';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
 
 export interface SliderPips {
     mode: string;
@@ -80,9 +79,10 @@ export class SliderWrapperComponent implements AfterViewInit, ControlValueAccess
         if (!this.changeObserver$) {
             Observable.create(observer => {
                 this.changeObserver$ = observer;
-            }).debounceTime(this.changeDebounceTime)
-            .distinctUntilChanged()
-            .subscribe(this.propagateChange);
+            }).pipe(
+                debounceTime(this.changeDebounceTime),
+                distinctUntilChanged()
+            ).subscribe(this.propagateChange);
 
             return; // No change event on first change as the value is just being set
         }

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

@@ -14,8 +14,8 @@ import {
 } from '@angular/core';
 
 import { Observable } from 'rxjs/Observable';
-import 'rxjs/add/observable/of';
-import 'rxjs/add/operator/map';
+import { of } from 'rxjs/observable/of';
+import { map } from 'rxjs/operators';
 import { Store } from '@ngrx/store';
 
 import {
@@ -319,40 +319,44 @@ export class SvgKeyboardWrapComponent implements OnInit, OnChanges {
             const playMacroAction: PlayMacroAction = keyAction;
             return this.store
                 .select(appState => appState.userConfiguration.macros)
-                .map(macroState => macroState.find(macro => {
-                    return macro.id === playMacroAction.macroId;
-                }).name)
-                .map(macroName => {
-                    const content: NameValuePair[] = [
-                        {
-                            name: 'Action type',
-                            value: 'Play macro'
-                        },
-                        {
-                            name: 'Macro name',
-                            value: macroName
-                        }
-                    ];
-                    return content;
-                });
+                .pipe(
+                    map(macroState => macroState.find(macro => {
+                        return macro.id === playMacroAction.macroId;
+                    }).name),
+                    map(macroName => {
+                        const content: NameValuePair[] = [
+                            {
+                                name: 'Action type',
+                                value: 'Play macro'
+                            },
+                            {
+                                name: 'Macro name',
+                                value: macroName
+                            }
+                        ];
+                        return content;
+                    })
+                );
         } else if (keyAction instanceof SwitchKeymapAction) {
             const switchKeymapAction: SwitchKeymapAction = keyAction;
             return this.store
                 .select(appState => appState.userConfiguration.keymaps)
-                .map(keymaps => keymaps.find(keymap => keymap.abbreviation === switchKeymapAction.keymapAbbreviation).name)
-                .map(keymapName => {
-                    const content: NameValuePair[] = [
-                        {
-                            name: 'Action type',
-                            value: 'Switch keymap'
-                        },
-                        {
-                            name: 'Keymap',
-                            value: keymapName
-                        }
-                    ];
-                    return content;
-                });
+                .pipe(
+                    map(keymaps => keymaps.find(keymap => keymap.abbreviation === switchKeymapAction.keymapAbbreviation).name),
+                    map(keymapName => {
+                        const content: NameValuePair[] = [
+                            {
+                                name: 'Action type',
+                                value: 'Switch keymap'
+                            },
+                            {
+                                name: 'Keymap',
+                                value: keymapName
+                            }
+                        ];
+                        return content;
+                    })
+                );
         } else if (keyAction instanceof SwitchLayerAction) {
             const switchLayerAction: SwitchLayerAction = keyAction;
             const content: NameValuePair[] =
@@ -370,9 +374,9 @@ export class SvgKeyboardWrapComponent implements OnInit, OnChanges {
                         value: switchLayerAction.switchLayerMode === SwitchLayerMode.toggle ? 'On' : 'Off'
                     }
                 ];
-            return Observable.of(content);
+            return of(content);
         }
 
-        return Observable.of([]);
+        return of([]);
     }
 }