From 734a5ceb3d04088743d72babcb9b05e6142043f6 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Thu, 7 Jun 2018 11:19:26 +0200 Subject: Fix account/channel pages route subscription --- .../account-about/account-about.component.ts | 13 ++++++++--- .../account-video-channels.component.ts | 13 ++++++++--- .../account-videos/account-videos.component.ts | 10 +++++--- client/src/app/+accounts/accounts.component.ts | 20 ++++++++++++---- .../video-channel-about.component.ts | 13 ++++++++--- .../video-channel-videos.component.ts | 8 +++++-- .../+video-channels/video-channels.component.ts | 27 +++++++++++++++------- client/src/app/videos/shared/markdown.service.ts | 1 - 8 files changed, 77 insertions(+), 28 deletions(-) (limited to 'client') diff --git a/client/src/app/+accounts/account-about/account-about.component.ts b/client/src/app/+accounts/account-about/account-about.component.ts index 4086510ba..c0e793754 100644 --- a/client/src/app/+accounts/account-about/account-about.component.ts +++ b/client/src/app/+accounts/account-about/account-about.component.ts @@ -1,17 +1,20 @@ -import { Component, OnInit } from '@angular/core' +import { Component, OnInit, OnDestroy } from '@angular/core' import { ActivatedRoute } from '@angular/router' import { Account } from '@app/shared/account/account.model' import { AccountService } from '@app/shared/account/account.service' import { I18n } from '@ngx-translate/i18n-polyfill' +import { Subscription } from 'rxjs' @Component({ selector: 'my-account-about', templateUrl: './account-about.component.html', styleUrls: [ './account-about.component.scss' ] }) -export class AccountAboutComponent implements OnInit { +export class AccountAboutComponent implements OnInit, OnDestroy { account: Account + private accountSub: Subscription + constructor ( private route: ActivatedRoute, private i18n: I18n, @@ -20,10 +23,14 @@ export class AccountAboutComponent implements OnInit { ngOnInit () { // Parent get the account for us - this.accountService.accountLoaded + this.accountSub = this.accountService.accountLoaded .subscribe(account => this.account = account) } + ngOnDestroy () { + if (this.accountSub) this.accountSub.unsubscribe() + } + getAccountDescription () { if (this.account.description) return this.account.description diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.ts b/client/src/app/+accounts/account-video-channels/account-video-channels.component.ts index a6e6dd656..ebc671113 100644 --- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.ts +++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.ts @@ -1,20 +1,23 @@ -import { Component, OnInit } from '@angular/core' +import { Component, OnDestroy, OnInit } from '@angular/core' import { ActivatedRoute } from '@angular/router' import { Account } from '@app/shared/account/account.model' import { AccountService } from '@app/shared/account/account.service' import { VideoChannel } from '../../../../../shared/models/videos' import { VideoChannelService } from '@app/shared/video-channel/video-channel.service' import { flatMap, map, tap } from 'rxjs/operators' +import { Subscription } from 'rxjs' @Component({ selector: 'my-account-video-channels', templateUrl: './account-video-channels.component.html', styleUrls: [ './account-video-channels.component.scss' ] }) -export class AccountVideoChannelsComponent implements OnInit { +export class AccountVideoChannelsComponent implements OnInit, OnDestroy { account: Account videoChannels: VideoChannel[] = [] + private accountSub: Subscription + constructor ( protected route: ActivatedRoute, private accountService: AccountService, @@ -23,7 +26,7 @@ export class AccountVideoChannelsComponent implements OnInit { ngOnInit () { // Parent get the account for us - this.accountService.accountLoaded + this.accountSub = this.accountService.accountLoaded .pipe( tap(account => this.account = account), flatMap(account => this.videoChannelService.listAccountVideoChannels(account)), @@ -31,4 +34,8 @@ export class AccountVideoChannelsComponent implements OnInit { ) .subscribe(videoChannels => this.videoChannels = videoChannels) } + + ngOnDestroy () { + if (this.accountSub) this.accountSub.unsubscribe() + } } diff --git a/client/src/app/+accounts/account-videos/account-videos.component.ts b/client/src/app/+accounts/account-videos/account-videos.component.ts index 476f04024..5e3dbb6b3 100644 --- a/client/src/app/+accounts/account-videos/account-videos.component.ts +++ b/client/src/app/+accounts/account-videos/account-videos.component.ts @@ -11,6 +11,7 @@ import { Account } from '@app/shared/account/account.model' import { AccountService } from '@app/shared/account/account.service' import { tap } from 'rxjs/operators' import { I18n } from '@ngx-translate/i18n-polyfill' +import { Subscription } from 'rxjs' @Component({ selector: 'my-account-videos', @@ -27,6 +28,7 @@ export class AccountVideosComponent extends AbstractVideoList implements OnInit, loadOnInit = false private account: Account + private accountSub: Subscription constructor ( protected router: Router, @@ -48,17 +50,19 @@ export class AccountVideosComponent extends AbstractVideoList implements OnInit, super.ngOnInit() // Parent get the account for us - this.accountService.accountLoaded + this.accountSub = this.accountService.accountLoaded .subscribe(account => { this.account = account - this.currentRoute = '/account/' + this.account.id + '/videos' + this.currentRoute = '/account/' + this.account.nameWithHost + '/videos' - this.loadMoreVideos(this.pagination.currentPage) + this.reloadVideos() this.generateSyndicationList() }) } ngOnDestroy () { + if (this.accountSub) this.accountSub.unsubscribe() + super.ngOnDestroy() } diff --git a/client/src/app/+accounts/accounts.component.ts b/client/src/app/+accounts/accounts.component.ts index 24bde61ce..2a6856c10 100644 --- a/client/src/app/+accounts/accounts.component.ts +++ b/client/src/app/+accounts/accounts.component.ts @@ -3,7 +3,8 @@ import { ActivatedRoute } from '@angular/router' import { AccountService } from '@app/shared/account/account.service' import { Account } from '@app/shared/account/account.model' import { RestExtractor } from '@app/shared' -import { catchError } from 'rxjs/operators' +import { catchError, switchMap, distinctUntilChanged, map } from 'rxjs/operators' +import { Subscription } from 'rxjs' @Component({ templateUrl: './accounts.component.html', @@ -12,6 +13,8 @@ import { catchError } from 'rxjs/operators' export class AccountsComponent implements OnInit { account: Account + private routeSub: Subscription + constructor ( private route: ActivatedRoute, private accountService: AccountService, @@ -19,10 +22,17 @@ export class AccountsComponent implements OnInit { ) {} ngOnInit () { - const accountId = this.route.snapshot.params['accountId'] + this.routeSub = this.route.params + .pipe( + map(params => params[ 'accountId' ]), + distinctUntilChanged(), + switchMap(accountId => this.accountService.getAccount(accountId)), + catchError(err => this.restExtractor.redirectTo404IfNotFound(err, [ 400, 404 ])) + ) + .subscribe(account => this.account = account) + } - this.accountService.getAccount(accountId) - .pipe(catchError(err => this.restExtractor.redirectTo404IfNotFound(err, [ 400, 404 ]))) - .subscribe(account => this.account = account) + ngOnDestroy () { + if (this.routeSub) this.routeSub.unsubscribe() } } diff --git a/client/src/app/+video-channels/video-channel-about/video-channel-about.component.ts b/client/src/app/+video-channels/video-channel-about/video-channel-about.component.ts index c5fd442c6..dc0893962 100644 --- a/client/src/app/+video-channels/video-channel-about/video-channel-about.component.ts +++ b/client/src/app/+video-channels/video-channel-about/video-channel-about.component.ts @@ -1,17 +1,20 @@ -import { Component, OnInit } from '@angular/core' +import { Component, OnDestroy, OnInit } from '@angular/core' import { ActivatedRoute } from '@angular/router' import { VideoChannelService } from '@app/shared/video-channel/video-channel.service' import { VideoChannel } from '@app/shared/video-channel/video-channel.model' import { I18n } from '@ngx-translate/i18n-polyfill' +import { Subscription } from 'rxjs' @Component({ selector: 'my-video-channel-about', templateUrl: './video-channel-about.component.html', styleUrls: [ './video-channel-about.component.scss' ] }) -export class VideoChannelAboutComponent implements OnInit { +export class VideoChannelAboutComponent implements OnInit, OnDestroy { videoChannel: VideoChannel + private videoChannelSub: Subscription + constructor ( private route: ActivatedRoute, private i18n: I18n, @@ -20,10 +23,14 @@ export class VideoChannelAboutComponent implements OnInit { ngOnInit () { // Parent get the video channel for us - this.videoChannelService.videoChannelLoaded + this.videoChannelSub = this.videoChannelService.videoChannelLoaded .subscribe(videoChannel => this.videoChannel = videoChannel) } + ngOnDestroy () { + if (this.videoChannelSub) this.videoChannelSub.unsubscribe() + } + getVideoChannelDescription () { if (this.videoChannel.description) return this.videoChannel.description diff --git a/client/src/app/+video-channels/video-channel-videos/video-channel-videos.component.ts b/client/src/app/+video-channels/video-channel-videos/video-channel-videos.component.ts index 28c591039..2d3f66994 100644 --- a/client/src/app/+video-channels/video-channel-videos/video-channel-videos.component.ts +++ b/client/src/app/+video-channels/video-channel-videos/video-channel-videos.component.ts @@ -11,6 +11,7 @@ import { VideoChannelService } from '@app/shared/video-channel/video-channel.ser import { VideoChannel } from '@app/shared/video-channel/video-channel.model' import { tap } from 'rxjs/operators' import { I18n } from '@ngx-translate/i18n-polyfill' +import { Subscription } from 'rxjs' @Component({ selector: 'my-video-channel-videos', @@ -27,6 +28,7 @@ export class VideoChannelVideosComponent extends AbstractVideoList implements On loadOnInit = false private videoChannel: VideoChannel + private videoChannelSub: Subscription constructor ( protected router: Router, @@ -48,17 +50,19 @@ export class VideoChannelVideosComponent extends AbstractVideoList implements On super.ngOnInit() // Parent get the video channel for us - this.videoChannelService.videoChannelLoaded + this.videoChannelSub = this.videoChannelService.videoChannelLoaded .subscribe(videoChannel => { this.videoChannel = videoChannel this.currentRoute = '/video-channel/' + this.videoChannel.uuid + '/videos' - this.loadMoreVideos(this.pagination.currentPage) + this.reloadVideos() this.generateSyndicationList() }) } ngOnDestroy () { + if (this.videoChannelSub) this.videoChannelSub.unsubscribe() + super.ngOnDestroy() } diff --git a/client/src/app/+video-channels/video-channels.component.ts b/client/src/app/+video-channels/video-channels.component.ts index 09541b370..cd0463859 100644 --- a/client/src/app/+video-channels/video-channels.component.ts +++ b/client/src/app/+video-channels/video-channels.component.ts @@ -1,28 +1,39 @@ -import { Component, OnInit } from '@angular/core' +import { Component, OnInit, OnDestroy } from '@angular/core' import { ActivatedRoute } from '@angular/router' import { VideoChannel } from '@app/shared/video-channel/video-channel.model' import { VideoChannelService } from '@app/shared/video-channel/video-channel.service' import { RestExtractor } from '@app/shared' -import { catchError } from 'rxjs/operators' +import { catchError, switchMap, map, distinctUntilChanged } from 'rxjs/operators' +import { Subscription } from 'rxjs/Subscription' @Component({ templateUrl: './video-channels.component.html', styleUrls: [ './video-channels.component.scss' ] }) -export class VideoChannelsComponent implements OnInit { +export class VideoChannelsComponent implements OnInit, OnDestroy { videoChannel: VideoChannel + private routeSub: Subscription + constructor ( private route: ActivatedRoute, private videoChannelService: VideoChannelService, private restExtractor: RestExtractor - ) {} + ) { } ngOnInit () { - const videoChannelId = this.route.snapshot.params['videoChannelId'] + this.routeSub = this.route.params + .pipe( + map(params => params[ 'videoChannelId' ]), + distinctUntilChanged(), + switchMap(videoChannelId => this.videoChannelService.getVideoChannel(videoChannelId)), + catchError(err => this.restExtractor.redirectTo404IfNotFound(err, [ 400, 404 ])) + ) + .subscribe(videoChannel => this.videoChannel = videoChannel) + + } - this.videoChannelService.getVideoChannel(videoChannelId) - .pipe(catchError(err => this.restExtractor.redirectTo404IfNotFound(err, [ 400, 404 ]))) - .subscribe(videoChannel => this.videoChannel = videoChannel) + ngOnDestroy () { + if (this.routeSub) this.routeSub.unsubscribe() } } diff --git a/client/src/app/videos/shared/markdown.service.ts b/client/src/app/videos/shared/markdown.service.ts index 9a36786b5..681140087 100644 --- a/client/src/app/videos/shared/markdown.service.ts +++ b/client/src/app/videos/shared/markdown.service.ts @@ -69,7 +69,6 @@ export class MarkdownService { } private avoidTruncatedLinks (html: string) { - console.log(html) return html.replace(/]+>([^<]+)<\/a>\s*...((<\/p>)|(<\/li>)|(<\/strong>))?$/mi, '$1...') } } -- cgit v1.2.3