feat: reimplement error component

src/client/shared/error.component.spec.ts

@@ -0,0 +1,14 @@
+import {inject, TestBed} from '@angular/core/testing';
+
+import {ErrorComponent} from './error.component';
+
+describe('ErrorComponent', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({providers: [ErrorComponent]});
+  });
+
+  it('should be initialised', inject([ErrorComponent], (component) => {
+       expect(component.error).toBeFalsy();
+       expect(component.message).toBe('Something went wrong.. ');
+     }));
+});

src/client/shared/error.component.ts

@@ -0,0 +1,15 @@
+import {Component, Input} from '@angular/core';
+
+@Component({
+  selector: 'lb-error',
+  template: `
+  <p *ngIf="error" class="error-item">
+    <lb-icon-error class="error"></lb-icon-error>
+    <span class="error error-text">{{ message }}</span>
+  </p>`
+})
+
+export class ErrorComponent {
+  @Input() error: boolean = false;
+  @Input() message: string = 'Something went wrong.. ';
+}

src/client/shared/loading.component.ts

@@ -4,22 +4,26 @@ import {Observable} from 'rxjs';
 @Component({
   selector: 'lb-loading',
   template: `
-    <ng-content *ngIf="!loading"></ng-content>
-    <lb-icon-load *ngIf="loading"></lb-icon-load>`
+    <ng-content *ngIf="!loading && !error"></ng-content>
+    <lb-icon-load *ngIf="loading"></lb-icon-load>
+    <lb-error [error]="error" [message]="errorMessage"></lb-error>`
 })
 
 export class LoadingComponent implements OnInit {
   loading: boolean = true;
+  error: boolean = false;
+  @Input() loadMessage: string;
+  @Input() errorMessage: string = 'Something went wrong.. ';
   @Input() observable = new Observable<any>();
 
   ngOnInit() {
-    this.loading = true;
     this.observable.subscribe(
         () => {
           this.loading = false;
         },
         () => {
           this.loading = false;
+          this.error = true;
         });
   }
 }

src/client/shared/shared.module.ts

@@ -5,13 +5,14 @@ import {AssetsModule} from '../assets/assets.module';
 
 import {CapitalizePipe} from './capitalize.pipe';
 import {DDragonPipe} from './ddragon.pipe';
+import {ErrorComponent} from './error.component';
 import {LoadingComponent} from './loading.component';
 import {TranslatePipe} from './translate.pipe';
 
 @NgModule({
-  declarations: [CapitalizePipe, DDragonPipe, LoadingComponent, TranslatePipe],
+  declarations: [CapitalizePipe, DDragonPipe, ErrorComponent, LoadingComponent, TranslatePipe],
   imports: [CommonModule, AssetsModule],
-  exports: [CapitalizePipe, DDragonPipe, LoadingComponent, TranslatePipe]
+  exports: [CapitalizePipe, DDragonPipe, ErrorComponent, LoadingComponent, TranslatePipe]
 })
 export class SharedModule {
 }