Fixed issue with pagination on the home page

src/app/+home-page/top-level-community-list/top-level-community-list.component.html

@@ -1,12 +1,12 @@
-<ng-container *ngVar="(communitiesRDObs | async) as communitiesRD">
-  <div *ngIf="communitiesRD?.hasSucceeded " @fadeInOut>
+<ng-container *ngVar="(communitiesRD$ | async) as communitiesRD">
+  <div *ngIf="communitiesRD?.hasSucceeded ">
   <h2>{{'home.top-level-communities.head' | translate}}</h2>
   <p class="lead">{{'home.top-level-communities.help' | translate}}</p>
   <ds-viewable-collection
     [config]="config"
     [sortConfig]="sortConfig"
-    [objects]="communitiesRD"
-    (paginationChange)="updatePage($event)">
+    [objects]="communitiesRD$ | async"
+    (paginationChange)="onPaginationChange($event)">
   </ds-viewable-collection>
 </div>
 <ds-error *ngIf="communitiesRD?.hasFailed " message="{{'error.top-level-communites' | translate}}"></ds-error>

src/app/+home-page/top-level-community-list/top-level-community-list.component.ts

@@ -1,5 +1,5 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { Observable } from 'rxjs';
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { BehaviorSubject, Observable } from 'rxjs';
 import { SortDirection, SortOptions } from '../../core/cache/models/sort-options.model';
 import { CommunityDataService } from '../../core/data/community-data.service';
 import { PaginatedList } from '../../core/data/paginated-list';
@@ -9,6 +9,7 @@ import { Community } from '../../core/shared/community.model';
 
 import { fadeInOut } from '../../shared/animations/fade';
 import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model';
+import { take } from 'rxjs/operators';
 
 @Component({
   selector: 'ds-top-level-community-list',
@@ -18,8 +19,8 @@ import { PaginationComponentOptions } from '../../shared/pagination/pagination-c
   animations: [fadeInOut]
 })
 
-export class TopLevelCommunityListComponent {
-  communitiesRDObs: Observable<RemoteData<PaginatedList<Community>>>;
+export class TopLevelCommunityListComponent implements OnInit {
+  communitiesRD$: BehaviorSubject<RemoteData<PaginatedList<Community>>> = new BehaviorSubject<RemoteData<PaginatedList<Community>>>({} as any);
   config: PaginationComponentOptions;
   sortConfig: SortOptions;
 
@@ -29,20 +30,28 @@ export class TopLevelCommunityListComponent {
     this.config.pageSize = 5;
     this.config.currentPage = 1;
     this.sortConfig = new SortOptions('dc.title', SortDirection.ASC);
-
-    this.updatePage({
-      page: this.config.currentPage,
-      pageSize: this.config.pageSize,
-      sortField: this.sortConfig.field,
-      direction: this.sortConfig.direction
-    });
   }
 
-  updatePage(data) {
-    this.communitiesRDObs = this.cds.findTop({
-      currentPage: data.page,
-      elementsPerPage: data.pageSize,
-      sort: { field: data.sortField, direction: data.sortDirection }
+  ngOnInit() {
+    this.updatePage();
+  }
+
+  onPaginationChange(event) {
+    console.log(event);
+    this.config.currentPage = event.page;
+    this.config.pageSize = event.pageSize;
+    this.sortConfig.field = event.sortField;
+    this.sortConfig.direction = event.sortDirection;
+    this.updatePage();
+  }
+
+  updatePage() {
+    this.cds.findTop({
+      currentPage: this.config.currentPage,
+      elementsPerPage: this.config.pageSize,
+      sort: { field: this.sortConfig.field, direction: this.sortConfig.direction }
+    }).pipe(take(1)).subscribe((results) => {
+      this.communitiesRD$.next(results);
     });
   }
 }

src/app/shared/object-collection/object-collection.component.html

@@ -2,6 +2,11 @@
                 [sortConfig]="sortConfig"
                 [objects]="objects"
                 [hideGear]="hideGear"
+                (paginationChange)="onPaginationChange($event)"
+                (pageChange)="onPageChange($event)"
+                (pageSizeChange)="onPageSizeChange($event)"
+                (sortDirectionChange)="onSortDirectionChange($event)"
+                (sortFieldChange)="onSortFieldChange($event)"
                 *ngIf="getViewMode()===viewModeEnum.List">
 </ds-object-list>
 
@@ -9,6 +14,11 @@
                 [sortConfig]="sortConfig"
                 [objects]="objects"
                 [hideGear]="hideGear"
+                (paginationChange)="onPaginationChange($event)"
+                (pageChange)="onPageChange($event)"
+                (pageSizeChange)="onPageSizeChange($event)"
+                (sortDirectionChange)="onSortDirectionChange($event)"
+                (sortFieldChange)="onSortFieldChange($event)"
                 *ngIf="getViewMode()===viewModeEnum.Grid">
 </ds-object-grid>