interceptor by nicolas

src/app/autocomplete/autocomplete.component.ts

@@ -21,7 +21,7 @@ import { CommonModule } from '@angular/common';
         margin: 0px;
         padding: 0px;
         padding-left: 8px;
-      }
+      } 
     .item:hover {
         background: #eee;
       }

src/app/autocomplete/client.service.ts

@@ -1,7 +1,8 @@
-import { HttpClient, HttpParams } from '@angular/common/http';
+import { HttpClient, HttpContext, HttpParams } from '@angular/common/http';
 import { Injectable, inject } from '@angular/core';
 import { Observable } from 'rxjs';
 import { Client } from './client';
+import { IS_LOGGING_ENABLED } from '../interceptors/context-token';
 
 @Injectable({
   providedIn: 'root'
@@ -19,7 +20,10 @@ export class ClientService {
 
     return this._http.get<Client[]>(
       this.CLIENT_URL,
-      { params: params }
+      {
+        params: params,
+        context: new HttpContext().set(IS_LOGGING_ENABLED, true)
+      },
     )
   }
 

src/app/interceptors/context-token.ts

@@ -0,0 +1,5 @@
+// Time code : 1h24
+
+import { HttpContextToken } from "@angular/common/http";
+
+export const IS_LOGGING_ENABLED = new HttpContextToken<boolean>(() => false)

src/app/interceptors/interceptor.service.ts

@@ -1,24 +1,24 @@
-import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
-import { Injectable, inject } from '@angular/core';
-import { Observable } from 'rxjs';
+// import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
+// import { Injectable, inject } from '@angular/core';
+// import { Observable } from 'rxjs';
 
-@Injectable()
-export class LoggingInterceptor implements HttpInterceptor {
+// @Injectable()
+// export class LoggingInterceptor implements HttpInterceptor {
 
-  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+//   intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
 
-    /* Squelette de l'exercice pour la version service 
-        Pour que l'intercepteur fonctionne, voici les providers à utiliser dans le main.ts
-        providers: [
-            provideHttpClient(
-                withInterceptors([
-                    loggingInterceptorFn
-                    ])
-            )
-        ]
-    */
-    console.log(req)
-    return next.handle(req)
-  }
+//     /* Squelette de l'exercice pour la version service 
+//         Pour que l'intercepteur fonctionne, voici les providers à utiliser dans le main.ts
+//         providers: [
+//             provideHttpClient(
+//                 withInterceptors([
+//                     loggingInterceptorFn
+//                     ])
+//             )
+//         ]
+//     */
+//     console.log(req)
+//     return next.handle(req)
+//   }
 
-}
+// }

src/app/interceptors/interceptor.ts

@@ -1,19 +1,44 @@
-import { HttpHandlerFn, HttpInterceptorFn, HttpRequest } from "@angular/common/http";
+import { HttpEvent, HttpHandlerFn, HttpInterceptorFn, HttpRequest, HttpResponse } from "@angular/common/http";
+import { filter, tap } from "rxjs";
+import { LoggingService } from "./logging.service";
+import { inject } from "@angular/core";
+import { IS_LOGGING_ENABLED } from "./context-token";
 
 export const loggingInterceptorFn: HttpInterceptorFn = (
     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
-                    ])
+
+   const loggingService = inject(LoggingService);
+   const isLogged = req.context.get(IS_LOGGING_ENABLED);
+
+
+   if (isLogged) {
+    return next(req).pipe(
+        tap((resp) => resp instanceof HttpResponse ? loggingService.logEvent(resp) : '')
+    )
+   }
+   return next(req).pipe(
+    tap(() => loggingService.logEvent(`isLogged : ${isLogged}`))
+    )
+
+}
+
+export const loggingRequestAndResponseFn: HttpInterceptorFn = (
+    req: HttpRequest<unknown>,
+    next: HttpHandlerFn
+) => {
+
+    const loggingService = inject(LoggingService);
+    const isLogged = req.context.get(IS_LOGGING_ENABLED);
+
+
+    if (isLogged) {
+        return next(req).pipe(
+            tap(
+                (resp) => resp instanceof HttpResponse ? loggingService.logRequestAndresponse(req, resp) : ''
             )
-        ]
-    */
-    console.log(req)
+        )
+    }
     return next(req)
 }

src/app/interceptors/logging.service.ts

@@ -1,13 +1,18 @@
-import { HttpEvent, HttpResponse } from '@angular/common/http';
+import { HttpEvent, HttpRequest, HttpResponse } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 
 @Injectable({
   providedIn: 'root'
 })
 export class LoggingService {
 
-  logEvent(event: HttpEvent<any>) {
-    console.log(event)
+  logEvent(event: HttpEvent<any> | string) {
+    console.log("logEvent : ", event)
   }
 
+  logRequestAndresponse(request: HttpRequest<any>, resp: HttpEvent<any>) {
+    console.warn("log Request : ", request)
+    console.warn("log Response : ", resp)
+  }
+
 }

src/main.ts

@@ -14,8 +14,7 @@ import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptors, withInterceptor
 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 { loggingInterceptorFn, loggingRequestAndResponseFn } from './app/interceptors/interceptor';
 
 /*
 platformBrowserDynamic().bootstrapModule(RxjsAppModule)
@@ -26,7 +25,8 @@ bootstrapApplication(AutocompleteComponent, {
   providers: [
     provideHttpClient(
       withInterceptors([
-        loggingInterceptorFn
+        loggingInterceptorFn,
+        loggingRequestAndResponseFn,
       ])
     )
   ]