custom notifications service

Frontend/src/app/services/notifications.service.ts

@@ -0,0 +1,59 @@
+import { Injectable } from '@angular/core';
+import { MatBottomSheet, MatBottomSheetRef } from '@angular/material/bottom-sheet';
+import { NotificationsComponent } from '../components/notifications/notifications.component';
+import { v4 as uuidv4 } from 'uuid';
+import moment, { Moment } from 'moment';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class NotificationsService {
+
+  public messages: Message[] = [];
+  private handler?: MatBottomSheetRef;
+
+  constructor(
+    private bottomSheet$: MatBottomSheet
+  ) { }
+  public add(message: Message) {
+    message.id = uuidv4();
+    message.createdAt = moment();
+    this.messages.push(message);
+    this.sortMessages();
+    if (this.messages.length === 1) {
+      this.handler = this.bottomSheet$.open(NotificationsComponent, {
+        hasBackdrop: false,
+        disableClose: true
+      });
+    }
+    setTimeout(() => {
+      this.remove(message);
+    }, message.duration ? message.duration : 5000);
+  }
+  private remove(message: Message) {
+    this.messages = this.messages.filter(x => x.id!==message.id);
+    this.sortMessages();
+    if (this.messages.length === 0 && this.handler) {
+      this.handler.dismiss();
+    }
+  }
+  private sortMessages() {
+    this.messages = this.messages.sort((a, b) => {
+      return a.createdAt && a.createdAt.isAfter(b.createdAt) ? 1 : -1;
+    })
+  }
+  doAction(message: Message) {
+    if (message.action) { message.action(); }
+    this.remove(message);
+  }
+}
+
+interface Message {
+  id?: string;
+  text: string;
+  duration?: number;
+  btn?: string;
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  action?: Function;
+  createdAt?: Moment
+}