refactor(app): change alert service logic into a toast stack component

Author: Ismaestro

Diff for: eslint.config.mjs

@@ -134,6 +134,7 @@ export default tsEslint.config(
       'unicorn/no-null': 'off',
       'unicorn/prefer-global-this': 'off',
       'unicorn/consistent-function-scoping': 'off',
+      'unicorn/prefer-dom-node-dataset': 'off',
     },
   },
   {

Diff for: src/app/app.component.html

@@ -1,4 +1,5 @@
 <app-progress-bar />
+<app-toast-stack />
 <button i18n class="app__content-skip-button" type="button" (click)="focusFirstHeading()">
   Skip to main content
 </button>

Diff for: src/app/app.component.ts

@@ -10,8 +10,7 @@ import { HeaderService } from '~core/services/header.service';
 import { ProgressBarComponent } from '~core/components/progress-bar/progress-bar.component';
 import { CookiePopupComponent } from '~core/components/cookie-popup/cookie-popup.component';
 import { toSignal } from '@angular/core/rxjs-interop';
-
-import '@shoelace-style/shoelace/dist/components/alert/alert.js';
+import { ToastStackComponent } from '~core/components/toast-stack/toast-stack.component';
 
 @Component({
   selector: 'app-root',
@@ -24,6 +23,7 @@ import '@shoelace-style/shoelace/dist/components/alert/alert.js';
     FooterComponent,
     ProgressBarComponent,
     CookiePopupComponent,
+    ToastStackComponent,
   ],
 })
 export class AppComponent {

Diff for: src/app/core/components/toast-stack/toast-stack.component.html

@@ -0,0 +1,14 @@
+@for (alert of alerts(); track alert.id) {
+  <sl-alert
+    #alertReference
+    i18n
+    closable
+    [id]="alert.id"
+    [attr.countdown]="alert.hasCountdown ? 'rtl' : null"
+    [attr.duration]="alert.duration?.toString() || null"
+    [attr.variant]="alert.type"
+    [class]="'alert--' + alert.type"
+    [innerHtml]="alert.message"
+    (sl-after-hide)="removeFromAlerts(alert)"
+  />
+}

Diff for: src/app/core/components/toast-stack/toast-stack.component.ts

@@ -0,0 +1,44 @@
+import type { ElementRef } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  CUSTOM_ELEMENTS_SCHEMA,
+  effect,
+  inject,
+  viewChildren,
+} from '@angular/core';
+import { AlertService } from '~core/services/alert.service';
+import type { Alert } from '~core/constants/alerts.constants';
+
+import '@shoelace-style/shoelace/dist/components/alert/alert.js';
+
+@Component({
+  selector: 'app-toast-stack',
+  templateUrl: './toast-stack.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class ToastStackComponent {
+  private readonly alertService = inject(AlertService);
+  private readonly toastedAlertIds = new Set<string>();
+  private readonly alertElements = viewChildren<ElementRef>('alertReference');
+
+  readonly alerts = this.alertService.alerts;
+
+  constructor() {
+    effect(() => {
+      for (const element of this.alertElements()) {
+        const native = element.nativeElement as HTMLElement & { toast?: () => void };
+        const alertId = native.getAttribute('id');
+        if (alertId && !this.toastedAlertIds.has(alertId)) {
+          native.toast?.();
+          this.toastedAlertIds.add(alertId);
+        }
+      }
+    });
+  }
+
+  removeFromAlerts(alert: Alert) {
+    this.alertService.removeAlert(alert);
+  }
+}

Diff for: src/app/core/constants/alerts.constants.ts

@@ -0,0 +1,12 @@
+export enum AlertType {
+  SUCCESS = 'success',
+  ERROR = 'error',
+}
+
+export type Alert = {
+  id: string;
+  message: string;
+  type: AlertType;
+  hasCountdown?: boolean;
+  duration?: number;
+};

Diff for: src/app/core/services/alert.service.ts

@@ -1,55 +1,36 @@
-// eslint-disable-next-line @typescript-eslint/consistent-type-imports
-import { Injectable, Renderer2, RendererFactory2 } from '@angular/core';
+import { Injectable, signal } from '@angular/core';
+import type { Alert } from '~core/constants/alerts.constants';
+import { AlertType } from '~core/constants/alerts.constants';
 
-enum AlertType {
-  SUCCESS = 'success',
-  ERROR = 'error',
-}
-
-type Alert = {
-  message: string;
-  type: AlertType;
-  hasCountdown?: boolean;
-  duration?: number;
-};
-
-@Injectable({
-  providedIn: 'root',
-})
+@Injectable({ providedIn: 'root' })
 export class AlertService {
-  private readonly renderer: Renderer2;
+  private readonly _alerts = signal<Alert[]>([]);
 
-  constructor(rendererFactory: RendererFactory2) {
-    this.renderer = rendererFactory.createRenderer(null, null);
-  }
+  readonly alerts = this._alerts.asReadonly();
 
   createSuccessAlert(message: string) {
-    this.createAlert({ message, type: AlertType.SUCCESS, duration: 7000, hasCountdown: true });
+    this.createAlert({
+      id: this.generateAlertId(),
+      message,
+      type: AlertType.SUCCESS,
+      duration: 7000,
+      hasCountdown: true,
+    });
   }
 
   createErrorAlert(message: string) {
-    this.createAlert({ message, type: AlertType.ERROR });
+    this.createAlert({ id: this.generateAlertId(), message, type: AlertType.ERROR });
+  }
+
+  removeAlert(alertToRemove: Alert) {
+    this._alerts.update((alerts) => alerts.filter((alert) => alert !== alertToRemove));
   }
 
-  private createAlert(alert: Alert): void {
-    const alertElement = this.createAlertElement(alert);
-    const container = document.body;
-    this.renderer.appendChild(container, alertElement);
-    alertElement.toast();
+  private createAlert(alert: Alert) {
+    this._alerts.update((alerts) => [...alerts, alert]);
   }
 
-  private createAlertElement(alert: Alert): HTMLElement & { toast: () => void } {
-    const alertElement = this.renderer.createElement('sl-alert');
-    alertElement.classList.add(`alert--${alert.type}`);
-    this.renderer.setAttribute(alertElement, 'closable', '');
-    this.renderer.setAttribute(alertElement, 'variant', alert.type);
-    if (alert.duration) {
-      this.renderer.setAttribute(alertElement, 'duration', alert.duration.toString());
-    }
-    if (alert.hasCountdown) {
-      this.renderer.setAttribute(alertElement, 'countdown', 'rtl');
-    }
-    this.renderer.setProperty(alertElement, 'innerHTML', alert.message);
-    return alertElement as HTMLElement & { toast: () => void };
+  private generateAlertId(): string {
+    return Math.random().toString(36).slice(2, 9) + Date.now().toString(36);
   }
 }

Diff for: src/app/core/services/theme-manager.service.ts

@@ -34,10 +34,10 @@ export class ThemeManagerService {
   setTheme(theme: Theme): void {
     this._themeSelected.set(theme);
     this.localStorage?.setItem(THEME_SELECTED_LOCAL_STORAGE_KEY, this.themeSelected());
-    this._setBodyClasses();
+    this.setBodyClasses();
   }
 
-  private _setBodyClasses(): void {
+  private setBodyClasses(): void {
     const documentClassList = this.document.documentElement.classList;
     if (this.themeSelected() === Theme.DARK) {
       documentClassList.add(DARK_THEME_CLASS_NAME);