Adding HeroesComponent, HttpErrorHandlerService and MessageService

GET-request implementation

Author: Demiara

src/app/app.component.html

@@ -1 +1,7 @@
 <h1>HTTP Sample</h1>
+<div>
+    <input type="checkbox" id="heroes" [checked]="showHeroes" (click)="toggleHeroes()" />
+    <label for="heroes">Heroes</label>
+</div>
+
+<app-heroes *ngIf="showHeroes"></app-heroes>

src/app/app.component.ts

@@ -1,9 +1,14 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+    selector: 'app-root',
+    templateUrl: './app.component.html',
+    styleUrls: ['./app.component.css'],
 })
 export class AppComponent {
+    public showHeroes = true;
+
+    public toggleHeroes(): void {
+        this.showHeroes = !this.showHeroes;
+    }
 }

src/app/app.module.ts

@@ -4,7 +4,9 @@ import { FormsModule } from '@angular/forms';
 import { HeroesComponent } from './heroes/heroes.component';
 import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api';
 import { HttpClientModule } from '@angular/common/http';
+import { HttpErrorHandler } from './http-error-handler.service';
 import { InMemoryDataService } from './in-memory-data.service';
+import { MessageService } from './messages/message.service';
 import { NgModule } from '@angular/core';
 
 @NgModule({
@@ -19,7 +21,7 @@ import { NgModule } from '@angular/core';
             put204: false,
         }),
     ],
-    providers: [],
+    providers: [HttpErrorHandler, MessageService],
     bootstrap: [AppComponent],
 })
 export class AppModule {}

src/app/heroes/hero.ts

@@ -0,0 +1,4 @@
+export interface Hero {
+    id: number;
+    name: string;
+}

src/app/heroes/heroes.component.css

@@ -0,0 +1,89 @@
+/* HeroesComponent's private CSS styles */
+.heroes {
+    margin: 0 0 2em 0;
+    list-style-type: none;
+    padding: 0;
+    width: 15em;
+}
+.heroes li {
+    position: relative;
+    cursor: pointer;
+    background-color: #eee;
+    margin: 0.5em;
+    padding: 0.3em 0;
+    height: 1.6em;
+    border-radius: 4px;
+    width: 19em;
+}
+
+.heroes li:hover {
+    color: #607d8b;
+    background-color: #ddd;
+    left: 0.1em;
+}
+
+.heroes a {
+    color: #888;
+    text-decoration: none;
+    position: relative;
+    display: block;
+    width: 250px;
+}
+
+.heroes a:hover {
+    color: #607d8b;
+}
+
+.heroes .badge {
+    display: inline-block;
+    font-size: small;
+    color: white;
+    padding: 0.8em 0.7em 0 0.7em;
+    background-color: #607d8b;
+    line-height: 1em;
+    position: relative;
+    left: -1px;
+    top: -4px;
+    height: 1.8em;
+    min-width: 16px;
+    text-align: right;
+    margin-right: 0.8em;
+    border-radius: 4px 0 0 4px;
+}
+
+.button {
+    background-color: #eee;
+    border: none;
+    padding: 5px 10px;
+    border-radius: 4px;
+    cursor: pointer;
+    cursor: hand;
+    font-family: Arial;
+}
+
+button:hover {
+    background-color: #cfd8dc;
+}
+
+button.delete {
+    position: relative;
+    left: 24em;
+    top: -32px;
+    background-color: gray !important;
+    color: white;
+    display: inherit;
+    padding: 5px 8px;
+    width: 2em;
+}
+
+input {
+    font-size: 100%;
+    margin-bottom: 2px;
+    width: 11em;
+}
+
+.heroes input {
+    position: relative;
+    top: -3px;
+    width: 12em;
+}

src/app/heroes/heroes.component.html

@@ -0,0 +1,10 @@
+<h3>Heroes</h3>
+
+<ul class="heroes">
+    <li *ngFor="let hero of heroes">
+        <a (click)="edit(hero)">
+            <span class="badge">{{ hero.id || -1 }}</span>
+            <span *ngIf="hero !== editHero">{{ hero.name }}</span>
+        </a>
+    </li>
+</ul>

src/app/heroes/heroes.component.ts

@@ -0,0 +1,28 @@
+import { Component, OnInit } from '@angular/core';
+import { Hero } from './hero';
+import { HeroesService } from './heroes.service';
+
+@Component({
+    selector: 'app-heroes',
+    templateUrl: './heroes.component.html',
+    providers: [HeroesService],
+    styleUrls: ['./heroes.component.css'],
+})
+export class HeroesComponent implements OnInit {
+    public editHero: Hero;
+    public heroes: Hero[];
+
+    constructor(private heroesService: HeroesService) {}
+
+    public ngOnInit(): void {
+        this.getHeroes();
+    }
+
+    public getHeroes(): void {
+        this.heroesService.getHeroes().subscribe(heroes => (this.heroes = heroes));
+    }
+
+    public edit(hero: Hero): void {
+        this.editHero = hero;
+    }
+}

src/app/heroes/heroes.service.ts

@@ -0,0 +1,29 @@
+import { catchError } from 'rxjs/operators';
+import { Hero } from './hero';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { HandleError, HttpErrorHandler } from '../http-error-handler.service';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+
+const httpOptions = {
+    headers: new HttpHeaders({
+        'Content-Type': 'application/json',
+        Authorization: 'my-auth-token',
+    }),
+};
+
+@Injectable()
+export class HeroesService {
+    private handleError: HandleError;
+    private readonly heroesUrl = 'api/heroesList';
+
+    constructor(private http: HttpClient, httpErrorHandler: HttpErrorHandler) {
+        this.handleError = httpErrorHandler.createHandleError('HeroesService');
+    }
+
+    public getHeroes(): Observable<Hero[]> {
+        return this.http
+            .get<Hero[]>(this.heroesUrl)
+            .pipe(catchError(this.handleError('getHeroes', [])));
+    }
+}

src/app/http-error-handler.service.ts

@@ -0,0 +1,38 @@
+import { HttpErrorResponse } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { MessageService } from './messages/message.service';
+import { Observable, of } from 'rxjs';
+
+export type HandleError = <T>(
+    operation?: string,
+    result?: T,
+) => (error: HttpErrorResponse) => Observable<T>;
+
+@Injectable()
+export class HttpErrorHandler {
+    constructor(private messageService: MessageService) {}
+
+    createHandleError = (serviceName = '') => <T>(operation = 'operation', result = {} as T) =>
+        this.handleError(serviceName, operation, result);
+
+    /**
+     * Returns a function that handles Http operation failures.
+     * This error handler lets the app continue to run as if no error occurred.
+     * @param serviceName = name of the data service that attempted the operation
+     * @param operation - name of the operation that failed
+     * @param result - optional value to return as the observable result
+     */
+    handleError<T>(serviceName = '', operation = 'operation', result = {} as T) {
+        return (error: HttpErrorResponse): Observable<T> => {
+            console.error(error);
+
+            const message =
+                error.error instanceof ErrorEvent
+                    ? error.error.message
+                    : `server returned code ${error.status} with body "${error.error}"`;
+            this.messageService.add(`${serviceName}: ${operation} failed: ${message}`);
+
+            return of(result);
+        };
+    }
+}

src/app/messages/message.service.ts

@@ -0,0 +1,14 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class MessageService {
+    public messages: string[] = [];
+
+    public add(message: string): void {
+        this.messages.push(message);
+    }
+
+    public clear(): void {
+        this.messages = [];
+    }
+}