Feat/interceptors

eslint.config.js

@@ -55,7 +55,7 @@ module.exports = tseslint.config(
             ['^ngx-', '^@ngx', '^ng-'],
 
             // Third-party packages (primeng)
-            ['^primeng'],
+            ['^@primeng', '^primeng'],
 
             // RxJS packages (rxjs or @rxjs/...)
             ['^rxjs', '^rxjs/operators'],

src/app/app.config.ts

@@ -3,21 +3,22 @@ import { provideStore } from '@ngxs/store';
 
 import { TranslateModule } from '@ngx-translate/core';
 
+import Aura from '@primeng/themes/aura';
 import { ConfirmationService, MessageService } from 'primeng/api';
 import { providePrimeNG } from 'primeng/config';
 
-import { provideHttpClient } from '@angular/common/http';
-import { ApplicationConfig, importProvidersFrom, provideZoneChangeDetection } from '@angular/core';
+import { provideHttpClient, withInterceptors } from '@angular/common/http';
+import { ApplicationConfig, ErrorHandler, importProvidersFrom, provideZoneChangeDetection } from '@angular/core';
 import { provideAnimations } from '@angular/platform-browser/animations';
 import { provideRouter } from '@angular/router';
 
 import { STATES } from '@core/constants/ngxs-states.constant';
 import { provideTranslation } from '@core/helpers/i18n.helper';
 
+import { GlobalErrorHandler } from './core/handlers';
+import { authInterceptor, errorInterceptor } from './core/interceptors';
 import { routes } from './app.routes';
 
-import Aura from '@primeng/themes/aura';
-
 export const appConfig: ApplicationConfig = {
   providers: [
     provideZoneChangeDetection({ eventCoalescing: true }),
@@ -36,9 +37,10 @@ export const appConfig: ApplicationConfig = {
       },
     }),
     provideAnimations(),
-    provideHttpClient(),
+    provideHttpClient(withInterceptors([authInterceptor, errorInterceptor])),
+    importProvidersFrom(TranslateModule.forRoot(provideTranslation())),
     ConfirmationService,
     MessageService,
-    importProvidersFrom(TranslateModule.forRoot(provideTranslation())),
+    { provide: ErrorHandler, useClass: GlobalErrorHandler },
   ],
 };

src/app/core/constants/error-messages.ts

@@ -0,0 +1,8 @@
+export const ERROR_MESSAGES = {
+  400: 'Invalid request. Please check your input.',
+  401: 'You are not authorized to perform this action.',
+  403: `You don't have permission to access this resource.`,
+  404: 'The requested resource was not found.',
+  500: 'An unexpected error occurred. Please try again later.',
+  default: 'An unknown error occurred. Please try again.',
+};

src/app/core/handlers/global-error.handler.ts

@@ -0,0 +1,8 @@
+import { ErrorHandler, Injectable } from '@angular/core';
+
+@Injectable()
+export class GlobalErrorHandler implements ErrorHandler {
+  handleError(error: unknown): void {
+    console.error('Error:', error);
+  }
+}

src/app/core/handlers/index.ts

@@ -0,0 +1 @@
+export { GlobalErrorHandler } from './global-error.handler';

src/app/core/interceptors/auth.interceptor.ts

@@ -0,0 +1,26 @@
+import { Observable } from 'rxjs';
+
+import { HttpEvent, HttpHandlerFn, HttpInterceptorFn, HttpRequest } from '@angular/common/http';
+
+export const authInterceptor: HttpInterceptorFn = (
+  req: HttpRequest<unknown>,
+  next: HttpHandlerFn
+): Observable<HttpEvent<unknown>> => {
+  const authToken = '2rjFZwmdDG4rtKj7hGkEMO6XyHBM2lN7XBbsA1e8OqcFhOWu6Z7fQZiheu9RXtzSeVrgOt';
+  // OBJoUomBgbUuDgQo5JoaSKNya6XaYcd0ojAX1XOLmWi6J2arQPzByxyEi81fHE60drQUWv
+  // UlO9O9GNKgVzJD7pUeY53jiQTKJ4U2znXVWNvh0KZQruoENuILx0IIYf9LoDz7Duq72EIm
+
+  if (authToken) {
+    const authReq = req.clone({
+      setHeaders: {
+        Authorization: `Bearer ${authToken}`,
+        Accept: 'application/vnd.api+json',
+        'Content-Type': 'application/vnd.api+json',
+      },
+    });
+
+    return next(authReq);
+  }
+
+  return next(req);
+};

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

