prevent error overflow, fix #279

src/app/app.component.ts

@@ -62,6 +62,11 @@ export class AppComponent implements OnInit, OnDestroy {
     }
 
     ngOnInit(): void {
+        // //Test 
+        // setInterval(() => {
+        //     this.notificationService.notify('https://files.mastodon.social/accounts/avatars/000/520/226/original/fb37ef31376e5dfc.png', 500, null, true);
+        // }, 50);
+
         // disable tutorial for future update
         localStorage.setItem('tutorial', JSON.stringify(true));
 

src/app/components/notification-hub/notification-hub.component.html

@@ -5,9 +5,10 @@
         <img class="notification-hub__notification--avatar" *ngIf="notification.avatar"
             src="{{ notification.avatar }}" />
 
-        <div class="notification-hub__notification--message">
+        <div class="notification-hub__notification--message" [class.notification-hub__notification--message--no-avatar]="!notification.avatar">
             <span *ngIf="!notification.message">Error {{ notification.errorCode }}</span>
             <span *ngIf="notification.message">{{ notification.message }}</span>
+            <span class="notification-hub__notification--count" *ngIf="notification.count > 1"> ({{ notification.count}})</span>
         </div>
     </div>
 </div>

src/app/components/notification-hub/notification-hub.component.scss

@@ -27,7 +27,17 @@
         }
 
         &--message {
+            padding-top: 4px;
             margin-left: 37px;
+
+            &--no-avatar {
+                margin-left: 0px;
+                margin-left: 5px;
+            }
+        }
+
+        &--count {
+            color: rgba(255, 255, 255, .6);
         }
     }
 }

src/app/components/notification-hub/notification-hub.component.ts

@@ -7,17 +7,26 @@ import { NotificationService, NotificatioData } from '../../services/notificatio
     styleUrls: ['./notification-hub.component.scss']
 })
 export class NotificationHubComponent implements OnInit {
-    notifications: NotificatioData[] = [];
+    notifications: NotificationWrapper[] = [];
 
     constructor(private notificationService: NotificationService) { }
 
     ngOnInit() {
         this.notificationService.notifactionStream.subscribe((notification: NotificatioData) => {
-            this.notifications.push(notification);
+            let alreadyExistingNotification = this.notifications.find(x => x.avatar === notification.avatar && x.message === notification.message);
 
-            setTimeout(() => {
-                this.notifications = this.notifications.filter(x => x.id !== notification.id);
-            }, 5000);
+            if(alreadyExistingNotification){
+                alreadyExistingNotification.count++;
+            } else{
+                this.notifications.push(new NotificationWrapper(notification));
+                if(this.notifications.length > 3){
+                    this.notifications.length = 3;
+                }
+    
+                setTimeout(() => {
+                    this.notifications = this.notifications.filter(x => x.id !== notification.id);
+                }, 5000);
+            }
         });
 
         //this.autoSubmit();       
@@ -35,3 +44,11 @@ export class NotificationHubComponent implements OnInit {
         this.notifications = this.notifications.filter(x => x.id !== notification.id);
     }
 }
+
+class NotificationWrapper extends NotificatioData {
+    constructor(data: NotificatioData) {
+        super(data.avatar, data.errorCode, data.message, data.isError);        
+    }
+
+    count = 1;
+}