Update client packages (#24)

* Update packages and angular

* Add ng cli in deps

client/.browserslistrc

@@ -0,0 +1,17 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR
+not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.

client/angular.json

@@ -0,0 +1,106 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "client": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:application": {
+          "strict": true
+        }
+      },
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "tsconfig.app.json",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.css"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1.5mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "browserTarget": "client:build:production"
+            },
+            "development": {
+              "browserTarget": "client:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "client:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "tsconfig.spec.json",
+            "karmaConfig": "karma.conf.js",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.css"
+            ],
+            "scripts": []
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "client"
+}

client/package.json

@@ -6,45 +6,42 @@
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build",
-    "build-prod": "ng build --prod",
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e"
   },
   "private": true,
   "dependencies": {
-    "@angular/common": "^4.0.0",
-    "@angular/compiler": "^4.0.0",
-    "@angular/core": "^4.0.0",
-    "@angular/forms": "^4.0.0",
-    "@angular/http": "^4.0.0",
-    "@angular/platform-browser": "^4.0.0",
-    "@angular/platform-browser-dynamic": "^4.0.0",
-    "@angular/router": "^4.0.0",
-    "@angular/cli": "1.0.1",
-    "@angular/compiler-cli": "^4.0.0",
-    "@types/moment-timezone": "^0.2.34",
-    "core-js": "^2.4.1",
-    "moment": "^2.18.1",
-    "moment-timezone": "^0.5.13",
-    "rxjs": "^5.1.0",
-    "zone.js": "^0.8.4"
+    "@angular-devkit/build-angular": "~12.0.3",
+    "@angular/cli": "~12.0.3",
+    "@angular/compiler-cli": "~12.0.3",
+    "@angular/common": "~12.0.3",
+    "@angular/compiler": "~12.0.3",
+    "@angular/core": "~12.0.3",
+    "@angular/forms": "~12.0.3",
+    "@angular/platform-browser": "~12.0.3",
+    "@angular/platform-browser-dynamic": "~12.0.3",
+    "backoff-rxjs": "^6.5.7",
+    "moment": "~2.29.1",
+    "moment-timezone": "~0.5.33",
+    "rxjs": "~7.1.0",
+    "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@types/jasmine": "2.5.38",
-    "@types/node": "~6.0.60",
-    "codelyzer": "~2.0.0",
-    "jasmine-core": "~2.5.2",
-    "jasmine-spec-reporter": "~3.2.0",
-    "karma": "~1.4.1",
-    "karma-chrome-launcher": "~2.0.0",
-    "karma-cli": "~1.0.1",
-    "karma-coverage-istanbul-reporter": "^0.2.0",
-    "karma-jasmine": "~1.1.0",
-    "karma-jasmine-html-reporter": "^0.2.2",
-    "protractor": "~5.1.0",
-    "ts-node": "~2.0.0",
-    "tslint": "~4.5.0",
-    "typescript": "~2.2.0"
+    "@types/jasmine": "~3.6.0",
+    "@types/node": "^12.11.1",
+    "codelyzer": "~6.0.2",
+    "jasmine-core": "~3.7.1",
+    "jasmine-spec-reporter": "~7.0.0",
+    "karma": "~6.3.3",
+    "karma-chrome-launcher": "~3.1.0",
+    "karma-cli": "~2.0.0",
+    "karma-coverage-istanbul-reporter": "~3.0.3",
+    "karma-jasmine": "~4.0.1",
+    "karma-jasmine-html-reporter": "^1.6.0",
+    "protractor": "~7.0.0",
+    "ts-node": "~10.0.0",
+    "tslint": "~6.1.3",
+    "typescript": "~4.2.3"
   }
 }

client/src/app/app.component.ts

@@ -1,24 +1,15 @@
 import { Component, OnInit, OnDestroy, ElementRef, ViewChild } from '@angular/core';
 import { environment } from '../environments/environment';
