Try stuff

apps/dh/api-dh/source/DataHub.WebApi/GraphQL/Query/NotificationQuery.cs

@@ -0,0 +1,26 @@
+// Copyright 2020 Energinet DataHub A/S
+//
+// Licensed under the Apache License, Version 2.0 (the "License2");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+using Energinet.DataHub.WebApi.Clients.Notifications;
+using Energinet.DataHub.WebApi.Clients.Notifications.Dto;
+
+namespace Energinet.DataHub.WebApi.GraphQL.Query;
+
+public partial class Query
+{
+    public async Task<IEnumerable<NotificationDto>> GetNotificationsAsync(
+        [Service] INotificationsClient client,
+        CancellationToken cancellationToken) =>
+        await client.GetUnreadNotificationsAsync(cancellationToken);
+}

libs/dh/core/data-access-graphql/query/get-notifications.graphql

@@ -0,0 +1,8 @@
+query getNotifications {
+  notifications {
+    id
+    notificationType
+    occurredAt
+    relatedToId
+  }
+}

libs/dh/core/feature-notifications/src/lib/dh-notification-banner.component.ts

@@ -35,8 +35,12 @@ import { DhNotification } from './dh-notification';
   `,
   template: `
     <ng-container *transloco="let t; read: 'notificationsCenter.notification'">
-      <h5 class="watt-space-stack-xxs">{{ t(toastRef.data.type + '.headline') }}</h5>
-      <p>{{ t(toastRef.data.type + '.message', { relatedToId: toastRef.data.relatedToId }) }}</p>
+      <h5 class="watt-space-stack-xxs">{{ t(toastRef.data.notificationType + '.headline') }}</h5>
+      <p>
+        {{
+          t(toastRef.data.notificationType + '.message', { relatedToId: toastRef.data.relatedToId })
+        }}
+      </p>
     </ng-container>
   `,
 })

libs/dh/core/feature-notifications/src/lib/dh-notification.component.ts

@@ -80,8 +80,8 @@ import { DhNotification } from './dh-notification';
   `,
   template: `
     <ng-container *transloco="let t; read: 'notificationsCenter.notification'">
-      <div class="notification" [ngClass]="{ 'notification--unread': !notification().read }">
-        @if (!notification().read) {
+      <div class="notification" [ngClass]="{ 'notification--unread': !notification() }">
+        @if (!notification()) {
           <watt-icon
             name="close"
             class="icon-dismiss"
@@ -94,10 +94,14 @@ import { DhNotification } from './dh-notification';
           {{ notification().occurredAt | wattDate: 'long' }}
         </span>
         <h5 class="notification__headline watt-space-stack-xxs">
-          {{ t(notification().type + '.headline') }}
+          {{ t(notification().notificationType + '.headline') }}
         </h5>
         <p class="notification__message">
-          {{ t(notification().type + '.message', { relatedToId: notification().relatedToId }) }}
+          {{
+            t(notification().notificationType + '.message', {
+              relatedToId: notification().relatedToId,
+            })
+          }}
         </p>
       </div>
     </ng-container>

libs/dh/core/feature-notifications/src/lib/dh-notification.ts

@@ -14,10 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export type DhNotification = {
-  id: number;
-  type: string;
-  occurredAt: Date;
-  read: boolean;
-  relatedToId?: string | null;
-};
+import { GetNotificationsDocument } from '@energinet-datahub/dh/shared/domain/graphql';
+import type { ResultOf } from '@graphql-typed-document-node/core';
+export type DhNotifications = ResultOf<typeof GetNotificationsDocument>['notifications'];
+export type DhNotification = DhNotifications[0];

libs/dh/core/feature-notifications/src/lib/dh-notifications-center.component.ts

@@ -19,9 +19,10 @@ import { Component, computed, inject, signal } from '@angular/core';
 import { NgClass } from '@angular/common';
 import { TranslocoDirective } from '@ngneat/transloco';
 
-import { mutation, subscription } from '@energinet-datahub/dh/shared/util-apollo';
+import { mutation, query, subscription } from '@energinet-datahub/dh/shared/util-apollo';
 import {
   DismissNotificationDocument,
+  GetNotificationsDocument,
   OnNotificationAddedDocument,
 } from '@energinet-datahub/dh/shared/domain/graphql';
 
@@ -139,37 +140,33 @@ export class DhNotificationsCenterComponent {
   private readonly bannerService = inject(DhNotificationBannerService);
   private readonly now = new Date();
   private readonly dismissMutation = mutation(DismissNotificationDocument);
+  private readonly getNotificationsQuery = query(GetNotificationsDocument);
 
   isOpen = false;
 
-  notifications = signal<DhNotification[]>([]);
-  notificationAdded = subscription(OnNotificationAddedDocument, {
-    onData: ({ notificationAdded }) => {
-      const isDistinctNotification = this.isDistinctNotification(notificationAdded.id);
+  notifications = computed(() => this.getNotificationsQuery.data()?.notifications ?? []);
 
-      if (!isDistinctNotification) {
-        return;
-      }
+  constructor() {
+    this.getNotificationsQuery.subscribeToMore({
+      document: OnNotificationAddedDocument,
+      updateQuery: (pref, { subscriptionData }) => {
+        const incomingNotification = subscriptionData.data?.notificationAdded;
+        if (!incomingNotification) return pref;
 
-      const { id, occurredAt, relatedToId, notificationType: type } = notificationAdded;
-      const notification: DhNotification = {
-        id,
-        type,
-        occurredAt,
-        read: false,
-        relatedToId,
-      };
-
-      if (dayjs(occurredAt).isAfter(this.now)) {
-        this.bannerService.showBanner(notification);
-      }
+        if (dayjs(incomingNotification.occurredAt).isAfter(this.now)) {
+          this.bannerService.showBanner(incomingNotification);
+        }
 
-      this.notifications.update((notifications) => [notification, ...notifications]);
-    },
-  });
+        return {
+          ...pref,
+          notifications: [incomingNotification, ...pref.notifications],
+        };
+      },
+    });
+  }
 
   notificationIcon = computed<WattIcon>(() =>
-    this.notifications().every((n) => n.read) ? 'notifications' : 'notificationsUnread'
+    this.notifications().every((n) => n) ? 'notifications' : 'notificationsUnread'
   );
 
   notificationDot = computed<boolean>(() => this.notificationIcon() === 'notificationsUnread');
@@ -187,18 +184,12 @@ export class DhNotificationsCenterComponent {
   onDismiss(notificationId: number): void {
     this.dismissMutation.mutate({
       variables: { input: { notificationId } },
-      onCompleted: () => this.onDismissSuccess(notificationId),
+      refetchQueries: [GetNotificationsDocument],
       onError: () => console.error('Failed to dismiss notification'),
     });
   }
 
   private isDistinctNotification(incomingNotificationId: number): boolean {
     return !this.notifications().some((n) => n.id === incomingNotificationId);
   }
-
-  private onDismissSuccess(notificationId: number): void {
-    this.notifications.update((notifications) =>
-      notifications.filter((n) => n.id !== notificationId)
-    );
-  }
 }