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', { static: true }) popover: NgbPopover
  17   @Input() user: User
  18
  19   unreadNotifications = 0
  20   loaded = false
  21
  22   private notificationSub: Subscription
  23   private routeSub: Subscription
  24
  25   constructor (
  26     private userNotificationService: UserNotificationService,
  27     private userNotificationSocket: UserNotificationSocket,
  28     private notifier: Notifier,
  29     private router: Router
  30   ) {
  31   }
  32
  33   ngOnInit () {
  34     this.userNotificationService.countUnreadNotifications()
  35         .subscribe(
  36           result => {
  37             this.unreadNotifications = Math.min(result, 99) // Limit number to 99
  38             this.subscribeToNotifications()
  39           },
  40
  41           err => this.notifier.error(err.message)
  42         )
  43
  44     this.routeSub = this.router.events
  45                         .pipe(filter(event => event instanceof NavigationEnd))
  46                         .subscribe(() => this.closePopover())
  47   }
  48
  49   ngOnDestroy () {
  50     if (this.notificationSub) this.notificationSub.unsubscribe()
  51     if (this.routeSub) this.routeSub.unsubscribe()
  52   }
  53
  54   closePopover () {
  55     this.popover.close()
  56   }
  57
  58   onPopoverHidden () {
  59     this.loaded = false
  60   }
  61
  62   onNotificationLoaded () {
  63     this.loaded = true
  64   }
  65
  66   markAllAsRead () {
  67     this.userNotificationService.markAllAsRead()
  68   }
  69
  70   private async subscribeToNotifications () {
  71     const obs = await this.userNotificationSocket.getMyNotificationsSocket()
  72
  73     this.notificationSub = obs.subscribe(data => {
  74       if (data.type === 'new') return this.unreadNotifications++
  75       if (data.type === 'read') return this.unreadNotifications--
  76       if (data.type === 'read-all') return this.unreadNotifications = 0
  77     })
  78   }
  79
  80 }