Improving error handling (#13)

src/app/public/home-page/home-page.component.html

@@ -11,8 +11,8 @@
 <div *ngIf="isWaitingForParseResult">
     <mat-spinner></mat-spinner>
 </div>
-<div *ngIf="parseResult && parseResult.error">
-  <p class="error">{{ parseResult.error }}</p>
+<div class="error" *ngIf="error">
+  <p>{{ error }}</p>
 </div>
 <mat-list role="list" *ngIf="!isWaitingForParseResult && parseResult && parseResult.ingredientParsed">
     <mat-list-item role="listitem"><span class="fieldName">Quantity</span>: {{ parseResult.ingredientParsed.quantity }}</mat-list-item>

src/app/public/home-page/home-page.component.scss

@@ -23,4 +23,8 @@ span.fieldName {
 
 .error {
   color: red;
+}
+
+div.error {
+  margin-top: 15px;
 }

src/app/public/home-page/home-page.component.ts

@@ -12,21 +12,32 @@ export class HomePageComponent implements OnInit {
   ingredientRaw: string;
   isWaitingForParseResult: boolean = false;
   parseResult: ParseResult;
+  error: string;
 
   constructor(private parserService: ParserService) { }
 
   ngOnInit() {}
 
   parse(raw: string) {
     this.isWaitingForParseResult = true;
+    this.error = null;
+    this.parseResult = null;
     this.parserService.parseIngredient(raw).subscribe(
       (response) => {
         this.isWaitingForParseResult = false;
         this.parseResult = response;
+        if (this.parseResult.error) {
+          this.error = this.parseResult.error;
+        }
       },
       (error) => {
         this.isWaitingForParseResult = false;
         console.log(error);
+        if (error.error && this.isString(error.error)) {
+          this.error = error.error;
+        } else {
+          this.error = error.statusText;
+        }
       });
   }
 
@@ -35,4 +46,8 @@ export class HomePageComponent implements OnInit {
     this.parseResult = null;
   }
 
+  private isString(x) {
+    return Object.prototype.toString.call(x) === '[object String]';
+  }
+
 }