feat(front-end): Receive notifications in real time

CarlosPavajeau · Mar 12, 2021 · 334827f · 334827f
1 parent 7658688
commit 334827f
Show file tree

Hide file tree

Showing 4 changed files with 105 additions and 29 deletions.
diff --git a/Kaizen/ClientApp/src/app/shared/components/notifications/notifications.component.html b/Kaizen/ClientApp/src/app/shared/components/notifications/notifications.component.html
@@ -2,34 +2,49 @@
   <mat-icon [matBadge]="notifications.length" [matBadgeHidden]="notifications.length === 0">notifications</mat-icon>
 </button>
 <mat-menu #notificationsMenu="matMenu">
-  <div mat-menu-item class="notification-button" *ngFor="let notification of notifications">
-    <div class="icon-text-container">
-      <mat-icon>{{ notification.icon }}</mat-icon>
-      <span>
+  <ng-container
+    *ngIf="notifications$ | observableWithStatus | async as obs"
+    [ngSwitch]="obs.status"
+  >
+    <ng-template [ngSwitchCase]="ObsStatus.Loading">
+      <div class="center-block-content pt-5 mr-3 ml-3">
+        <div class="center-flex-content">
+          <mat-spinner></mat-spinner>
+        </div>
+        <h4 class="text-center mt-4 empty-list-text">Cargando notificationes</h4>
+      </div>
+    </ng-template>
+    <ng-template [ngSwitchCase]="ObsStatus.Success">
+      <div mat-menu-item class="notification-button" *ngFor="let notification of notifications">
+        <div class="icon-text-container">
+          <mat-icon>{{ notification.icon }}</mat-icon>
+          <span>
         {{ notification.title }}
-        <small>
+            <small>
           {{ notification.message }}
         </small>
       </span>
-    </div>
-    <div class="spacer"></div>
-    <mat-icon [routerLink]="notification.url" *ngIf="notification.url; else notUrl">visibility</mat-icon>
-    <ng-template  #notUrl>
-      <mat-icon [matTooltip]="'Eliminar notificación'">delete</mat-icon>
+        </div>
+        <div class="spacer"></div>
+        <mat-icon [routerLink]="notification.url" *ngIf="notification.url; else notUrl">visibility</mat-icon>
+        <ng-template #notUrl>
+          <mat-icon [matTooltip]="'Eliminar notificación'">delete</mat-icon>
+        </ng-template>
+      </div>
+      <div *ngIf="notifications.length == 0">
+        <div class="pt-2 pb-2 pr-2 pl-2">
+          <img
+            src="/assets/images/relax_people.svg"
+            alt="Empty list"
+            width="230"
+            height="230"
+            class="center-block-content"
+          />
+          <h4 class="text-center empty-list-text">
+            No tienes notificaciones.
+          </h4>
+        </div>
+      </div>
     </ng-template>
-  </div>
-  <div *ngIf="notifications.length == 0">
-    <div class="pt-2 pb-2 pr-2 pl-2">
-      <img
-        src="/assets/images/relax_people.svg"
-        alt="Empty list"
-        width="230"
-        height="230"
-        class="center-block-content"
-      />
-      <h4 class="text-center empty-list-text">
-        No tienes notificaciones.
-      </h4>
-    </div>
-  </div>
+  </ng-container>
 </mat-menu>
diff --git a/Kaizen/ClientApp/src/app/shared/components/notifications/notifications.component.ts b/Kaizen/ClientApp/src/app/shared/components/notifications/notifications.component.ts
@@ -1,23 +1,37 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
+import { AuthenticationService } from '@core/authentication/authentication.service';
 import { NotificationItem } from '@shared/models/notification-item';
+import { ObservableStatus } from '@shared/models/observable-with-status';
 import { NotificationsSignalrService } from '@shared/services/notifications-signalr.service';
-import { Subscription } from 'rxjs';
+import { NotificationsService } from '@shared/services/notifications.service';
+import { Subscription, Observable } from 'rxjs';
 
 @Component({
   selector: 'app-notifications',
   templateUrl: './notifications.component.html',
   styleUrls: [ './notifications.component.scss' ]
 })
 export class NotificationsComponent implements OnInit, OnDestroy {
+  public ObsStatus: typeof ObservableStatus = ObservableStatus;
+
+  notifications$: Observable<NotificationItem[]>;
   notifications: NotificationItem[] = [];
   newNotification: Subscription;
 
-  constructor(private notificationSignalR: NotificationsSignalrService) {
+  constructor(
+    private notificationsService: NotificationsService,
+    private authService: AuthenticationService,
+    private notificationSignalR: NotificationsSignalrService
+  ) {
   }
 
   ngOnInit(): void {
-    this.notificationSignalR.startConnection();
-    this.notificationSignalR.addOnNewNotification();
+    const userId = this.authService.getCurrentUser().id;
+    this.notifications$ = this.notificationsService.getNotifications(userId);
+
+    this.notifications$.subscribe((notifications: NotificationItem[]) => {
+      this.notifications = notifications;
+    });
 
     this.newNotification = this.notificationSignalR.onNewNotification$.subscribe((notification: NotificationItem) => {
       this.notifications.push(notification);

diff --git a/Kaizen/ClientApp/src/app/shared/services/notifications-signalr.service.spec.ts b/Kaizen/ClientApp/src/app/shared/services/notifications-signalr.service.spec.ts
@@ -0,0 +1,19 @@
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { TestBed } from '@angular/core/testing';
+
+import { NotificationsSignalrService } from './notifications-signalr.service';
+
+describe('NotificationsSignalrService', () => {
+  let service: NotificationsSignalrService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [ HttpClientTestingModule ]
+    });
+    service = TestBed.inject(NotificationsSignalrService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/Kaizen/ClientApp/src/app/shared/services/notifications-signalr.service.ts b/Kaizen/ClientApp/src/app/shared/services/notifications-signalr.service.ts
@@ -0,0 +1,28 @@
+import { Injectable, EventEmitter } from '@angular/core';
+import { AuthenticationService } from '@core/authentication/authentication.service';
+import { BaseSignalrService } from '@core/services/base-signalr.service';
+import { NotificationItem } from '@shared/models/notification-item';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class NotificationsSignalrService extends BaseSignalrService {
+  onNewNotification$: EventEmitter<NotificationItem> = new EventEmitter<NotificationItem>();
+
+  constructor(private authService: AuthenticationService) {
+    super();
+    this.startConnection();
+  }
+
+  public startConnection(): void {
+    super.buildConnection('/NotificationHub', this.authService.getToken());
+    super.startConnection();
+    this.addOnNewNotification();
+  }
+
+  public addOnNewNotification(): void {
+    this.hubConnection.on('OnNewNotification', (notification: NotificationItem) => {
+      this.onNewNotification$.emit(notification);
+    });
+  }
+}