Functional HTTP interceptors #9696

Ecodev · Jul 24, 2023 · 02fbf32 · 02fbf32
1 parent 7e15d2e
commit 02fbf32
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 31 deletions.
diff --git a/client/app/shared/services/activity-interceptor.ts b/client/app/shared/services/activity-interceptor.ts
@@ -0,0 +1,14 @@
+import {inject} from '@angular/core';
+import {HttpInterceptorFn} from '@angular/common/http';
+import {finalize} from 'rxjs/operators';
+import {NetworkActivityService} from './network-activity.service';
+
+/**
+ * Intercept HTTP request from Angular to show them as activity
+ */
+export const activityInterceptor: HttpInterceptorFn = (req, next) => {
+    const networkActivityService = inject(NetworkActivityService);
+    networkActivityService.increase();
+
+    return next(req).pipe(finalize(() => networkActivityService.decrease()));
+};
diff --git a/client/app/shared/services/network-interceptor.service.ts b/client/app/shared/services/network-interceptor.service.ts
diff --git a/client/main.ts b/client/main.ts
@@ -9,8 +9,8 @@ import {MAT_TOOLTIP_DEFAULT_OPTIONS, MatTooltipDefaultOptions} from '@angular/ma
 import {apolloOptionsProvider} from './app/shared/config/apolloDefaultOptions';
 import {LocalizedPaginatorIntlService} from './app/shared/services/localized-paginator-intl.service';
 import {DATE_PIPE_DEFAULT_OPTIONS, registerLocaleData} from '@angular/common';
-import {NetworkInterceptorService} from './app/shared/services/network-interceptor.service';
-import {HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi} from '@angular/common/http';
+import {activityInterceptor} from './app/shared/services/activity-interceptor';
+import {provideHttpClient, withInterceptors} from '@angular/common/http';
 import {MAT_PAGINATOR_DEFAULT_OPTIONS, MatPaginatorIntl} from '@angular/material/paginator';
 import {
     DateAdapter,
@@ -82,11 +82,6 @@ bootstrapApplication(AppComponent, {
                 formFieldAppearance: 'fill',
             },
         },
-        {
-            provide: HTTP_INTERCEPTORS,
-            useClass: NetworkInterceptorService,
-            multi: true,
-        },
         {
             provide: LOCALE_ID,
             useValue: 'fr-CH',
@@ -103,7 +98,7 @@ bootstrapApplication(AppComponent, {
         },
         apolloOptionsProvider,
         {provide: MAT_TOOLTIP_DEFAULT_OPTIONS, useValue: matTooltipCustomConfig},
-        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClient(withInterceptors([activityInterceptor])),
         provideRouter(
             routes,
             withRouterConfig({