119602: Compare notifications by id to correctly update store

Author: AAwouters

src/app/shared/notifications/notifications-board/notifications-board.component.ts

@@ -10,7 +10,6 @@ import {
 
 import { select, Store } from '@ngrx/store';
 import { BehaviorSubject, Subscription, take } from 'rxjs';
-import difference from 'lodash/difference';
 
 import { NotificationsService } from '../notifications.service';
 import { AppState } from '../../../app.reducer';
@@ -23,6 +22,7 @@ import {
   AccessibilitySetting
 } from '../../../accessibility/accessibility-settings.service';
 import cloneDeep from 'lodash/cloneDeep';
+import differenceWith from 'lodash/differenceWith';
 
 @Component({
   selector: 'ds-notifications-board',
@@ -69,13 +69,13 @@ export class NotificationsBoardComponent implements OnInit, OnDestroy {
           this.notifications = [];
         } else if (state.length > this.notifications.length) {
           // Add
-          const newElem = difference(state, this.notifications);
+          const newElem = differenceWith(state, this.notifications, this.byId);
           newElem.forEach((notification) => {
             this.add(notification);
           });
         } else {
           // Remove
-          const delElem = difference(this.notifications, state);
+          const delElem = differenceWith(this.notifications, state, this.byId);
           delElem.forEach((notification) => {
             this.notifications = this.notifications.filter((item: INotification) => item.id !== notification.id);
 
@@ -85,6 +85,9 @@ export class NotificationsBoardComponent implements OnInit, OnDestroy {
       });
   }
 
+  private byId = (notificationA: INotification, notificationB: INotification) =>
+    notificationA.id === notificationB.id;
+
   // Add the new notification to the notification array
   add(item: INotification): void {
     const toBlock: boolean = this.block(item);