Develop

.gitignore

@@ -3,13 +3,17 @@
 /dist
 /tmp
 /out-tsc
+
 # Only exists if Bazel was run
 /bazel-out
+
 # dependencies
 /node_modules
+
 # profiling files
 chrome-profiler-events.json
 speed-measure-plugin.json
+
 # IDEs and editors
 /.idea
 .project
@@ -18,13 +22,15 @@ speed-measure-plugin.json
 *.launch
 .settings/
 *.sublime-workspace
+
 # IDE - VSCode
 .vscode/*
 !.vscode/settings.json
 !.vscode/tasks.json
 !.vscode/launch.json
 !.vscode/extensions.json
 .history/*
+
 # misc
 /.sass-cache
 /connect.lock
@@ -34,6 +40,8 @@ npm-debug.log
 yarn-error.log
 testem.log
 /typings
+environment.local.ts
+
 # System Files
 .DS_Store
 Thumbs.db

README.md

@@ -9,8 +9,11 @@ _Redis Patterns Console_ is an interactive (and reactive) console, written in An
 - _Step by Step_ Patterns panel, with integrated command execution and detection of contextual official [Redis doc](https://github.com/antirez/redis-doc);
 - Command-line and history of Redis Server responses;
 - Command list (divided by categories) and detection of contextual official [Redis doc](https://github.com/antirez/redis-doc);
+- Interactive Command suggestion;
 - Isolated Client sessions.
 
+![redis-patterns-console](https://acadevmy.it/redis-patterns-console.gif "Redis Patterns Console")
+
 _Redis Patterns Console_ is inspired by [Try-Redis](https://try.redis.io/) project.
 
 ### Development server
@@ -28,6 +31,7 @@ Thanks for your future contributions!
 - Stateless Components refactoring and improvements;
 - Continuous refactoring;
 - Blacklist Enum; [TBD]
+- Increase GitHub API calls (with GitHub login) to 5000 (per token);
 - Everythings you notice! 🙏
 
  

package.json

@@ -1,6 +1,6 @@
 {
   "name": "redis-patterns-app",
-  "version": "0.0.0",
+  "version": "1.0.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -23,6 +23,7 @@
     "bootstrap": "^4.3.1",
     "markdown": "^0.5.0",
     "rxjs": "~6.5.3",
+    "serialize-javascript": "^2.1.2",
     "tslib": "^1.9.0",
     "uuid": "^3.3.3",
     "zone.js": "~0.9.1"

src/app/app.component.html

@@ -1,6 +1,6 @@
 <div class="container-fluid d-flex h-100 flex-column">
   <div class="row">
-    <tr-header class="col"></tr-header>
+    <tr-header class="col" [isAuth]="isAuth$ | async"></tr-header>
   </div>
   <div class="row flex-fill" *ngIf="(commandService.commands$ | async) as commands; else loading">
     <div class="d-flex flex-lg-row flex-md-column flex-fill" *ngIf="{activeCommand: commandService.activeCommand$ | async} as data">
@@ -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,29 +1,41 @@
-import { Component } from '@angular/core';
-import { Observable } from 'rxjs';
+import {Component} 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 { GithubDataService } from '@app/core/services/github-data.service';
+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';
 
 @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;
   resetCommand$: Observable<number> = this.redisConnectService.execCommandTime$;
+  isAuth$: Observable<boolean> = this.githubDataService.isAuth;
 
   constructor(
+    private githubDataService: GithubDataService,
     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((previous, current) => (current != null) ? [...previous, current] : [], [])
+    );
+  }
 
   /**
    * Set current command as the active one
@@ -57,15 +69,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/app.module.ts

@@ -1,5 +1,6 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
+import { RouterModule } from '@angular/router';
 
 import { CoreModule } from './core/core.module';
 import { SharedModule } from './shared/shared.module';
@@ -17,7 +18,8 @@ import { AppComponent } from '@app/app.component';
     CoreModule,
     SharedModule,
     CommandModule,
-    PatternModule
+    PatternModule,
+    RouterModule.forRoot([]),
   ],
   bootstrap: [AppComponent]
 })