diff --git a/src/app/collection-page/collection-page.component.ts b/src/app/collection-page/collection-page.component.ts index 4d56dc30ea..f636f9dd51 100644 --- a/src/app/collection-page/collection-page.component.ts +++ b/src/app/collection-page/collection-page.component.ts @@ -1,4 +1,7 @@ -import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core'; +import { + ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, + OnInit +} from '@angular/core'; import { ActivatedRoute, Params } from '@angular/router'; import { Collection } from "../core/shared/collection.model"; @@ -11,11 +14,13 @@ import { Item } from "../core/shared/item.model"; import { SortOptions, SortDirection } from "../core/cache/models/sort-options.model"; import { PaginationComponentOptions } from "../shared/pagination/pagination-component-options.model"; import { Observable } from "rxjs/Observable"; +import { hasValue } from "../shared/empty.util"; @Component({ selector: 'ds-collection-page', styleUrls: ['./collection-page.component.css'], templateUrl: './collection-page.component.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class CollectionPageComponent implements OnInit, OnDestroy { collectionData: RemoteData; @@ -45,7 +50,7 @@ export class CollectionPageComponent implements OnInit, OnDestroy { this.config = new PaginationComponentOptions(); this.config.id = "collection-browse"; - this.config.pageSizeOptions = [ 5, 10, 20, 40, 60, 80, 100 ]; + this.config.pageSizeOptions = [ 4 ]; this.config.pageSize = 4; this.sortConfig = new SortOptions(); @@ -55,7 +60,9 @@ export class CollectionPageComponent implements OnInit, OnDestroy { } ngOnDestroy(): void { - this.subs.forEach(sub => sub.unsubscribe()); + this.subs + .filter(sub => hasValue(sub)) + .forEach(sub => sub.unsubscribe()); } universalInit() { @@ -89,6 +96,6 @@ export class CollectionPageComponent implements OnInit, OnDestroy { elementsPerPage: this.config.pageSize, sort: this.sortConfig }); - this.ref.detectChanges(); + // this.ref.detectChanges(); } } diff --git a/src/app/community-page/community-page.component.ts b/src/app/community-page/community-page.component.ts index e1434fb21f..d3bd8aeeeb 100644 --- a/src/app/community-page/community-page.component.ts +++ b/src/app/community-page/community-page.component.ts @@ -6,6 +6,7 @@ import { Bitstream } from "../core/shared/bitstream.model"; import { RemoteData } from "../core/data/remote-data"; import { CommunityDataService } from "../core/data/community-data.service"; import { Subscription } from "rxjs/Subscription"; +import { hasValue } from "../shared/empty.util"; @Component({ selector: 'ds-community-page', @@ -33,9 +34,11 @@ export class CommunityPageComponent implements OnInit, OnDestroy { } ngOnDestroy(): void { - this.subs.forEach(sub => sub.unsubscribe()); + this.subs + .filter(sub => hasValue(sub)) + .forEach(sub => sub.unsubscribe()); } - + universalInit() { } -} \ No newline at end of file +} diff --git a/src/app/home/top-level-community-list/top-level-community-list.component.ts b/src/app/home/top-level-community-list/top-level-community-list.component.ts index ff47412bc6..c502c53591 100644 --- a/src/app/home/top-level-community-list/top-level-community-list.component.ts +++ b/src/app/home/top-level-community-list/top-level-community-list.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, ChangeDetectorRef } from '@angular/core'; +import { Component, OnInit, ChangeDetectorRef, ChangeDetectionStrategy } from '@angular/core'; import { RemoteData } from "../../core/data/remote-data"; import { CommunityDataService } from "../../core/data/community-data.service"; import { Community } from "../../core/shared/community.model"; @@ -8,7 +8,8 @@ import { SortOptions, SortDirection } from "../../core/cache/models/sort-options @Component({ selector: 'ds-top-level-community-list', styleUrls: ['./top-level-community-list.component.css'], - templateUrl: './top-level-community-list.component.html' + templateUrl: './top-level-community-list.component.html', + changeDetection: ChangeDetectionStrategy.OnPush }) export class TopLevelCommunityListComponent implements OnInit { topLevelCommunities: RemoteData; @@ -29,7 +30,7 @@ export class TopLevelCommunityListComponent implements OnInit { ngOnInit(): void { this.config = new PaginationComponentOptions(); this.config.id = "top-level-pagination"; - this.config.pageSizeOptions = [ 5, 10, 20, 40, 60, 80, 100 ]; + this.config.pageSizeOptions = [ 4 ]; this.config.pageSize = 4; this.sortConfig = new SortOptions(); @@ -59,6 +60,6 @@ export class TopLevelCommunityListComponent implements OnInit { updateResults() { this.topLevelCommunities = undefined; this.topLevelCommunities = this.cds.findAll({ currentPage: this.config.currentPage, elementsPerPage: this.config.pageSize, sort: this.sortConfig }); - this.ref.detectChanges(); + // this.ref.detectChanges(); } } diff --git a/src/app/shared/pagination/pagination.component.ts b/src/app/shared/pagination/pagination.component.ts index 62c518faa1..47b8729fb4 100644 --- a/src/app/shared/pagination/pagination.component.ts +++ b/src/app/shared/pagination/pagination.component.ts @@ -9,6 +9,7 @@ import { ViewEncapsulation } from '@angular/core' import { ActivatedRoute, Router } from '@angular/router'; +import { Subscription } from "rxjs/Subscription"; import { isNumeric } from "rxjs/util/isNumeric"; import 'rxjs/add/operator/switchMap'; import { Observable } from "rxjs"; @@ -139,13 +140,13 @@ export class PaginationComponent implements OnDestroy, OnInit { */ public paginationControls; + /** + * Array to track all subscriptions and unsubscribe them onDestroy + * @type {Array} + */ + private subs: Subscription[] = []; - /** - * Subscriber to observable. - */ - private routeSubscription: any; - - /** + /** * An object that represents pagination details of the current viewed page */ public showingDetail: any = { @@ -153,19 +154,14 @@ export class PaginationComponent implements OnDestroy, OnInit { total: null }; - /** - * Subscriber to observable. - */ - private stateSubscription: any; - /** * Method provided by Angular. Invoked after the constructor. */ ngOnInit() { - this.stateSubscription = this.hostWindowService.isXs() + this.subs.push(this.hostWindowService.isXs() .subscribe((status: boolean) => { this.isXs = status; - }); + })); this.checkConfig(this.paginationOptions); this.id = this.paginationOptions.id || null; this.currentPage = this.paginationOptions.currentPage; @@ -173,7 +169,7 @@ export class PaginationComponent implements OnDestroy, OnInit { this.pageSizeOptions = this.paginationOptions.pageSizeOptions; this.sortDirection = this.sortOptions.direction; this.sortField = this.sortOptions.field; - this.routeSubscription = this.route.queryParams + this.subs.push(this.route.queryParams .filter(queryParams => hasValue(queryParams)) .subscribe(queryParams => { this.currentQueryParams = queryParams; @@ -185,7 +181,7 @@ export class PaginationComponent implements OnDestroy, OnInit { ) { this.validateParams(queryParams['page'], queryParams['pageSize'], queryParams['sortDirection'], queryParams['sortField']); } - }); + })); this.setShowingDetail(); } @@ -193,8 +189,9 @@ export class PaginationComponent implements OnDestroy, OnInit { * Method provided by Angular. Invoked when the instance is destroyed. */ ngOnDestroy() { - this.stateSubscription.unsubscribe(); - this.routeSubscription.unsubscribe(); + this.subs + .filter(sub => hasValue(sub)) + .forEach(sub => sub.unsubscribe()); } /**