resolvers for collection, community, item page

src/app/+collection-page/collection-page-routing.module.ts

@@ -2,7 +2,7 @@ import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
 import { CollectionPageComponent } from './collection-page.component';
-import { CollectionPageResolverService } from './collection-page-resolver.service';
+import { CollectionPageResolver } from './collection-page.resolver';
 
 @NgModule({
   imports: [
@@ -11,12 +11,14 @@ import { CollectionPageResolverService } from './collection-page-resolver.servic
         path: ':id',
         component: CollectionPageComponent,
         pathMatch: 'full',
-        resolve: { collection: CollectionPageResolverService }
+        resolve: {
+          collection: CollectionPageResolver
+        }
       }
     ])
   ],
   providers: [
-    CollectionPageResolverService
+    CollectionPageResolver,
   ]
 })
 export class CollectionPageRoutingModule {

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

@@ -1,6 +1,6 @@
 <div class="container">
   <div class="collection-page"
-       *ngVar="(collectionRDObs | async) as collectionRD">
+       *ngVar="(collectionRD$ | async) as collectionRD">
     <div *ngIf="collectionRD?.hasSucceeded" @fadeInOut>
       <div *ngIf="collectionRD?.payload as collection">
         <!-- Collection Name -->
@@ -8,8 +8,8 @@
           [name]="collection.name">
         </ds-comcol-page-header>
         <!-- Collection logo -->
-        <ds-comcol-page-logo *ngIf="logoRDObs"
+        <ds-comcol-page-logo *ngIf="logoRD$"
-                             [logo]="(logoRDObs | async)?.payload"
+                             [logo]="(logoRD$ | async)?.payload"
                              [alternateText]="'Collection Logo'">
         </ds-comcol-page-logo>
         <!-- Introductionary text -->
@@ -35,17 +35,17 @@
         </ds-comcol-page-content>
       </div>
     </div>
-    <ds-error *ngIf="collectionRD?.hasFailed" message="{{'error.collection' | translate}}"></ds-error>
+    <ds-error *ngIf="collectionRD?.hasFailed"0 message="{{'error.collection' | translate}}"></ds-error>
     <ds-loading *ngIf="collectionRD?.isLoading" message="{{'loading.collection' | translate}}"></ds-loading>
     <br>
-    <ng-container *ngVar="(itemRDObs | async) as itemRD">
+    <ng-container *ngVar="(itemRD$ | async) as itemRD">
       <div *ngIf="itemRD?.hasSucceeded" @fadeIn>
         <h2>{{'collection.page.browse.recent.head' | translate}}</h2>
         <ds-viewable-collection
           [config]="paginationConfig"
           [sortConfig]="sortConfig"
           [objects]="itemRD"
-          [hideGear]="false"
+          [hideGear]="true"
           (paginationChange)="onPaginationChange($event)">
         </ds-viewable-collection>
       </div>

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

@@ -18,6 +18,7 @@ import { Item } from '../core/shared/item.model';
 import { fadeIn, fadeInOut } from '../shared/animations/fade';
 import { hasValue, isNotEmpty } from '../shared/empty.util';
 import { PaginationComponentOptions } from '../shared/pagination/pagination-component-options.model';
+import { filter, flatMap, map } from 'rxjs/operators';
 
 @Component({
   selector: 'ds-collection-page',
@@ -30,9 +31,9 @@ import { PaginationComponentOptions } from '../shared/pagination/pagination-comp
   ]
 })
 export class CollectionPageComponent implements OnInit, OnDestroy {
-  collectionRDObs: Observable<RemoteData<Collection>>;
+  collectionRD$: Observable<RemoteData<Collection>>;
-  itemRDObs: Observable<RemoteData<PaginatedList<Item>>>;
+  itemRD$: Observable<RemoteData<PaginatedList<Item>>>;
-  logoRDObs: Observable<RemoteData<Bitstream>>;
+  logoRD$: Observable<RemoteData<Bitstream>>;
   paginationConfig: PaginationComponentOptions;
   sortConfig: SortOptions;
   private subs: Subscription[] = [];
@@ -44,55 +45,44 @@ export class CollectionPageComponent implements OnInit, OnDestroy {
     private metadata: MetadataService,
     private route: ActivatedRoute
   ) {
-    // this.route.snapshot.data.subscribe((c) => console.log(c));
     this.paginationConfig = new PaginationComponentOptions();
     this.paginationConfig.id = 'collection-page-pagination';
     this.paginationConfig.pageSize = 5;
     this.paginationConfig.currentPage = 1;
-    this.sortConfig = new SortOptions('dc.title', SortDirection.ASC);
+    this.sortConfig = new SortOptions('dc.date.accessioned', SortDirection.DESC);
   }
 
   ngOnInit(): void {
-    this.route.data.subscribe((data) => {
+    this.collectionRD$ = this.route.data.map((data) => data.collection);
-      console.log('data.collection', data.collection.state, data.collection)
+    this.logoRD$ = this.collectionRD$.pipe(
-    })
+      map((rd: RemoteData<Collection>) => rd.payload),
+      filter((collection: Collection) => hasValue(collection)),
+      flatMap((collection: Collection) => collection.logo)
+    );
     this.subs.push(
-      Observable.combineLatest(
+      this.route.queryParams.subscribe((params) => {
-        this.route.params,
+        this.metadata.processRemoteData(this.collectionRD$);
-        this.route.queryParams,
+        const page = +params.page || this.paginationConfig.currentPage;
-        (params, queryParams, ) => {
+        const pageSize = +params.pageSize || this.paginationConfig.pageSize;
-          return Object.assign({}, params, queryParams);
+        const sortDirection = +params.page || this.sortConfig.direction;
-        })
+        const pagination = Object.assign({},
-        .subscribe((params) => {
+          this.paginationConfig,
-          this.collectionId = params.id;
+          { currentPage: page, pageSize: pageSize }
-          this.collectionRDObs = this.collectionDataService.findById(this.collectionId);
+        );
-          this.metadata.processRemoteData(this.collectionRDObs);
+        const sort = Object.assign({},
-          this.subs.push(this.collectionRDObs
+          this.sortConfig,
-            .map((rd: RemoteData<Collection>) => rd.payload)
+          { direction: sortDirection, field: params.sortField }
-            .filter((collection: Collection) => hasValue(collection))
+        );
-            .subscribe((collection: Collection) => this.logoRDObs = collection.logo));
+        this.updatePage({
-
+          pagination: pagination,
-          const page = +params.page || this.paginationConfig.currentPage;
+          sort: sort
-          const pageSize = +params.pageSize || this.paginationConfig.pageSize;
+        });
-          const sortDirection = +params.page || this.sortConfig.direction;
+      }));
-          const pagination = Object.assign({},
-            this.paginationConfig,
-            { currentPage: page, pageSize: pageSize }
-          );
-          const sort = Object.assign({},
-            this.sortConfig,
-            { direction: sortDirection, field: params.sortField }
-          );
-          this.updatePage({
-            pagination: pagination,
-            sort: sort
-          });
-        }));
 
   }
 
   updatePage(searchOptions) {
-    this.itemRDObs = this.itemDataService.findAll({
+    this.itemRD$ = this.itemDataService.findAll({
       scopeID: this.collectionId,
       currentPage: searchOptions.pagination.currentPage,
       elementsPerPage: searchOptions.pagination.pageSize,

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

@@ -1,20 +1,20 @@
 import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, Resolve, Router, RouterStateSnapshot } from '@angular/router';
+import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
 import { Collection } from '../core/shared/collection.model';
 import { Observable } from 'rxjs/Observable';
 import { CollectionDataService } from '../core/data/collection-data.service';
 import { RemoteData } from '../core/data/remote-data';
-import { filter, first, takeUntil } from 'rxjs/operators';
+import { getSucceededRemoteData } from '../core/shared/operators';
 
 @Injectable()
-export class CollectionPageResolverService implements Resolve<RemoteData<Collection>> {
+export class CollectionPageResolver implements Resolve<RemoteData<Collection>> {
-  constructor(private collectionService: CollectionDataService, private router: Router) {
+  constructor(private collectionService: CollectionDataService) {
   }
 
   resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<RemoteData<Collection>> {
+
     return this.collectionService.findById(route.params.id).pipe(
-      filter((rd: RemoteData<Collection>) => rd.hasSucceeded),
+      getSucceededRemoteData()
-      first()
     );
   }
 }

src/app/+community-page/community-page-routing.module.ts

@@ -2,12 +2,23 @@ import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
 import { CommunityPageComponent } from './community-page.component';
+import { CommunityPageResolver } from './community-page.resolver';
 
 @NgModule({
   imports: [
     RouterModule.forChild([
-      { path: ':id', component: CommunityPageComponent, pathMatch: 'full' }
+      {
+        path: ':id',
+        component: CommunityPageComponent,
+        pathMatch: 'full',
+        resolve: {
+          community: CommunityPageResolver
+        }
+      }
     ])
+  ],
+  providers: [
+    CommunityPageResolver,
   ]
 })
 export class CommunityPageRoutingModule {

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

@@ -1,11 +1,11 @@
-<div class="container" *ngVar="(communityRDObs | async) as communityRD">
+<div class="container" *ngVar="(communityRD$ | async) as communityRD">
   <div class="community-page" *ngIf="communityRD?.hasSucceeded" @fadeInOut>
     <div *ngIf="communityRD?.payload; let communityPayload">
       <!-- Community name -->
       <ds-comcol-page-header [name]="communityPayload.name"></ds-comcol-page-header>
       <!-- Community logo -->
-      <ds-comcol-page-logo *ngIf="logoRDObs"
+      <ds-comcol-page-logo *ngIf="logoRD$"
-                           [logo]="(logoRDObs | async)?.payload"
+                           [logo]="(logoRD$ | async)?.payload"
                            [alternateText]="'Community Logo'">
       </ds-comcol-page-logo>
       <!-- Introductory text -->

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

@@ -22,8 +22,8 @@ import { Observable } from 'rxjs/Observable';
   animations: [fadeInOut]
 })
 export class CommunityPageComponent implements OnInit, OnDestroy {
-  communityRDObs: Observable<RemoteData<Community>>;
+  communityRD$: Observable<RemoteData<Community>>;
-  logoRDObs: Observable<RemoteData<Bitstream>>;
+  logoRD$: Observable<RemoteData<Bitstream>>;
   private subs: Subscription[] = [];
 
   constructor(
@@ -35,14 +35,11 @@ export class CommunityPageComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit(): void {
-    this.route.params.subscribe((params: Params) => {
+    this.communityRD$ = this.route.data.map((data) => data.community);
-      this.communityRDObs = this.communityDataService.findById(params.id);
+    this.logoRD$ = this.communityRD$
-      this.metadata.processRemoteData(this.communityRDObs);
+      .map((rd: RemoteData<Community>) => rd.payload)
-      this.subs.push(this.communityRDObs
+      .filter((community: Community) => hasValue(community))
-        .map((rd: RemoteData<Community>) => rd.payload)
+      .flatMap((community: Community) => community.logo);
-        .filter((community: Community) => hasValue(community))
-        .subscribe((community: Community) => this.logoRDObs = community.logo));
-    });
   }
 
   ngOnDestroy(): void {

src/app/+community-page/community-page.resolver.ts

@@ -0,0 +1,20 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
+import { Observable } from 'rxjs/Observable';
+import { RemoteData } from '../core/data/remote-data';
+import { getSucceededRemoteData } from '../core/shared/operators';
+import { Community } from '../core/shared/community.model';
+import { CommunityDataService } from '../core/data/community-data.service';
+
+@Injectable()
+export class CommunityPageResolver implements Resolve<RemoteData<Community>> {
+  constructor(private communityService: CommunityDataService) {
+  }
+
+  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<RemoteData<Community>> {
+
+    return this.communityService.findById(route.params.id).pipe(
+      getSucceededRemoteData()
+    );
+  }
+}

src/app/+item-page/full/full-item-page.component.html

@@ -1,4 +1,4 @@
-<div class="container" *ngVar="(itemRDObs | async) as itemRD">
+<div class="container" *ngVar="(itemRD$ | async) as itemRD">
   <div class="item-page" *ngIf="itemRD?.hasSucceeded" @fadeInOut>
     <div *ngIf="itemRD?.payload as item">
       <ds-item-page-title-field [item]="item"></ds-item-page-title-field>
@@ -9,7 +9,7 @@
       </div>
       <table class="table table-responsive table-striped">
         <tbody>
-        <tr *ngFor="let metadatum of (metadataObs | async)">
+        <tr *ngFor="let metadatum of (metadata$ | async)">
           <td>{{metadatum.key}}</td>
           <td>{{metadatum.value}}</td>
           <td>{{metadatum.language}}</td>

src/app/+item-page/full/full-item-page.component.ts

@@ -30,9 +30,9 @@ import { hasValue } from '../../shared/empty.util';
 })
 export class FullItemPageComponent extends ItemPageComponent implements OnInit {
 
-  itemRDObs: Observable<RemoteData<Item>>;
+  itemRD$: Observable<RemoteData<Item>>;
 
-  metadataObs: Observable<Metadatum[]>;
+  metadata$: Observable<Metadatum[]>;
 
   constructor(route: ActivatedRoute, items: ItemDataService, metadataService: MetadataService) {
     super(route, items, metadataService);
@@ -41,14 +41,9 @@ export class FullItemPageComponent extends ItemPageComponent implements OnInit {
   /*** AoT inheritance fix, will hopefully be resolved in the near future **/
   ngOnInit(): void {
     super.ngOnInit();
-  }
+    this.metadata$ = this.itemRD$
-
-  initialize(params) {
-    super.initialize(params);
-    this.metadataObs = this.itemRDObs
       .map((rd: RemoteData<Item>) => rd.payload)
       .filter((item: Item) => hasValue(item))
       .map((item: Item) => item.metadata);
   }
-
 }

src/app/+item-page/item-page-routing.module.ts

@@ -3,13 +3,30 @@ import { RouterModule } from '@angular/router';
 
 import { ItemPageComponent } from './simple/item-page.component';
 import { FullItemPageComponent } from './full/full-item-page.component';
+import { ItemPageResolver } from './item-page.resolver';
 
 @NgModule({
   imports: [
     RouterModule.forChild([
-      { path: ':id', component: ItemPageComponent, pathMatch: 'full' },
+      {
-      { path: ':id/full', component: FullItemPageComponent }
+        path: ':id',
+        component: ItemPageComponent,
+        pathMatch: 'full',
+        resolve: {
+          item: ItemPageResolver
+        }
+      },
+      {
+        path: ':id/full',
+        component: FullItemPageComponent,
+        resolve: {
+          item: ItemPageResolver
+        }
+      }
     ])
+  ],
+  providers: [
+    ItemPageResolver,
   ]
 })
 export class ItemPageRoutingModule {

src/app/+item-page/item-page.resolver.ts

@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
+import { Observable } from 'rxjs/Observable';
+import { RemoteData } from '../core/data/remote-data';
+import { getSucceededRemoteData } from '../core/shared/operators';
+import { ItemDataService } from '../core/data/item-data.service';
+import { Item } from '../core/shared/item.model';
+
+@Injectable()
+export class ItemPageResolver implements Resolve<RemoteData<Item>> {
+  constructor(private itemService: ItemDataService) {
+  }
+
+  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<RemoteData<Item>> {
+    return this.itemService.findById(route.params.id).pipe(
+      getSucceededRemoteData()
+    );
+  }
+}

src/app/+item-page/simple/item-page.component.html

@@ -1,11 +1,11 @@
-<div class="container" *ngVar="(itemRDObs | async) as itemRD">
+<div class="container" *ngVar="(itemRD$ | async) as itemRD">
   <div class="item-page" *ngIf="itemRD?.hasSucceeded" @fadeInOut>
     <div *ngIf="itemRD?.payload as item">
       <ds-item-page-title-field [item]="item"></ds-item-page-title-field>
       <div class="row">
         <div class="col-xs-12 col-md-4">
           <ds-metadata-field-wrapper>
-            <ds-thumbnail [thumbnail]="thumbnailObs | async"></ds-thumbnail>
+            <ds-thumbnail [thumbnail]="thumbnail$ | async"></ds-thumbnail>
           </ds-metadata-field-wrapper>
           <ds-item-page-file-section [item]="item"></ds-item-page-file-section>
           <ds-item-page-date-field [item]="item"></ds-item-page-date-field>

src/app/+item-page/simple/item-page.component.ts

@@ -31,9 +31,9 @@ export class ItemPageComponent implements OnInit {
 
   private sub: any;
 
-  itemRDObs: Observable<RemoteData<Item>>;
+  itemRD$: Observable<RemoteData<Item>>;
 
-  thumbnailObs: Observable<Bitstream>;
+  thumbnail$: Observable<Bitstream>;
 
   constructor(
     private route: ActivatedRoute,
@@ -44,19 +44,11 @@ export class ItemPageComponent implements OnInit {
   }
 
   ngOnInit(): void {
-    this.sub = this.route.params.subscribe((params) => {
+    this.itemRD$ = this.route.data.map((data) => data.item);
-      this.initialize(params);
+    this.metadataService.processRemoteData(this.itemRD$);
-    });
+    this.thumbnail$ = this.itemRD$
-  }
-
-  initialize(params) {
-    this.id = +params.id;
-    this.itemRDObs = this.items.findById(params.id);
-    this.metadataService.processRemoteData(this.itemRDObs);
-    this.thumbnailObs = this.itemRDObs
       .map((rd: RemoteData<Item>) => rd.payload)
       .filter((item: Item) => hasValue(item))
       .flatMap((item: Item) => item.getThumbnail());
   }
-
 }

src/app/+search-page/search-filters/search-filter/search-facet-filter/search-facet-filter.component.ts

@@ -16,6 +16,8 @@ import { SearchFilterConfig } from '../../../search-service/search-filter-config
 import { SearchService } from '../../../search-service/search.service';
 import { FILTER_CONFIG, SearchFilterService } from '../search-filter.service';
 import { SearchConfigurationService } from '../../../search-service/search-configuration.service';
+import { getSucceededRemoteData } from '../../../../core/shared/operators';
+import { map } from 'rxjs/operators';
 
 @Component({
   selector: 'ds-search-facet-filter',
@@ -88,13 +90,16 @@ export class SearchFacetFilterComponent implements OnInit, OnDestroy {
       return { options, page }
     }).switchMap(({ options, page }) => {
       return this.searchService.getFacetValuesFor(this.filterConfig, page, options)
-        .first((RD) => !RD.isLoading).map((results) => {
+        .pipe(
-          return {
+          getSucceededRemoteData(),
-            values: Observable.of(results),
+          map((results) => {
-            page: page
+              return {
-          };
+                values: Observable.of(results),
-        }
+                page: page
-      );
+              };
+            }
+          )
+        )
     });
     let filterValues = [];
     this.subs.push(facetValues.subscribe((facetOutcome) => {
@@ -250,14 +255,15 @@ export class SearchFacetFilterComponent implements OnInit, OnDestroy {
       this.searchConfigService.searchOptions.first().subscribe(
         (options) => {
           this.filterSearchResults = this.searchService.getFacetValuesFor(this.filterConfig, 1, options, data.toLowerCase())
-            .first()
+            .pipe(
-            .map(
+              getSucceededRemoteData(),
-              (rd: RemoteData<PaginatedList<FacetValue>>) => {
+              map(
-                return rd.payload.page.map((facet) => {
+                (rd: RemoteData<PaginatedList<FacetValue>>) => {
-                  return { displayValue: this.getDisplayValue(facet, data), value: facet.value }
+                  return rd.payload.page.map((facet) => {
-                })
+                    return { displayValue: this.getDisplayValue(facet, data), value: facet.value }
-              }
+                  })
-            );
+                }
+              ))
         }
       )
     } else {

src/app/+search-page/search-filters/search-filters.component.ts

@@ -6,6 +6,7 @@ import { Observable } from 'rxjs/Observable';
 import { SearchConfigurationService } from '../search-service/search-configuration.service';
 import { isNotEmpty } from '../../shared/empty.util';
 import { SearchFilterService } from './search-filter/search-filter.service';
+import { getSucceededRemoteData } from '../../core/shared/operators';
 
 @Component({
   selector: 'ds-search-filters',
@@ -35,7 +36,7 @@ export class SearchFiltersComponent {
    * @param {SearchFilterService} filterService
    */
   constructor(private searchService: SearchService, private searchConfigService: SearchConfigurationService, private filterService: SearchFilterService) {
-    this.filters = searchService.getConfig().first((RD) => !RD.isLoading);
+    this.filters = searchService.getConfig().pipe(getSucceededRemoteData());
     this.clearParams = searchConfigService.getCurrentFrontendFilters().map((filters) => {
       Object.keys(filters).forEach((f) => filters[f] = null);
       return filters;

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

@@ -15,6 +15,7 @@ import { Subscription } from 'rxjs/Subscription';
 import { hasValue } from '../shared/empty.util';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 import { SearchConfigurationService } from './search-service/search-configuration.service';
+import { getSucceededRemoteData } from '../core/shared/operators';
 
 /**
  * This component renders a simple item page.
@@ -78,7 +79,7 @@ export class SearchPageComponent implements OnInit {
   ngOnInit(): void {
     this.searchOptions$ = this.searchConfigService.paginatedSearchOptions;
     this.sub = this.searchOptions$
-      .switchMap((options) => this.service.search(options).filter((rd) => !rd.isLoading).first())
+      .switchMap((options) => this.service.search(options).pipe(getSucceededRemoteData()))
       .subscribe((results) => {
         this.resultsRD$.next(results);
       });

src/app/+search-page/search-service/search-configuration.service.ts

@@ -10,6 +10,7 @@ import { hasNoValue, isEmpty, isNotEmpty } from '../../shared/empty.util';
 import { RemoteData } from '../../core/data/remote-data';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 import { Subscription } from 'rxjs/Subscription';
+import { getSucceededRemoteData } from '../../core/shared/operators';
 
 /**
  * Service that performs all actions that have to do with the current search configuration
@@ -67,15 +68,17 @@ export class SearchConfigurationService implements OnDestroy {
    */
   constructor(private routeService: RouteService,
               private route: ActivatedRoute) {
-    this.defaults.first().subscribe((defRD) => {
+    this.defaults
-        const defs = defRD.payload;
+      .pipe(getSucceededRemoteData())
-        this.paginatedSearchOptions = new BehaviorSubject<SearchOptions>(defs);
+      .subscribe((defRD) => {
-        this.searchOptions = new BehaviorSubject<PaginatedSearchOptions>(defs);
+          const defs = defRD.payload;
+          this.paginatedSearchOptions = new BehaviorSubject<SearchOptions>(defs);
+          this.searchOptions = new BehaviorSubject<PaginatedSearchOptions>(defs);
 
-        this.subs.push(this.subscribeToSearchOptions(defs));
+          this.subs.push(this.subscribeToSearchOptions(defs));
-        this.subs.push(this.subscribeToPaginatedSearchOptions(defs));
+          this.subs.push(this.subscribeToPaginatedSearchOptions(defs));
-      }
+        }
-    )
+      )
   }
 
   /**

src/app/core/shared/operators.ts

@@ -1,5 +1,5 @@
 import { Observable } from 'rxjs/Observable';
-import { filter, flatMap, map, tap } from 'rxjs/operators';
+import { filter, first, flatMap, map, tap } from 'rxjs/operators';
 import { hasValueOperator } from '../../shared/empty.util';
 import { DSOSuccessResponse } from '../cache/response-cache.models';
 import { ResponseCacheEntry } from '../cache/response-cache.reducer';
@@ -45,3 +45,7 @@ export const configureRequest = (requestService: RequestService) =>
 export const getRemoteDataPayload = () =>
   <T>(source: Observable<RemoteData<T>>): Observable<T> =>
     source.pipe(map((remoteData: RemoteData<T>) => remoteData.payload));
+
+export const getSucceededRemoteData = () =>
+  <T>(source: Observable<RemoteData<T>>): Observable<RemoteData<T>> =>
+    source.pipe(first((rd: RemoteData<T>) => rd.hasSucceeded));