refactor done, todo fix tests

src/app/+collection-page/collection-page.component.html

@@ -1,13 +1,13 @@
 <div class="collection-page">
-  <div *ngIf="collectionData.hasSucceeded | async" @fadeInOut>
-    <div *ngIf="collectionData.payload | async; let collectionPayload">
+  <div *ngIf="(collectionData | async)?.hasSucceeded" @fadeInOut>
+    <div *ngIf="(collectionData | async)?.payload; let collectionPayload">
       <!-- Collection Name -->
       <ds-comcol-page-header
         [name]="collectionPayload.name">
       </ds-comcol-page-header>
       <!-- Collection logo -->
       <ds-comcol-page-logo *ngIf="logoData"
-        [logo]="logoData.payload | async"
+        [logo]="(logoData | async)?.payload"
         [alternateText]="'Collection Logo'">
       </ds-comcol-page-logo>
       <!-- Introductionary text -->
@@ -33,18 +33,19 @@
       </ds-comcol-page-content>
     </div>
   </div>
-  <ds-error *ngIf="collectionData.hasFailed | async" message="{{'error.collection' | translate}}"></ds-error>
-  <ds-loading *ngIf="collectionData.isLoading | async" message="{{'loading.collection' | translate}}"></ds-loading>
+  <ds-error *ngIf="(collectionData | async)?.hasFailed" message="{{'error.collection' | translate}}"></ds-error>
+  <ds-loading *ngIf="(collectionData | async)?.isLoading" message="{{'loading.collection' | translate}}"></ds-loading>
   <br>
-  <div *ngIf="itemData.hasSucceeded | async" @fadeIn>
+  <div *ngIf="itemData?.hasSucceeded" @fadeIn>
     <h2>{{'collection.page.browse.recent.head' | translate}}</h2>
     <ds-object-list
       [config]="paginationConfig"
       [sortConfig]="sortConfig"
       [objects]="itemData"
-      [hideGear]="false">
+      [hideGear]="false"
+      (paginationChange)="onPaginationChange($event)">
     </ds-object-list>
   </div>
-  <ds-error *ngIf="itemData.hasFailed | async" message="{{'error.items' | translate}}"></ds-error>
-  <ds-loading *ngIf="itemData.isLoading | async" message="{{'loading.items' | translate}}"></ds-loading>
+  <ds-error *ngIf="itemData?.hasFailed" message="{{'error.items' | translate}}"></ds-error>
+  <ds-loading *ngIf="itemData?.isLoading" message="{{'loading.items' | translate}}"></ds-loading>
 </div>

src/app/+collection-page/collection-page.component.ts

@@ -7,13 +7,13 @@ import { SortOptions } from '../core/cache/models/sort-options.model';
 import { CollectionDataService } from '../core/data/collection-data.service';
 import { ItemDataService } from '../core/data/item-data.service';
 import { RemoteData } from '../core/data/remote-data';
+
+import { MetadataService } from '../core/metadata/metadata.service';
 import { Bitstream } from '../core/shared/bitstream.model';
 
 import { Collection } from '../core/shared/collection.model';
 import { Item } from '../core/shared/item.model';
 
-import { MetadataService } from '../core/metadata/metadata.service';
-
 import { fadeIn, fadeInOut } from '../shared/animations/fade';
 import { hasValue, isNotEmpty } from '../shared/empty.util';
 import { PaginationComponentOptions } from '../shared/pagination/pagination-component-options.model';
@@ -29,9 +29,9 @@ import { PaginationComponentOptions } from '../shared/pagination/pagination-comp
   ]
 })
 export class CollectionPageComponent implements OnInit, OnDestroy {
-  collectionData: RemoteData<Collection>;
+  collectionData: Observable<RemoteData<Collection>>;
   itemData: RemoteData<Item[]>;
-  logoData: RemoteData<Bitstream>;
+  logoData: Observable<RemoteData<Bitstream>>;
   paginationConfig: PaginationComponentOptions;
   sortConfig: SortOptions;
   private subs: Subscription[] = [];
@@ -62,7 +62,10 @@ export class CollectionPageComponent implements OnInit, OnDestroy {
           this.collectionId = params.id;
           this.collectionData = this.collectionDataService.findById(this.collectionId);
           this.metadata.processRemoteData(this.collectionData);
-          this.subs.push(this.collectionData.payload.subscribe((collection) => this.logoData = collection.logo));
+          this.subs.push(this.collectionData
+            .map((rd: RemoteData<Collection>) => rd.payload)
+            .filter((collection: Collection) => hasValue(collection))
+            .subscribe((collection: Collection) => this.logoData = collection.logo));
 
           const page = +params.page || this.paginationConfig.currentPage;
           const pageSize = +params.pageSize || this.paginationConfig.pageSize;
@@ -84,12 +87,14 @@ export class CollectionPageComponent implements OnInit, OnDestroy {
   }
 
   updatePage(searchOptions) {
-    this.itemData = this.itemDataService.findAll({
+    this.subs.push(this.itemDataService.findAll({
       scopeID: this.collectionId,
       currentPage: searchOptions.pagination.currentPage,
       elementsPerPage: searchOptions.pagination.pageSize,
       sort: searchOptions.sort
-    });
+    }).subscribe((rd: RemoteData<Item[]>) => {
+      this.itemData = rd;
+    }));
   }
 
   ngOnDestroy(): void {
@@ -99,4 +104,17 @@ export class CollectionPageComponent implements OnInit, OnDestroy {
   isNotEmpty(object: any) {
     return isNotEmpty(object);
   }
+
+  onPaginationChange(event) {
+    this.updatePage({
+      pagination: {
+        currentPage: event.page,
+        pageSize: event.pageSize
+      },
+      sort: {
+        field: event.sortField,
+        direction: event.sortDirection
+      }
+    })
+  }
 }