-import { Observable } from 'rxjs/Observable';
-import { Subject } from 'rxjs/Subject';
-import 'rxjs/add/operator/takeUntil';
-import 'rxjs/add/operator/take';
-import 'rxjs/add/operator/filter';
-import 'rxjs/add/operator/retryWhen';
-import 'rxjs/add/operator/mergeMap';
-import 'rxjs/add/operator/delayWhen';
-import 'rxjs/add/observable/zip';
-import 'rxjs/add/observable/range';
-import 'rxjs/add/observable/timer';
-import 'rxjs/add/observable/interval';
-import 'rxjs/add/observable/dom/webSocket';
+import { Subject, interval } from 'rxjs';
+import { webSocket } from 'rxjs/webSocket';
+import { retryBackoff } from 'backoff-rxjs';
+import { takeUntil, take, filter, delayWhen } from 'rxjs/operators';
 
 import * as moment from 'moment';
 import 'moment-timezone';
 
 @Component({
-  selector: 'body',
+  selector: 'app-root',
   templateUrl: './app.component.html'
 })
 export class AppComponent implements OnInit, OnDestroy {
@@ -29,38 +20,44 @@ export class AppComponent implements OnInit, OnDestroy {
   private timezone: string = moment.tz.guess();
   @ViewChild('chatMsgs') private chatScrollContainer: ElementRef;
 
-  userMsg: string = '';
+  userMsg = '';
   msgs: Array<Object> = [];
-  botIsTyping: boolean = false;
+  botIsTyping = false;
 
   constructor(private bodyEl: ElementRef) { }
 
   ngOnInit() {
     //
     // The WebSocket Observable
-    this.ws$ = Observable.webSocket(this.wsUrl);
+    this.ws$ = webSocket(this.wsUrl);
 
     //
     // Get the sessionId on connecting to the WS:
     //  we need to do this only once, and we are only
     //  concerned aboout the messages containing the sessionId
-    this.ws$.filter(r => r.type === 'sessionId')
-      .takeUntil(this.ngUnsubscribe$).take(1)
+    this.ws$.pipe(
+      filter(r => r.type === 'sessionId'),
+      takeUntil(this.ngUnsubscribe$),
+      take(1)
+    )
       .subscribe(r => this.wsSessionId = r.msg);
 
     //
     // Get responses from the bot, and show them
-    //  (attempt to reconnect on connection fail, retry 3 times)
-    this.ws$.takeUntil(this.ngUnsubscribe$)
-      .filter(r => r.type === 'bot')
-      .retryWhen(err$ =>
-        Observable.zip(err$, Observable.range(1, 10), (e, n) => n)
-          .mergeMap(retryCount => Observable.timer(1000 * retryCount))
-      )
-      .delayWhen(input => Observable.interval(100 + input.msg.length * 10))
-      .subscribe(
-        (msg) => this.pushMsg(msg)
-      );
+    //  (attempt to reconnect if connection fails or breaks)
+    this.ws$.pipe(
+      retryBackoff({
+        initialInterval: 100,
+        maxRetries: 10,
+        maxInterval: 1500,
+        resetOnSuccess: true
+      }),
+      takeUntil(this.ngUnsubscribe$),
+      filter(r => r.type === 'bot'),
+      delayWhen(input => interval(100 + input.msg.length * 10))
+    )
+      .subscribe(msg => this.pushMsg(msg));
+
   }
 
   onSubmit() {
@@ -85,14 +82,14 @@ export class AppComponent implements OnInit, OnDestroy {
 
   private scrollChatToBottom() {
     setTimeout(() => {
-       try {
-        this.bodyEl.nativeElement.scrollTop = this.bodyEl.nativeElement.scrollHeight;
-      } catch(err) { }
-    }, 0);
+      try {
+        window.scrollTo(0, document.body.scrollHeight);
+      } catch (err) { }
+    }, 100);
   }
 
   ngOnDestroy() {
-    this.ngUnsubscribe$.next();
+    this.ngUnsubscribe$.next('');
     this.ngUnsubscribe$.complete();
   }
 }

client/src/app/app.module.ts

@@ -1,7 +1,6 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { HttpModule } from '@angular/http';
 
 import { AppComponent } from './app.component';
 
@@ -11,8 +10,7 @@ import { AppComponent } from './app.component';
   ],
   imports: [
     BrowserModule,
-    FormsModule,
-    HttpModule
+    FormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]