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 } 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 notifier: Notifier,
  27     private router: Router
  28   ) {}
  29
  30   ngOnInit () {
  31     this.userNotificationService.countUnreadNotifications()
  32       .subscribe(
  33         result => {
  34           this.unreadNotifications = Math.min(result, 99) // Limit number to 99
  35           this.subscribeToNotifications()
  36         },
  37
  38         err => this.notifier.error(err.message)
  39       )
  40
  41     this.routeSub = this.router.events
  42                         .pipe(filter(event => event instanceof NavigationEnd))
  43                         .subscribe(() => this.closePopover())
  44   }
  45
  46   ngOnDestroy () {
  47     if (this.notificationSub) this.notificationSub.unsubscribe()
  48     if (this.routeSub) this.routeSub.unsubscribe()
  49   }
  50
  51   closePopover () {
  52     this.popover.close()
  53   }
  54
  55   private subscribeToNotifications () {
  56     this.notificationSub = this.userNotificationService.getMyNotificationsSocket()
  57                                .subscribe(data => {
  58                                  if (data.type === 'new') return this.unreadNotifications++
  59                                  if (data.type === 'read') return this.unreadNotifications--
  60                                  if (data.type === 'read-all') return this.unreadNotifications = 0
  61                                })
  62   }
  63
  64 }