From 7298d0cd4075699c78ae882a4ce57f71bdfca160 Mon Sep 17 00:00:00 2001
From: peppedeka <peppedeka@gmail.com>
Date: Sat, 7 Dec 2019 15:01:14 +0100
Subject: [PATCH 1/6] feat(command-output): clear button

---
 src/app/app.component.html                    |  2 +-
 src/app/app.component.ts                      | 36 +++++++++++++------
 .../command-output.component.html             |  1 +
 .../command-output.component.ts               | 12 +++++--
 4 files changed, 37 insertions(+), 14 deletions(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 15f42b9..f8c302a 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -37,7 +37,7 @@
             </tr-command-list>
           </div>
           <div class="flex-grow-1 d-flex">
-            <tr-command-output class="d-flex flex-column h-auto w-100" [commandsOutput]="responses">
+            <tr-command-output class="d-flex flex-column h-auto w-100" [commandsOutput]="responses" (clearEvt)="clearOutput($event)">
             </tr-command-output>
           </div>
 
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 2a48950..4254add 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,29 +1,33 @@
-import { Component } from '@angular/core';
-import { Observable } from 'rxjs';
+import {Component, OnDestroy} from '@angular/core';
 
-import { Output } from '@app/shared/models/response.interface';
-import { Pattern } from '@app/shared/models/pattern.interface';
-import { CommandService } from '@app/core/services/command.service';
-import { PatternService } from '@app/core/services/pattern.service';
-import { RedisConnectService } from '@app/core/services/redis-connect.service';
+import {Output} from '@app/shared/models/response.interface';
+import {Pattern} from '@app/shared/models/pattern.interface';
+import {CommandService} from '@app/core/services/command.service';
+import {PatternService} from '@app/core/services/pattern.service';
+import {RedisConnectService} from '@app/core/services/redis-connect.service';
+
+import {Observable, Subscription} from 'rxjs';
 
 @Component({
   selector: 'tr-root',
   templateUrl: './app.component.html'
 })
-export class AppComponent {
+export class AppComponent implements OnDestroy {
+  private responseSub: Subscription = Subscription.EMPTY;
+
   responses: Output[] = [];
   selectedDoc: string;
   activePattern: Pattern;
   newCommandForInput: string;
   resetCommand$: Observable<number> = this.redisConnectService.execCommandTime$;
 
+
   constructor(
     public commandService: CommandService,
     public patternService: PatternService,
     private redisConnectService: RedisConnectService) {
-      this.redisConnectService.response$.subscribe((response: Output) => this.updateResponses(response));
-    }
+    this.responseSub = this.redisConnectService.response$.subscribe((response: Output) => this.updateResponses(response));
+  }
 
   /**
    * Set current command as the active one
@@ -63,9 +67,21 @@ export class AppComponent {
     this.selectActiveCommand(first);
   }
 
+  /**
+   * reset responses
+   *
+   */
+  clearOutput(): void {
+    this.responses = [];
+  }
+
   private updateResponses(command: Output) {
     const commands = [];
     Object.assign(commands, [...this.responses, command]);
     this.responses = commands;
   }
+
+  ngOnDestroy(): void {
+    this.responseSub.unsubscribe();
+  }
 }
diff --git a/src/app/features/command/command-output/command-output.component.html b/src/app/features/command/command-output/command-output.component.html
index 1301173..5ceefdf 100644
--- a/src/app/features/command/command-output/command-output.component.html
+++ b/src/app/features/command/command-output/command-output.component.html
@@ -1,4 +1,5 @@
 <h3 class="h4">Redis Responses</h3>
+<button (click)="clear()">clear</button>
 <div class="flex-fill scroll-box-container">
   <div class="scroll-box" #scrollable [scrollTop]="scrollable.scrollHeight">
     <ul>
diff --git a/src/app/features/command/command-output/command-output.component.ts b/src/app/features/command/command-output/command-output.component.ts
index 1486ad7..d4adf0c 100644
--- a/src/app/features/command/command-output/command-output.component.ts
+++ b/src/app/features/command/command-output/command-output.component.ts
@@ -1,6 +1,6 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import {ChangeDetectionStrategy, Component, Input, EventEmitter, Output} from '@angular/core';
 
-import { Output } from '@app/shared/models/response.interface';
+import {Output as OutputItf} from '@app/shared/models/response.interface';
 
 @Component({
   selector: 'tr-command-output',
@@ -9,5 +9,11 @@ import { Output } from '@app/shared/models/response.interface';
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class CommandOutputComponent {
-  @Input() commandsOutput: Array<Output> = [];
+  @Input() commandsOutput: Array<OutputItf> = [];
+  @Output()
+  clearEvt: EventEmitter<void> = new EventEmitter<void>();
+
+  clear(): void {
+    this.clearEvt.emit();
+  }
 }

From 044b58f1b96291e6e1937961c4cf80c4a53cf488 Mon Sep 17 00:00:00 2001
From: peppedeka <peppedeka@gmail.com>
Date: Sun, 8 Dec 2019 12:33:12 +0100
Subject: [PATCH 2/6] improvement(app-component): introduce response
 observables flow

---
 src/app/app.component.html |  2 +-
 src/app/app.component.ts   | 31 +++++++++++++++++++------------
 2 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index f8c302a..9e187a6 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -37,7 +37,7 @@
             </tr-command-list>
           </div>
           <div class="flex-grow-1 d-flex">
-            <tr-command-output class="d-flex flex-column h-auto w-100" [commandsOutput]="responses" (clearEvt)="clearOutput($event)">
+            <tr-command-output class="d-flex flex-column h-auto w-100" [commandsOutput]="responses$|async" (clearEvt)="clearOutput($event)">
             </tr-command-output>
           </div>
 
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 4254add..612bac4 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -6,7 +6,9 @@ import {CommandService} from '@app/core/services/command.service';
 import {PatternService} from '@app/core/services/pattern.service';
 import {RedisConnectService} from '@app/core/services/redis-connect.service';
 
-import {Observable, Subscription} from 'rxjs';
+import {Observable, Subscription, BehaviorSubject} from 'rxjs';
+import {scan} from 'rxjs/operators';
+
 
 @Component({
   selector: 'tr-root',
@@ -15,18 +17,29 @@ import {Observable, Subscription} from 'rxjs';
 export class AppComponent implements OnDestroy {
   private responseSub: Subscription = Subscription.EMPTY;
 
-  responses: Output[] = [];
+  readonly responses$: Observable<Output[]>;
+
+  private currentResponseBs: BehaviorSubject<Output> = new BehaviorSubject<Output>(null);
+  get currentResponse$() {
+    return this.currentResponseBs.asObservable();
+  }
+
   selectedDoc: string;
   activePattern: Pattern;
   newCommandForInput: string;
   resetCommand$: Observable<number> = this.redisConnectService.execCommandTime$;
 
-
   constructor(
     public commandService: CommandService,
     public patternService: PatternService,
     private redisConnectService: RedisConnectService) {
-    this.responseSub = this.redisConnectService.response$.subscribe((response: Output) => this.updateResponses(response));
+    this.responseSub = this.redisConnectService.response$
+      .subscribe((response: Output) => this.currentResponseBs.next(response));
+
+    /** when currentResponse$ is null reset responses$ */
+    this.responses$ = this.currentResponse$.pipe(
+      scan((a, c) => c != null ? [...a, c] : [], []),
+    );
   }
 
   /**
@@ -61,7 +74,7 @@ export class AppComponent implements OnDestroy {
    */
   runCommand(commandString: string) {
     const newCommand: Output = {valid: true, output: commandString.toUpperCase(), type: 'command'};
-    this.updateResponses(newCommand);
+    this.currentResponseBs.next(newCommand);
     this.redisConnectService.send(commandString);
     const [first, ...second] = commandString.split(' ');
     this.selectActiveCommand(first);
@@ -72,13 +85,7 @@ export class AppComponent implements OnDestroy {
    *
    */
   clearOutput(): void {
-    this.responses = [];
-  }
-
-  private updateResponses(command: Output) {
-    const commands = [];
-    Object.assign(commands, [...this.responses, command]);
-    this.responses = commands;
+    this.currentResponseBs.next(null);
   }
 
   ngOnDestroy(): void {

From ce7a011dfd2804b31c5a678c58694a2aacdc2c35 Mon Sep 17 00:00:00 2001
From: peppedeka <peppedeka@gmail.com>
Date: Thu, 12 Dec 2019 16:43:21 +0100
Subject: [PATCH 3/6] fix(command-output.component.html)clear button

---
 .../command-output.component.html             | 13 +++++++---
 .../command-output.component.scss             | 26 +++++++++++++++----
 2 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/src/app/features/command/command-output/command-output.component.html b/src/app/features/command/command-output/command-output.component.html
index 5ceefdf..372c237 100644
--- a/src/app/features/command/command-output/command-output.component.html
+++ b/src/app/features/command/command-output/command-output.component.html
@@ -1,5 +1,12 @@
-<h3 class="h4">Redis Responses</h3>
-<button (click)="clear()">clear</button>
+<h3 class="h4 flex-box">
+  <span class="flex-span">Redis Responses</span>
+  <button (click)="clear()" class="flex-button">
+    <i class="h7 material-icons">
+      clear
+    </i>
+  </button>
+</h3>
+
 <div class="flex-fill scroll-box-container">
   <div class="scroll-box" #scrollable [scrollTop]="scrollable.scrollHeight">
     <ul>
@@ -10,4 +17,4 @@ <h3 class="h4">Redis Responses</h3>
       </li>
     </ul>
   </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/src/app/features/command/command-output/command-output.component.scss b/src/app/features/command/command-output/command-output.component.scss
index 68f9d09..b367d44 100644
--- a/src/app/features/command/command-output/command-output.component.scss
+++ b/src/app/features/command/command-output/command-output.component.scss
@@ -1,12 +1,12 @@
 ul {
   list-style: none;
-  padding: .5rem;
+  padding: 0.5rem;
 
   li {
     &.command {
       color: #736767;
-      font-size: .7rem;
-      padding-top: .6rem;
+      font-size: 0.7rem;
+      padding-top: 0.6rem;
 
       span {
         font-style: italic;
@@ -14,7 +14,7 @@ ul {
     }
 
     &.response {
-      padding-bottom: .6rem;
+      padding-bottom: 0.6rem;
       border-bottom: 1px solid #ccc;
 
       .run-command {
@@ -24,7 +24,7 @@ ul {
 
     span {
       display: inline-block;
-      padding: 0 .25rem;
+      padding: 0 0.25rem;
       margin-bottom: 0;
     }
   }
@@ -40,4 +40,20 @@ ul {
     padding-bottom: 2rem !important;
   }
 }
+.flex-box {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-content: stretch;
+  align-items: flex-start;
 
+  .flex-button,
+  .flex-span {
+    flex: 0 1 auto;
+    align-self: auto;
+  }
+  .flex-span {
+    align-self: flex-end;
+  }
+}

From 5b67aac546f614c88ccbdd60692a9ffb8c15ea19 Mon Sep 17 00:00:00 2001
From: peppedeka <peppedeka@gmail.com>
Date: Sat, 14 Dec 2019 11:40:13 +0100
Subject: [PATCH 4/6] fix(command-output.component.html)clear button

---
 .../command-output.component.html             | 13 +++++--
 .../command-output.component.scss             | 33 ++++++++++++++---
 src/styles/styles.scss                        | 37 +++++++++++--------
 3 files changed, 60 insertions(+), 23 deletions(-)

diff --git a/src/app/features/command/command-output/command-output.component.html b/src/app/features/command/command-output/command-output.component.html
index 5ceefdf..372c237 100644
--- a/src/app/features/command/command-output/command-output.component.html
+++ b/src/app/features/command/command-output/command-output.component.html
@@ -1,5 +1,12 @@
-<h3 class="h4">Redis Responses</h3>
-<button (click)="clear()">clear</button>
+<h3 class="h4 flex-box">
+  <span class="flex-span">Redis Responses</span>
+  <button (click)="clear()" class="flex-button">
+    <i class="h7 material-icons">
+      clear
+    </i>
+  </button>
+</h3>
+
 <div class="flex-fill scroll-box-container">
   <div class="scroll-box" #scrollable [scrollTop]="scrollable.scrollHeight">
     <ul>
@@ -10,4 +17,4 @@ <h3 class="h4">Redis Responses</h3>
       </li>
     </ul>
   </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/src/app/features/command/command-output/command-output.component.scss b/src/app/features/command/command-output/command-output.component.scss
index 68f9d09..942ea0a 100644
--- a/src/app/features/command/command-output/command-output.component.scss
+++ b/src/app/features/command/command-output/command-output.component.scss
@@ -1,12 +1,12 @@
 ul {
   list-style: none;
-  padding: .5rem;
+  padding: 0.5rem;
 
   li {
     &.command {
       color: #736767;
-      font-size: .7rem;
-      padding-top: .6rem;
+      font-size: 0.7rem;
+      padding-top: 0.6rem;
 
       span {
         font-style: italic;
@@ -14,7 +14,7 @@ ul {
     }
 
     &.response {
-      padding-bottom: .6rem;
+      padding-bottom: 0.6rem;
       border-bottom: 1px solid #ccc;
 
       .run-command {
@@ -24,7 +24,7 @@ ul {
 
     span {
       display: inline-block;
-      padding: 0 .25rem;
+      padding: 0 0.25rem;
       margin-bottom: 0;
     }
   }
@@ -40,4 +40,27 @@ ul {
     padding-bottom: 2rem !important;
   }
 }
+.flex-box {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-content: stretch;
+  align-items: flex-start;
 
+  .flex-button,
+  .flex-span {
+    flex: 0 1 auto;
+    align-self: auto;
+    background-color: transparent;
+    border-color: transparent;
+  }
+
+  .flex-span {
+    align-self: flex-end;
+  }
+
+  button:focus {
+    outline: 0;
+  }
+}
diff --git a/src/styles/styles.scss b/src/styles/styles.scss
index bca2811..8fb3772 100644
--- a/src/styles/styles.scss
+++ b/src/styles/styles.scss
@@ -1,12 +1,13 @@
 @import "./variables";
 @import "./../../node_modules/bootstrap/scss/bootstrap.scss";
 
-@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&display=swap');
+@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&display=swap");
 
-html,body{
-  height:100%;
-  font-size: .9rem;
-  font-family: 'Open Sans', sans-serif;
+html,
+body {
+  height: 100%;
+  font-size: 0.9rem;
+  font-family: "Open Sans", sans-serif;
 }
 
 .scroll-box-container {
@@ -28,7 +29,7 @@ html,body{
 
 .col-center {
   background: #ebebeb;
-  border-color: #ccc!important;
+  border-color: #ccc !important;
 }
 
 code {
@@ -39,26 +40,29 @@ code {
   font-size: 0.8rem;
   text-transform: uppercase;
   border-bottom: 1px solid #ccc;
-  padding-bottom: .5rem;
+  padding-bottom: 0.5rem;
 }
 
+.h7,
 h3.h4 {
   color: #7a0c00;
   font-weight: bolder;
 }
-
+.h7 {
+  font-size: 1rem;
+}
 tr-pattern-content h1 {
-  font-size: 1.3rem!important;
+  font-size: 1.3rem !important;
   font-weight: bold;
 }
 
 tr-pattern-content h2 {
-  font-size: 1.1rem!important;
+  font-size: 1.1rem !important;
   font-weight: bold;
 }
 
 tr-command-documentation h2 {
-  font-size: 1.1rem!important;
+  font-size: 1.1rem !important;
   font-weight: bold;
 }
 
@@ -73,7 +77,6 @@ tr-pattern-content {
   box-shadow: 0;
 }
 
-
 .scroll-box::-webkit-scrollbar {
   -webkit-appearance: none;
 }
@@ -89,7 +92,7 @@ tr-pattern-content {
 .scroll-box::-webkit-scrollbar-thumb {
   border-radius: 8px;
   border: 2px solid white; /* should match background, can't be transparent */
-  background-color: rgba(0, 0, 0, .5);
+  background-color: rgba(0, 0, 0, 0.5);
 }
 
 .scroll-box::-webkit-scrollbar-track {
@@ -107,6 +110,10 @@ tr-pattern-content {
 }
 
 @keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
 }

From d65788644060c595ad3a794bbf916b224227132d Mon Sep 17 00:00:00 2001
From: peppedeka <peppedeka@gmail.com>
Date: Sat, 14 Dec 2019 13:38:14 +0100
Subject: [PATCH 5/6] remove useless subscription

---
 src/app/app.component.ts | 20 ++++++++------------
 1 file changed, 8 insertions(+), 12 deletions(-)

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 612bac4..4559ebb 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -6,16 +6,15 @@ import {CommandService} from '@app/core/services/command.service';
 import {PatternService} from '@app/core/services/pattern.service';
 import {RedisConnectService} from '@app/core/services/redis-connect.service';
 
-import {Observable, Subscription, BehaviorSubject} from 'rxjs';
-import {scan} from 'rxjs/operators';
+import {Observable, BehaviorSubject, merge, of} from 'rxjs';
+import {scan, catchError} from 'rxjs/operators';
 
 
 @Component({
   selector: 'tr-root',
   templateUrl: './app.component.html'
 })
-export class AppComponent implements OnDestroy {
-  private responseSub: Subscription = Subscription.EMPTY;
+export class AppComponent {
 
   readonly responses$: Observable<Output[]>;
 
@@ -33,12 +32,13 @@ export class AppComponent implements OnDestroy {
     public commandService: CommandService,
     public patternService: PatternService,
     private redisConnectService: RedisConnectService) {
-    this.responseSub = this.redisConnectService.response$
-      .subscribe((response: Output) => this.currentResponseBs.next(response));
 
     /** when currentResponse$ is null reset responses$ */
-    this.responses$ = this.currentResponse$.pipe(
-      scan((a, c) => c != null ? [...a, c] : [], []),
+    this.responses$ = merge(
+      this.currentResponse$,
+      this.redisConnectService.response$.pipe(catchError(() =>  of(null)))
+      ).pipe(
+        scan((a, c) => c != null ? [...a, c] : [], [])
     );
   }
 
@@ -87,8 +87,4 @@ export class AppComponent implements OnDestroy {
   clearOutput(): void {
     this.currentResponseBs.next(null);
   }
-
-  ngOnDestroy(): void {
-    this.responseSub.unsubscribe();
-  }
 }

From be6d2b6cbb9fc20be1eef1b31c99763c46609885 Mon Sep 17 00:00:00 2001
From: peppedeka <peppedeka@gmail.com>
Date: Sun, 15 Dec 2019 10:51:55 +0100
Subject: [PATCH 6/6] refactor(app.component)move code to redis-connect
 service, remove useless getter

---
 src/app/app.component.ts                       | 12 +++++-------
 src/app/core/services/redis-connect.service.ts |  7 ++++---
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 4559ebb..4c38adb 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -6,8 +6,8 @@ import {CommandService} from '@app/core/services/command.service';
 import {PatternService} from '@app/core/services/pattern.service';
 import {RedisConnectService} from '@app/core/services/redis-connect.service';
 
-import {Observable, BehaviorSubject, merge, of} from 'rxjs';
-import {scan, catchError} from 'rxjs/operators';
+import {Observable, BehaviorSubject, merge} from 'rxjs';
+import {scan} from 'rxjs/operators';
 
 
 @Component({
@@ -19,9 +19,7 @@ export class AppComponent {
   readonly responses$: Observable<Output[]>;
 
   private currentResponseBs: BehaviorSubject<Output> = new BehaviorSubject<Output>(null);
-  get currentResponse$() {
-    return this.currentResponseBs.asObservable();
-  }
+
 
   selectedDoc: string;
   activePattern: Pattern;
@@ -35,8 +33,8 @@ export class AppComponent {
 
     /** when currentResponse$ is null reset responses$ */
     this.responses$ = merge(
-      this.currentResponse$,
-      this.redisConnectService.response$.pipe(catchError(() =>  of(null)))
+      this.currentResponseBs.asObservable(),
+      this.redisConnectService.response$
       ).pipe(
         scan((a, c) => c != null ? [...a, c] : [], [])
     );
diff --git a/src/app/core/services/redis-connect.service.ts b/src/app/core/services/redis-connect.service.ts
index 87fc07b..a1c7d39 100644
--- a/src/app/core/services/redis-connect.service.ts
+++ b/src/app/core/services/redis-connect.service.ts
@@ -1,8 +1,8 @@
 import * as uuid from 'uuid';
 
 import { Injectable } from '@angular/core';
-import { BehaviorSubject, Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
+import { BehaviorSubject, Observable, of } from 'rxjs';
+import { map, catchError } from 'rxjs/operators';
 import { webSocket } from 'rxjs/webSocket';
 
 import { environment } from '@app/../environments/environment';
@@ -21,7 +21,8 @@ export class RedisConnectService {
     map((response: any): Output => {
       const valid = response.status === 'ok';
       return { valid, type: 'response', output: response.output };
-    })
+    }),
+    catchError(() =>  of(null))
   );
 
   send(command: string) {