Merge pull request #65 from fischermatte/error-handling-improvement

Error handling improvement

api/openapi-2/geolud-api.yml

@@ -1,6 +1,6 @@
 swagger: "2.0"
 info:
-  version: 1.4.5
+  version: 1.4.6
   title: Swagger Geolud
   license:
     name: MIT

api/openapi-3/geolud-api.yml

@@ -1,6 +1,6 @@
 openapi: "3.0.0"
 info:
-  version: 1.4.5
+  version: 1.4.6
   title: Swagger Petstore
   license:
     name: WTFPL

geolud-client/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "geolud-client-express",
-  "version": "1.4.5",
+  "version": "1.4.6",
   "dependencies": {
     "express": "^4.16.3"
   },

geolud-client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "geolud-client",
-  "version": "1.4.5",
+  "version": "1.4.6",
   "license": "MIT",
   "scripts": {
     "ng": "ng",
@@ -34,6 +34,7 @@
     "lato-font": "^3.0.0",
     "montserrat-font": "github:fischermatte/montserrat-font#v1.0.1",
     "ng-block-ui": "1.0.4",
+    "ngx-toastr": "^8.8.0",
     "rxjs": "^6.1.0",
     "rxjs-compat": "^6.1.0",
     "startbootstrap-freelancer": "github:fischermatte/startbootstrap-freelancer#4.1.1",

geolud-client/pom.xml

@@ -4,7 +4,7 @@
   <modelVersion>4.0.0</modelVersion>
 
   <artifactId>geolud-client</artifactId>
-  <version>1.4.5</version>
+  <version>1.4.6</version>
   <properties>
     <frontend-maven-plugin.version>1.6</frontend-maven-plugin.version>
     <maven-clean-plugin.version>2.6.1</maven-clean-plugin.version>
@@ -17,7 +17,7 @@
   <parent>
     <groupId>io.fischermatte</groupId>
     <artifactId>geolud</artifactId>
-    <version>1.4.5</version>
+    <version>1.4.6</version>
   </parent>
 
   <dependencies>

geolud-client/src/app/app.component.html

@@ -82,7 +82,7 @@ <h3 class="text-uppercase">Contact</h3>
       <div class="row">
         <div class="col-lg-12 text-center">
           Copyright © Georg Ludewig 2017<br>
-          Version 1.4.5
+          Version 1.4.6
         </div>
       </div>
     </div>

geolud-client/src/app/app.module.ts

@@ -13,9 +13,12 @@ import {HomeComponent} from './home/home.component';
 import {BlockUIModule} from 'ng-block-ui';
 import {RestHttpInterceptor} from './core/rest.http.interceptor';
 import {ChatComponent} from './chat/chat.component';
+import {ToastrModule} from 'ngx-toastr';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {AppConfigService} from './app-config.service';
 import {ServiceWorkerModule} from '@angular/service-worker';
 import {environment} from '../environments/environment';
+import {ToastrService} from 'ngx-toastr/toastr/toastr.service';
 
 export function loadConfig(appConfigService: AppConfigService) {
   return () => appConfigService.loadConfig();
@@ -34,9 +37,14 @@ export function loadConfig(appConfigService: AppConfigService) {
     NgbModule.forRoot(),
     BrowserModule,
     BlockUIModule.forRoot(),
+    ToastrModule.forRoot({
+      preventDuplicates: true,
+      tapToDismiss: true
+    }),
     FormsModule,
     HttpClientModule,
     AppRoutingModule,
+    BrowserAnimationsModule,
     ServiceWorkerModule.register('/ngsw-worker.js', {enabled: environment.production})
   ],
   providers: [

geolud-client/src/app/chat/chat.component.spec.ts

@@ -1,18 +1,19 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { ChatComponent } from './chat.component';
+import {ChatComponent} from './chat.component';
 import {FormsModule} from '@angular/forms';
+import {ToastrModule} from 'ngx-toastr';
 
 describe('ChatComponent', () => {
   let component: ChatComponent;
   let fixture: ComponentFixture<ChatComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ ChatComponent ],
-      imports: [FormsModule]
+      declarations: [ChatComponent],
+      imports: [FormsModule, ToastrModule.forRoot()]
     })
-    .compileComponents();
+      .compileComponents();
   }));
 
   beforeEach(() => {

geolud-client/src/app/chat/chat.component.ts

@@ -1,7 +1,6 @@
 import {AfterViewChecked, Component, ElementRef, OnInit, ViewChild} from '@angular/core';
 import {ChatEntry, ChatMessage, ChatMessageType, ChatUser} from './chat.model';
 import {ChatService} from './chat.service';
-import {Subscription} from 'rxjs/Subscription';
 
 @Component({
   selector: 'app-chat',

geolud-client/src/app/chat/chat.service.spec.ts

@@ -1,11 +1,14 @@
-import { TestBed, inject } from '@angular/core/testing';
+import {TestBed, inject} from '@angular/core/testing';
 
-import { ChatService } from './chat.service';
+import {ChatService} from './chat.service';
+import {ToastrModule} from 'ngx-toastr';
+import {FormsModule} from '@angular/forms';
 
 describe('ChatService', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
-      providers: [ChatService]
+      providers: [ChatService],
+      imports: [ToastrModule.forRoot()]
     });
   });
 

geolud-client/src/app/chat/chat.service.ts

@@ -4,6 +4,7 @@ import {environment} from '../../environments/environment';
 import {Observable} from 'rxjs/Observable';
 import {BehaviorSubject} from 'rxjs/BehaviorSubject';
 import {ChatEntry, ChatMessage, ChatMessageType, ChatUser} from './chat.model';
+import {AlertService} from '../core/alert/alert.service';
 
 
 @Injectable({
@@ -16,7 +17,7 @@ export class ChatService {
   private currentUser: ChatUser;
   private messages: ChatEntry[] = [];
 
-  constructor() {
+  constructor(private alertService: AlertService) {
     this.userSubject.subscribe(user => {
       this.handleUserLogin(user);
     });
@@ -39,7 +40,9 @@ export class ChatService {
         isFromCurrentUser: this.isMessageOfCurrentUser(message),
         isLogin: message.type === ChatMessageType.LOGIN
       };
-    }).subscribe(entry => this.messages.push(entry));
+    }).subscribe(
+      entry => this.messages.push(entry),
+      error => this.alertService.addError('Websocket Issue', error));
   }
 
   public getMessages(): ChatEntry [] {

geolud-client/src/app/contact/contact.component.html

@@ -2,11 +2,6 @@
   <div class="container">
     <h2 class="text-center">Contact Me</h2>
     <hr class="star-dark">
-    <div class="row" *ngIf="feedback">
-      <div class="col-lg-8 mx-auto">
-        <ngb-alert [type]="feedback.type" (close)="closeAlert()">{{ feedback.message }}</ngb-alert>
-      </div>
-    </div>
     <div class="row">
       <div class="col-lg-8 mx-auto">
         <form (ngSubmit)="onSubmit()" name="sentMessage" id="contactForm" #contactForm="ngForm" class="was-validated" novalidate>

geolud-client/src/app/contact/contact.component.spec.ts

@@ -4,6 +4,7 @@ import {ContactComponent} from './contact.component';
 import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
 import {FormsModule} from '@angular/forms';
 import {HttpClientModule} from '@angular/common/http';
+import {ToastrModule} from 'ngx-toastr';
 
 describe('ContactComponent', () => {
   let component: ContactComponent;
@@ -12,7 +13,7 @@ describe('ContactComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       imports: [
-        NgbModule.forRoot(), FormsModule, HttpClientModule
+        NgbModule.forRoot(), FormsModule, HttpClientModule, ToastrModule.forRoot()
       ],
       declarations: [ContactComponent]
     })

geolud-client/src/app/contact/contact.component.ts

@@ -3,7 +3,7 @@ import {HttpClient} from '@angular/common/http';
 import {Title} from '@angular/platform-browser';
 import {ContactRequest} from '../../generated-api/model/contactRequest';
 import {environment} from '../../environments/environment';
-import {Alert} from '../core/alert';
+import {AlertService} from '../core/alert/alert.service';
 
 @Component({
   selector: 'app-contact',
@@ -13,10 +13,9 @@ import {Alert} from '../core/alert';
 export class ContactComponent implements OnInit {
 
   contactRequest: ContactRequest;
-  feedback: Alert;
   @ViewChild('contactForm') contactForm: any;
 
-  constructor(private http: HttpClient, title: Title) {
+  constructor(private http: HttpClient, private alertService: AlertService, title: Title) {
     title.setTitle('Georg Ludewig - Software Engineer - Contact');
   }
 
@@ -28,18 +27,12 @@ export class ContactComponent implements OnInit {
     if (this.contactForm.valid) {
       // note we set the response type to text due to this issue:  https://github.com/angular/angular/issues/18680
       this.http.post(environment.appConfig.apiBase + '/v1/contact', this.contactRequest, {responseType: 'text'}).subscribe(
-        response => {
-          this.feedback = <Alert>{
-            type: 'success',
-            message: 'Contact request was submitted!'
-          };
+        () => {
+          this.alertService.addSuccess('Contact request was submitted!');
           this.contactForm.reset();
         },
         error => {
-          this.feedback = <Alert>{
-            type: 'danger',
-            message: 'Failed to submit contact request due to some very mysterious reasons !'
-          };
+          this.alertService.addError('Failed to submit contact request due to some very mysterious reasons !', error);
         },
         () => {
           window.scrollTo(0, 0);
@@ -48,9 +41,5 @@ export class ContactComponent implements OnInit {
     }
   }
 
-  public closeAlert() {
-    this.feedback = null;
-  }
-
 
 }