Add http error messages

frontend/src/app/containers/bookmark-list/bookmark-list.component.html

@@ -4,7 +4,11 @@
   <span *ngIf="bookmarks.length === 0">You have no bookmarks :(</span>
 </div>
 
-<div *ngIf="isLoading" class="spinner">
+<div *ngIf="isLoading && !message" class="spinner">
   <mat-spinner></mat-spinner>
 </div>
 
+<div *ngIf="message" class="spinner">
+  <span>{{message}}</span>
+</div>
+

frontend/src/app/containers/bookmark-list/bookmark-list.component.ts

@@ -2,9 +2,10 @@ import {Component, OnDestroy, OnInit} from '@angular/core';
 import {Region} from '../../interfaces/region.interface';
 import {BookmarkService} from '../../services/bookmark.service';
 import {DataService} from '../../services/data.service';
-import {switchMap, takeUntil, tap} from 'rxjs/operators';
+import {catchError, switchMap, takeUntil, tap} from 'rxjs/operators';
 import {Router} from '@angular/router';
 import {Subject} from 'rxjs';
+import {HttpErrorResponse} from '@angular/common/http';
 
 @Component({
   selector: 'app-bookmark-list',
@@ -15,6 +16,7 @@ export class BookmarkListComponent implements OnInit, OnDestroy {
 
   bookmarks: Region[];
   isLoading = true;
+  message: string;
   private destroyed$ = new Subject<void>();
 
   constructor(private bs: BookmarkService, private ds: DataService, private router: Router) {
@@ -27,9 +29,14 @@ export class BookmarkListComponent implements OnInit, OnDestroy {
       switchMap(ids => {
         const regions: Promise<Region>[] = ids.map(id => this.ds.getRegion(id));
         return Promise.all(regions);
+      }),
+      catchError((err, caught) => {
+        this.message = `${(err as HttpErrorResponse).status}: ${(err as HttpErrorResponse).statusText} :/`;
+        return caught;
       })
     ).subscribe(regions => {
       this.bookmarks = regions;
+      this.message = undefined;
       this.isLoading = false;
     });
   }

frontend/src/app/containers/home/home.component.html

@@ -1,6 +1,9 @@
 <app-search-input></app-search-input>
 <h2>Explore the world</h2>
-<div class="region-container">
+<div *ngIf="!loading && !message" class="region-container">
+  <span>No regions to explore :/</span>
   <app-region (click)="onRegionClick(region)" *ngFor="let region of regions" [region]="region"></app-region>
 </div>
+<mat-spinner *ngIf="loading" class="central"></mat-spinner>
+<span *ngIf="message" class="central">{{message}}</span>
 

frontend/src/app/containers/home/home.component.scss

@@ -12,8 +12,14 @@ app-search-input {
 .region-container {
   display: flex;
   flex-direction: column;
+  align-items: center;
 
   > app-region {
     margin-bottom: 2rem;
   }
 }
+
+.central {
+  align-self: center;
+  margin: 4rem 0;
+}

frontend/src/app/containers/home/home.component.ts

@@ -2,6 +2,7 @@ import {Component, OnInit} from '@angular/core';
 import {Region} from '../../interfaces/region.interface';
 import {DataService} from '../../services/data.service';
 import {Router} from '@angular/router';
+import {HttpErrorResponse} from '@angular/common/http';
 
 @Component({
   selector: 'app-home',
@@ -13,12 +14,21 @@ export class HomeComponent implements OnInit {
   private readonly MAX_REGIONS = 10;
 
   regions: Region[];
+  message: string;
+  loading = true;
 
   constructor(private ds: DataService, private router: Router) {
   }
 
   async ngOnInit() {
-    this.regions = await this.ds.getAllRegions(this.MAX_REGIONS);
+    try {
+      this.regions = await this.ds.getAllRegions(this.MAX_REGIONS);
+    } catch (e) {
+      this.message = `${(e as HttpErrorResponse).status}: ${(e as HttpErrorResponse).statusText} :/`;
+    } finally {
+      this.loading = false;
+    }
+
   }
 
   onRegionClick(region: Region) {