feat(interceptor): exo slide 17 jlq

src/app/autocomplete/autocomplete.component.ts

@@ -1,8 +1,8 @@
-import { AfterViewChecked, AfterViewInit, Component, ElementRef, OnDestroy, ViewChild, inject } from '@angular/core';
-import { ClientService } from './client.service';
-import { Observable, Subscription, concatAll, concatMap, debounce, debounceTime, distinctUntilChanged, exhaustMap, filter, fromEvent, map, merge, mergeAll, mergeMap, switchAll, switchMap, tap } from 'rxjs';
-import { Client } from './client';
-import { CommonModule } from '@angular/common';
+import {AfterViewInit, Component, ElementRef, inject, ViewChild} from '@angular/core';
+import {ClientService} from './client.service';
+import {debounceTime, distinctUntilChanged, filter, fromEvent, map, Observable, switchMap} from 'rxjs';
+import {Client} from './client';
+import {CommonModule} from '@angular/common';
 
 @Component({
   selector: 'app-root',
@@ -18,18 +18,21 @@ import { CommonModule } from '@angular/common';
   `,
   styles: `
     .item {
-        margin: 0px;
-        padding: 0px;
-        padding-left: 8px;
-      }
+      margin: 0px;
+      padding: 0px;
+      padding-left: 8px;
+    }
+
     .item:hover {
-        background: #eee;
-      }
+      background: #eee;
+    }
+
     .border {
       width: 500px;
       padding: 0px;
       margin: 0px
     }
+
     input {
       width: 500px;
       margin-bottom: 0px

src/app/interceptors/context.token.ts

@@ -0,0 +1,3 @@
+import {HttpContextToken} from "@angular/common/http";
+
+export const USER_IS_LOGGED = new HttpContextToken<boolean>(() => false)

src/app/interceptors/interceptor.ts

@@ -1,19 +1,21 @@
-import { HttpHandlerFn, HttpInterceptorFn, HttpRequest } from "@angular/common/http";
+import {HttpEvent, HttpHandlerFn, HttpInterceptorFn, HttpRequest, HttpResponse} from "@angular/common/http";
+import {inject} from "@angular/core";
+import {LoggingService} from "./logging.service";
+import {tap} from "rxjs";
+import {USER_IS_LOGGED} from "./context.token";
+
 
 export const loggingInterceptorFn: HttpInterceptorFn = (
-    req: HttpRequest<unknown>,
-    next: HttpHandlerFn
+  req: HttpRequest<unknown>,
+  next: HttpHandlerFn
 ) => {
-    /* Squelette de l'exercice pour la version fonction 
-    Pour que l'intercepteur fonctionne, voici les providers à utiliser dans le main.ts
-        providers: [
-            provideHttpClient(
-                withInterceptors([
-                    loggingInterceptorFn
-                    ])
-            )
-        ]
-    */
-    console.log(req)
-    return next(req)
-}
+  const loggingService = inject(LoggingService)
+  if (USER_IS_LOGGED) {
+    return next(req).pipe(
+      tap((event: HttpEvent<any>) => {
+        loggingService.logEvent(event as HttpResponse<any>)
+      })
+    )
+  }
+  return next(req)
+}

src/app/interceptors/logging.service.ts

@@ -1,12 +1,12 @@
-import { HttpEvent, HttpResponse } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import {HttpResponse} from '@angular/common/http';
+import {Injectable} from '@angular/core';
 
 @Injectable({
   providedIn: 'root'
 })
 export class LoggingService {
 
-  logEvent(event: HttpEvent<any>) {
+  logEvent(event: HttpResponse<any>) {
     console.log(event)
   }
 

src/main.ts

@@ -1,21 +1,7 @@
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { ApplicationConfig, bootstrapApplication } from '@angular/platform-browser';
-import { PipesArrayComponent } from './app/pipes-exercice/pipes-array.component';
-import { VideoPlayerComponent } from './app/video-player/video-player.component';
-import { AppModule } from './app/demo-project/app.module';
-import { AppComponent } from './app/demo-project/app.component';
-import { FolderComponent } from './app/folder-component/folder.component';
-import { TreeComponent } from './app/folder-component/tree.component';
-import { DependencyInjectionModule } from './app/dependency-injection/dependency-injection.module';
-import { HostComponent } from './app/host/host.component';
-import { ViewQueryComponent } from './app/view-query/view-query.component';
-import { MyAsyncComponent } from './app/rxjs/my-async.component';
-import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptors, withInterceptorsFromDi } from '@angular/common/http';
-import { AutocompleteComponent } from './app/autocomplete/autocomplete.component';
-import { RxjsOperateursComponent } from './app/rxjs-operateurs/rxjs-operateurs.component';
-import { RxjsAppModule } from './app/rxjs-app/app/rxjs-app.module';
-import { loggingInterceptorFn } from './app/interceptors/interceptor';
-import { LoggingInterceptor } from './app/interceptors/interceptor.service';
+import {bootstrapApplication} from '@angular/platform-browser';
+import {provideHttpClient, withInterceptors} from '@angular/common/http';
+import {AutocompleteComponent} from './app/autocomplete/autocomplete.component';
+import {loggingInterceptorFn} from './app/interceptors/interceptor';
 
 /*
 platformBrowserDynamic().bootstrapModule(RxjsAppModule)