client/src/app/menu/avatar-notification.component.ts

   1 import { Component, Input, OnDestroy, OnInit, ViewChild } from '@angular/core'
   2 import { User } from '../shared/users/user.model'
   3 import { UserNotificationService } from '@app/shared/users/user-notification.service'
   4 import { Subscription } from 'rxjs'
   5 import { Notifier, UserNotificationSocket } from '@app/core'
   6 import { NgbPopover } from '@ng-bootstrap/ng-bootstrap'
   7 import { NavigationEnd, Router } from '@angular/router'
   8 import { filter } from 'rxjs/operators'
   9
  10 @Component({
  11   selector: 'my-avatar-notification',
  12   templateUrl: './avatar-notification.component.html',
  13   styleUrls: [ './avatar-notification.component.scss' ]
  14 })
  15 export class AvatarNotificationComponent implements OnInit, OnDestroy {
  16   @ViewChild('popover') popover: NgbPopover
  17   @Input() user: User
  18
  19   unreadNotifications = 0
  20
  21   private notificationSub: Subscription
  22   private routeSub: Subscription
  23
  24   constructor (
  25     private userNotificationService: UserNotificationService,
  26     private userNotificationSocket: UserNotificationSocket,
  27     private notifier: Notifier,
  28     private router: Router
  29   ) {}
  30
  31   ngOnInit () {
  32     this.userNotificationService.countUnreadNotifications()
  33       .subscribe(
  34         result => {
  35           this.unreadNotifications = Math.min(result, 99) // Limit number to 99
  36           this.subscribeToNotifications()
  37         },
  38
  39         err => this.notifier.error(err.message)
  40       )
  41
  42     this.routeSub = this.router.events
  43                         .pipe(filter(event => event instanceof NavigationEnd))
  44                         .subscribe(() => this.closePopover())
  45   }
  46
  47   ngOnDestroy () {
  48     if (this.notificationSub) this.notificationSub.unsubscribe()
  49     if (this.routeSub) this.routeSub.unsubscribe()
  50   }
  51
  52   closePopover () {
  53     this.popover.close()
  54   }
  55
  56   private subscribeToNotifications () {
  57     this.notificationSub = this.userNotificationSocket.getMyNotificationsSocket()
  58                                .subscribe(data => {
  59                                  if (data.type === 'new') return this.unreadNotifications++
  60                                  if (data.type === 'read') return this.unreadNotifications--
  61                                  if (data.type === 'read-all') return this.unreadNotifications = 0
  62                                })
  63   }
  64
  65 }