From 9a39392a7e6b3f180104856a4ea893e5baf86a02 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Mon, 14 Jan 2019 15:32:09 +0100 Subject: [PATCH] Fix notification socket Should be in core module to share the same subject to all the app --- client/src/app/core/auth/auth.service.ts | 4 +- client/src/app/core/core.module.ts | 4 +- client/src/app/core/notification/index.ts | 1 + .../user-notification-socket.service.ts | 41 ++++++++++++++++++ .../menu/avatar-notification.component.html | 2 +- .../app/menu/avatar-notification.component.ts | 5 ++- .../shared/users/user-notification.service.ts | 42 +++++-------------- .../users/user-notifications.component.ts | 3 +- 8 files changed, 63 insertions(+), 39 deletions(-) create mode 100644 client/src/app/core/notification/user-notification-socket.service.ts diff --git a/client/src/app/core/auth/auth.service.ts b/client/src/app/core/auth/auth.service.ts index 79ea32ced..eaa822e0f 100644 --- a/client/src/app/core/auth/auth.service.ts +++ b/client/src/app/core/auth/auth.service.ts @@ -3,12 +3,12 @@ import { catchError, map, mergeMap, share, tap } from 'rxjs/operators' import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http' import { Injectable } from '@angular/core' import { Router } from '@angular/router' -import { Notifier } from '@app/core/notification' +import { Notifier } from '@app/core/notification/notifier.service' import { OAuthClientLocal, User as UserServerModel, UserRefreshToken } from '../../../../../shared' import { User } from '../../../../../shared/models/users' import { UserLogin } from '../../../../../shared/models/users/user-login.model' import { environment } from '../../../environments/environment' -import { RestExtractor } from '../../shared/rest' +import { RestExtractor } from '../../shared/rest/rest-extractor.service' import { AuthStatus } from './auth-status.model' import { AuthUser } from './auth-user.model' import { objectToUrlEncoded } from '@app/shared/misc/utils' diff --git a/client/src/app/core/core.module.ts b/client/src/app/core/core.module.ts index 7c0d4ac8f..3bc0e2885 100644 --- a/client/src/app/core/core.module.ts +++ b/client/src/app/core/core.module.ts @@ -18,6 +18,7 @@ import { CheatSheetComponent } from './hotkeys' import { ToastModule } from 'primeng/toast' import { Notifier } from './notification' import { MessageService } from 'primeng/api' +import { UserNotificationSocket } from '@app/core/notification/user-notification-socket.service' @NgModule({ imports: [ @@ -60,7 +61,8 @@ import { MessageService } from 'primeng/api' UserRightGuard, RedirectService, Notifier, - MessageService + MessageService, + UserNotificationSocket ] }) export class CoreModule { diff --git a/client/src/app/core/notification/index.ts b/client/src/app/core/notification/index.ts index 8b0cfde5f..3e8d9ea65 100644 --- a/client/src/app/core/notification/index.ts +++ b/client/src/app/core/notification/index.ts @@ -1 +1,2 @@ export * from './notifier.service' +export * from './user-notification-socket.service' diff --git a/client/src/app/core/notification/user-notification-socket.service.ts b/client/src/app/core/notification/user-notification-socket.service.ts new file mode 100644 index 000000000..f367d9ae4 --- /dev/null +++ b/client/src/app/core/notification/user-notification-socket.service.ts @@ -0,0 +1,41 @@ +import { Injectable } from '@angular/core' +import { environment } from '../../../environments/environment' +import { UserNotification as UserNotificationServer } from '../../../../../shared' +import { Subject } from 'rxjs' +import * as io from 'socket.io-client' +import { AuthService } from '../auth' + +export type NotificationEvent = 'new' | 'read' | 'read-all' + +@Injectable() +export class UserNotificationSocket { + private notificationSubject = new Subject<{ type: NotificationEvent, notification?: UserNotificationServer }>() + + private socket: SocketIOClient.Socket + + constructor ( + private auth: AuthService + ) {} + + dispatch (type: NotificationEvent, notification?: UserNotificationServer) { + this.notificationSubject.next({ type, notification }) + } + + getMyNotificationsSocket () { + const socket = this.getSocket() + + socket.on('new-notification', (n: UserNotificationServer) => this.dispatch('new', n)) + + return this.notificationSubject.asObservable() + } + + private getSocket () { + if (this.socket) return this.socket + + this.socket = io(environment.apiUrl + '/user-notifications', { + query: { accessToken: this.auth.getAccessToken() } + }) + + return this.socket + } +} diff --git a/client/src/app/menu/avatar-notification.component.html b/client/src/app/menu/avatar-notification.component.html index 2f0b7c669..4ef3f0e89 100644 --- a/client/src/app/menu/avatar-notification.component.html +++ b/client/src/app/menu/avatar-notification.component.html @@ -17,7 +17,7 @@ > - + See all your notifications diff --git a/client/src/app/menu/avatar-notification.component.ts b/client/src/app/menu/avatar-notification.component.ts index 60e090726..f1af08096 100644 --- a/client/src/app/menu/avatar-notification.component.ts +++ b/client/src/app/menu/avatar-notification.component.ts @@ -2,7 +2,7 @@ import { Component, Input, OnDestroy, OnInit, ViewChild } from '@angular/core' import { User } from '../shared/users/user.model' import { UserNotificationService } from '@app/shared/users/user-notification.service' import { Subscription } from 'rxjs' -import { Notifier } from '@app/core' +import { Notifier, UserNotificationSocket } from '@app/core' import { NgbPopover } from '@ng-bootstrap/ng-bootstrap' import { NavigationEnd, Router } from '@angular/router' import { filter } from 'rxjs/operators' @@ -23,6 +23,7 @@ export class AvatarNotificationComponent implements OnInit, OnDestroy { constructor ( private userNotificationService: UserNotificationService, + private userNotificationSocket: UserNotificationSocket, private notifier: Notifier, private router: Router ) {} @@ -53,7 +54,7 @@ export class AvatarNotificationComponent implements OnInit, OnDestroy { } private subscribeToNotifications () { - this.notificationSub = this.userNotificationService.getMyNotificationsSocket() + this.notificationSub = this.userNotificationSocket.getMyNotificationsSocket() .subscribe(data => { if (data.type === 'new') return this.unreadNotifications++ if (data.type === 'read') return this.unreadNotifications-- diff --git a/client/src/app/shared/users/user-notification.service.ts b/client/src/app/shared/users/user-notification.service.ts index 2dfee8060..67ed8f74e 100644 --- a/client/src/app/shared/users/user-notification.service.ts +++ b/client/src/app/shared/users/user-notification.service.ts @@ -1,30 +1,28 @@ import { Injectable } from '@angular/core' import { HttpClient, HttpParams } from '@angular/common/http' -import { RestExtractor, RestService } from '@app/shared/rest' +import { RestExtractor, RestService } from '../rest' import { catchError, map, tap } from 'rxjs/operators' import { environment } from '../../../environments/environment' import { ResultList, UserNotification as UserNotificationServer, UserNotificationSetting } from '../../../../../shared' -import { UserNotification } from '@app/shared/users/user-notification.model' -import { Subject } from 'rxjs' -import * as io from 'socket.io-client' -import { AuthService } from '@app/core' -import { ComponentPagination } from '@app/shared/rest/component-pagination.model' -import { User } from '@app/shared' +import { UserNotification } from './user-notification.model' +import { AuthService } from '../../core' +import { ComponentPagination } from '../rest/component-pagination.model' +import { User } from '..' +import { UserNotificationSocket } from '@app/core/notification/user-notification-socket.service' @Injectable() export class UserNotificationService { static BASE_NOTIFICATIONS_URL = environment.apiUrl + '/api/v1/users/me/notifications' static BASE_NOTIFICATION_SETTINGS = environment.apiUrl + '/api/v1/users/me/notification-settings' - private notificationSubject = new Subject<{ type: 'new' | 'read' | 'read-all', notification?: UserNotification }>() - private socket: SocketIOClient.Socket constructor ( private auth: AuthService, private authHttp: HttpClient, private restExtractor: RestExtractor, - private restService: RestService + private restService: RestService, + private userNotificationSocket: UserNotificationSocket ) {} listMyNotifications (pagination: ComponentPagination, unread?: boolean, ignoreLoadingBar = false) { @@ -48,16 +46,6 @@ export class UserNotificationService { .pipe(map(n => n.total)) } - getMyNotificationsSocket () { - const socket = this.getSocket() - - socket.on('new-notification', (n: UserNotificationServer) => { - this.notificationSubject.next({ type: 'new', notification: new UserNotification(n) }) - }) - - return this.notificationSubject.asObservable() - } - markAsRead (notification: UserNotification) { const url = UserNotificationService.BASE_NOTIFICATIONS_URL + '/read' @@ -67,7 +55,7 @@ export class UserNotificationService { return this.authHttp.post(url, body, { headers }) .pipe( map(this.restExtractor.extractDataBool), - tap(() => this.notificationSubject.next({ type: 'read' })), + tap(() => this.userNotificationSocket.dispatch('read')), catchError(res => this.restExtractor.handleError(res)) ) } @@ -79,7 +67,7 @@ export class UserNotificationService { return this.authHttp.post(url, {}, { headers }) .pipe( map(this.restExtractor.extractDataBool), - tap(() => this.notificationSubject.next({ type: 'read-all' })), + tap(() => this.userNotificationSocket.dispatch('read-all')), catchError(res => this.restExtractor.handleError(res)) ) } @@ -94,16 +82,6 @@ export class UserNotificationService { ) } - private getSocket () { - if (this.socket) return this.socket - - this.socket = io(environment.apiUrl + '/user-notifications', { - query: { accessToken: this.auth.getAccessToken() } - }) - - return this.socket - } - private formatNotification (notification: UserNotificationServer) { return new UserNotification(notification) } diff --git a/client/src/app/shared/users/user-notifications.component.ts b/client/src/app/shared/users/user-notifications.component.ts index 50c495a9a..e3913ba56 100644 --- a/client/src/app/shared/users/user-notifications.component.ts +++ b/client/src/app/shared/users/user-notifications.component.ts @@ -13,6 +13,7 @@ import { UserNotification } from '@app/shared/users/user-notification.model' export class UserNotificationsComponent implements OnInit { @Input() ignoreLoadingBar = false @Input() infiniteScroll = true + @Input() itemsPerPage = 20 notifications: UserNotification[] = [] @@ -21,7 +22,7 @@ export class UserNotificationsComponent implements OnInit { componentPagination: ComponentPagination = { currentPage: 1, - itemsPerPage: 20, + itemsPerPage: this.itemsPerPage, totalItems: null }