improvement: introduce response observables flow

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$|async" (clearEvt)="clearOutput($event)">
             </tr-command-output>
           </div>
 

src/app/app.component.ts

@@ -1,18 +1,26 @@
-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 {Observable, BehaviorSubject, merge} from 'rxjs';
+import {scan} from 'rxjs/operators';
 
-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';
 
 @Component({
   selector: 'tr-root',
   templateUrl: './app.component.html'
 })
 export class AppComponent {
-  responses: Output[] = [];
+
+  readonly responses$: Observable<Output[]>;
+
+  private currentResponseBs: BehaviorSubject<Output> = new BehaviorSubject<Output>(null);
+
+
   selectedDoc: string;
   activePattern: Pattern;
   newCommandForInput: string;
@@ -22,8 +30,15 @@ export class AppComponent {
     public commandService: CommandService,
     public patternService: PatternService,
     private redisConnectService: RedisConnectService) {
-      this.redisConnectService.response$.subscribe((response: Output) => this.updateResponses(response));
-    }
+
+    /** when currentResponse$ is null reset responses$ */
+    this.responses$ = merge(
+      this.currentResponseBs.asObservable(),
+      this.redisConnectService.response$
+      ).pipe(
+        scan((a, c) => c != null ? [...a, c] : [], [])
+    );
+  }
 
   /**
    * Set current command as the active one
@@ -57,15 +72,17 @@ export class AppComponent {
    */
   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);
   }
 
-  private updateResponses(command: Output) {
-    const commands = [];
-    Object.assign(commands, [...this.responses, command]);
-    this.responses = commands;
+  /**
+   * reset responses
+   *
+   */
+  clearOutput(): void {
+    this.currentResponseBs.next(null);
   }
 }

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) {

src/app/features/command/command-output/command-output.component.html

@@ -1,4 +1,12 @@
-<h3 class="h4">Redis Responses</h3>
+<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>
@@ -9,4 +17,4 @@ <h3 class="h4">Redis Responses</h3>
       </li>
     </ul>
   </div>
-</div>
+</div>

src/app/features/command/command-output/command-output.component.scss

@@ -1,20 +1,20 @@
 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;
       }
     }
 
     &.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;
+  }
+}

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();
+  }
 }

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);
+  }
 }