Fix memory leak in Keymap add

src/components/keymap/add/keymap-add.component.html

@@ -10,11 +10,11 @@
         <input type="text" class="form-control" placeholder="Search ..." (input)="filterKeyboards($event.target.value)">
     </div>
     <div class="keymap__search_amount">
-        {{ (presets$ | async).length }} / {{ (presetsAll$ | async).length }} keymaps shown
+        {{ presets.length }} / {{ (presetsAll$ | async).length }} keymaps shown
     </div>
 </div>
 <div class="keymap__list">
-    <div #keyboard class="keymap__list_item" *ngFor="let keymap of presets$ | async">
+    <div #keyboard class="keymap__list_item" *ngFor="let keymap of presets">
         <h2>{{ keymap.name }}</h2>
         <p class="keymap__description">
             {{ keymap.description }}
@@ -30,6 +30,6 @@
         </div>
     </div>
 </div>
-<div *ngIf="(presets$ | async).length === 0">
+<div *ngIf="presets.length === 0">
     Sorry, no keyboard found under this search query.
 </div>

src/components/keymap/add/keymap-add.component.ts

@@ -1,9 +1,10 @@
-import { Component } from '@angular/core';
+import { Component, OnDestroy } from '@angular/core';
 import { Store } from '@ngrx/store';
 
-import 'rxjs/add/operator/publishReplay';
+import 'rxjs/add/operator/combineLatest';
+import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 import { Observable } from 'rxjs/Observable';
-import { ConnectableObservable } from 'rxjs/observable/ConnectableObservable';
+import { Subscription } from 'rxjs/Subscription';
 
 import { Keymap } from '../../../config-serializer/config-items/Keymap';
 import { AppState } from '../../../store';
@@ -14,30 +15,30 @@ import { KeymapActions } from '../../../store/actions';
     template: require('./keymap-add.component.html'),
     styles: [require('./keymap-add.component.scss')]
 })
-export class KeymapAddComponent {
-    private presets$: Observable<Keymap[]>;
+export class KeymapAddComponent implements OnDestroy {
+    private presets: Keymap[];
     private presetsAll$: Observable<Keymap[]>;
+    private filterExpression$: BehaviorSubject<string>;
+    private subscription: Subscription;
 
     constructor(private store: Store<AppState>) {
-        let presetConnectable: ConnectableObservable<Keymap[]> = store
-            .select((appState: AppState) => appState.presetKeymaps)
-            .publishReplay();
-
-        this.presets$ = presetConnectable;
-        presetConnectable.connect();
-
         this.presetsAll$ = store.select((appState: AppState) => appState.presetKeymaps);
+        this.filterExpression$ = new BehaviorSubject('');
+
+        this.subscription = this.presetsAll$.combineLatest(
+            this.filterExpression$,
+            (keymaps: Keymap[], filterExpression: string) => {
+                return keymaps.filter((keymap: Keymap) => keymap.name.toLocaleLowerCase().includes(filterExpression));
+            }
+        ).subscribe(keymaps => this.presets = keymaps);
     }
 
-    filterKeyboards(value: string) {
-        let presetConnectable: ConnectableObservable<Keymap[]> = this.presetsAll$
-            .map((keymaps: Keymap[]) => keymaps.filter(
-                (keymap: Keymap) => keymap.name.toLocaleLowerCase().includes(value))
-            )
-            .publishReplay();
+    ngOnDestroy() {
+        this.subscription.unsubscribe();
+    }
 
-        this.presets$ = presetConnectable;
-        presetConnectable.connect();
+    filterKeyboards(filterExpression: string) {
+        this.filterExpression$.next(filterExpression);
     }
 
     addKeymap(keymap: Keymap) {