feat: show error notification when HTTP error response received

Author: gultyayev

src/app/app.module.ts

@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core';
+import { NgModule, Provider } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 
 import { AppRoutingModule } from './app-routing.module';
@@ -11,11 +11,21 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { ProductsModule } from './products/products.module';
-import { HttpClientModule } from '@angular/common/http';
+import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
 import { MatBadgeModule } from '@angular/material/badge';
 import { CartModule } from './cart/cart.module';
 import { CONFIG_TOKEN } from './core/injection-tokens/config.token';
 import { environment } from '../environments/environment';
+import { ErrorPrintInterceptor } from './core/interceptors/error-print.interceptor';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+
+const interceptors: Provider[] = [
+  {
+    provide: HTTP_INTERCEPTORS,
+    useClass: ErrorPrintInterceptor,
+    multi: true,
+  },
+];
 
 @NgModule({
   declarations: [AppComponent, HeaderComponent],
@@ -32,8 +42,10 @@ import { environment } from '../environments/environment';
     CartModule,
     HttpClientModule,
     MatBadgeModule,
+    MatSnackBarModule,
   ],
   providers: [
+    interceptors,
     {
       provide: CONFIG_TOKEN,
       useValue: environment,

src/app/core/interceptors/error-print.interceptor.spec.ts

@@ -0,0 +1,19 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ErrorPrintInterceptor } from './error-print.interceptor';
+
+describe('ErrorPrintInterceptor', () => {
+  beforeEach(() =>
+    TestBed.configureTestingModule({
+      providers: [ErrorPrintInterceptor],
+    })
+  );
+
+  it('should be created', () => {
+    const interceptor: ErrorPrintInterceptor = TestBed.inject(
+      ErrorPrintInterceptor
+    );
+
+    expect(interceptor).toBeTruthy();
+  });
+});

src/app/core/interceptors/error-print.interceptor.ts

@@ -0,0 +1,33 @@
+import { Injectable } from '@angular/core';
+import {
+  HttpEvent,
+  HttpHandler,
+  HttpInterceptor,
+  HttpRequest,
+} from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { NotificationService } from '../notification.service';
+import { tap } from 'rxjs/operators';
+
+@Injectable()
+export class ErrorPrintInterceptor implements HttpInterceptor {
+  constructor(private readonly notificationService: NotificationService) {}
+
+  intercept(
+    request: HttpRequest<unknown>,
+    next: HttpHandler
+  ): Observable<HttpEvent<unknown>> {
+    return next.handle(request).pipe(
+      tap({
+        error: () => {
+          const url = new URL(request.url);
+
+          this.notificationService.showError(
+            `Request to "${url.pathname}" failed. Check the console for the details`,
+            0
+          );
+        },
+      })
+    );
+  }
+}

src/app/core/notification.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { NotificationService } from './notification.service';
+
+describe('NotificationService', () => {
+  let service: NotificationService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(NotificationService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/core/notification.service.ts

@@ -0,0 +1,22 @@
+import { Injectable } from '@angular/core';
+import { MatSnackBar } from '@angular/material/snack-bar';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class NotificationService {
+  constructor(private readonly snackBar: MatSnackBar) {}
+
+  /**
+   * Show message with an error
+   *
+   * @param text Error text message
+   * @param duration Duration to close after. 0 to close manually only
+   */
+  showError(text: string, duration = 3000) {
+    this.snackBar.open(text, 'Dismiss', {
+      duration,
+      panelClass: 'shop-snackbar-error',
+    });
+  }
+}

src/styles.scss

@@ -20,3 +20,14 @@ body {
   // Fix vertical alignment for Firefox
   line-height: 1 !important;
 }
+
+// snackbar styles
+.shop-snackbar-error {
+  background-color: #ff0015;
+  color: white;
+
+  button {
+    color: white;
+    border: 1px solid;
+  }
+}