@@ -0,0 +1,33 @@
+import { throwError } from 'rxjs';
+import { catchError } from 'rxjs/operators';
+
+import { HttpErrorResponse, HttpInterceptorFn } from '@angular/common/http';
+import { inject } from '@angular/core';
+
+import { ToastService } from '@osf/shared/services';
+
+import { ERROR_MESSAGES } from '../constants/error-messages';
+
+export const errorInterceptor: HttpInterceptorFn = (req, next) => {
+  const toastService = inject(ToastService);
+
+  return next(req).pipe(
+    catchError((error: HttpErrorResponse) => {
+      let errorMessage: string;
+
+      if (error.error instanceof ErrorEvent) {
+        errorMessage = error.error.message;
+      } else {
+        if (error.error?.errors?.[0]?.detail) {
+          errorMessage = error.error.errors[0].detail;
+        } else {
+          errorMessage = ERROR_MESSAGES[error.status as keyof typeof ERROR_MESSAGES] || ERROR_MESSAGES.default;
+        }
+      }
+
+      toastService.showError(errorMessage);
+
+      return throwError(() => error);
+    })
+  );
+};

src/app/core/interceptors/index.ts

@@ -0,0 +1,2 @@
+export * from './auth.interceptor';
+export * from './error.interceptor';

src/app/core/services/json-api/json-api.service.ts

@@ -1,6 +1,6 @@
 import { map, Observable } from 'rxjs';
 
-import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
+import { HttpClient, HttpParams } from '@angular/common/http';
 import { inject, Injectable } from '@angular/core';
 
 import { JsonApiResponse } from '@core/services/json-api/json-api.entity';
@@ -10,19 +10,10 @@ import { JsonApiResponse } from '@core/services/json-api/json-api.entity';
 })
 export class JsonApiService {
   http: HttpClient = inject(HttpClient);
-  readonly #token = 'Bearer 2rjFZwmdDG4rtKj7hGkEMO6XyHBM2lN7XBbsA1e8OqcFhOWu6Z7fQZiheu9RXtzSeVrgOt';
-  // OBJoUomBgbUuDgQo5JoaSKNya6XaYcd0ojAX1XOLmWi6J2arQPzByxyEi81fHE60drQUWv
-  // UlO9O9GNKgVzJD7pUeY53jiQTKJ4U2znXVWNvh0KZQruoENuILx0IIYf9LoDz7Duq72EIm
-  readonly #headers = new HttpHeaders({
-    Authorization: this.#token,
-    Accept: 'application/vnd.api+json',
-    'Content-Type': 'application/vnd.api+json',
-  });
 
   get<T>(url: string, params?: Record<string, unknown>): Observable<T> {
     return this.http.get<T>(url, {
       params: this.buildHttpParams(params),
-      headers: this.#headers,
     });
   }
 
@@ -49,25 +40,20 @@ export class JsonApiService {
   post<T>(url: string, body: unknown, params?: Record<string, unknown>): Observable<T> {
     return this.http
       .post<JsonApiResponse<T, null>>(url, body, {
-        headers: this.#headers,
         params: this.buildHttpParams(params),
       })
       .pipe(map((response) => response.data));
   }
 
   patch<T>(url: string, body: unknown): Observable<T> {
-    return this.http
-      .patch<JsonApiResponse<T, null>>(url, body, { headers: this.#headers })
-      .pipe(map((response) => response.data));
+    return this.http.patch<JsonApiResponse<T, null>>(url, body).pipe(map((response) => response.data));
   }
 
   put<T>(url: string, body: unknown): Observable<T> {
-    return this.http
-      .put<JsonApiResponse<T, null>>(url, body, { headers: this.#headers })
-      .pipe(map((response) => response.data));
+    return this.http.put<JsonApiResponse<T, null>>(url, body).pipe(map((response) => response.data));
   }
 
   delete(url: string, body?: unknown): Observable<void> {
-    return this.http.delete<void>(url, { headers: this.#headers, body: body });
+    return this.http.delete<void>(url, { body: body });
   }
 }

src/assets/styles/overrides/toast.scss

@@ -1,19 +1,15 @@
-.p-toast-message-icon {
-  display: none;
+.p-toast-message-content {
+  align-items: center;
 }
 
-.p-toast-summary {
-  --p-toast-summary-font-weight: 700;
+.p-toast-message-icon {
+  display: none;
 }
 
 .p-toast-detail {
   display: none;
 }
 
-.p-toast-close-button {
-  margin: -10% 0 0 0;
-}
-
 .p-toast-message-success {
   --p-toast-success-border-color: transparent;
   --p-toast-success-color: var(--white);