64574: Refactor item-pages to use paginated-lists and relationship-service

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

@@ -29,7 +29,7 @@
   <div class="col-xs-12 col-md-6">
     <ds-metadata-representation-list
       [label]="'relationships.isAuthorOf' | translate"
-      [representations]="authors$ | async">
+      [representations]="(authors$ | async)?.payload?.page">
     </ds-metadata-representation-list>
     <ds-related-items
       [items]="(projects$ | async)?.payload?.page"

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

@@ -7,7 +7,6 @@ import {
 } from '../../../../shared/items/item-type-decorator';
 import { ItemComponent } from '../shared/item.component';
 import { MetadataRepresentation } from '../../../../core/shared/metadata-representation/metadata-representation.model';
-import { getRelatedItemsByTypeLabel } from '../shared/item-relationships-utils';
 import { RemoteData } from '../../../../core/data/remote-data';
 import { PaginatedList } from '../../../../core/data/paginated-list';
 
@@ -23,7 +22,7 @@ export class PublicationComponent extends ItemComponent implements OnInit {
   /**
    * The authors related to this publication
    */
-  authors$: Observable<MetadataRepresentation[]>;
+  authors$: Observable<RemoteData<PaginatedList<MetadataRepresentation>>>;
 
   /**
    * The projects related to this publication
@@ -41,16 +40,10 @@ export class PublicationComponent extends ItemComponent implements OnInit {
   journalIssues$: Observable<RemoteData<PaginatedList<Item>>>;
 
   ngOnInit(): void {
-    super.ngOnInit();
+    this.authors$ = this.buildRepresentations('Person', 'dc.contributor.author', 'isAuthorOfPublication');
 
-    if (this.resolvedRelsAndTypes$) {
+    this.projects$ = this.relationshipService.getRelatedItemsByLabel(this.item, 'isProjectOfPublication');
-
+    this.orgUnits$ = this.relationshipService.getRelatedItemsByLabel(this.item, 'isOrgUnitOfPublication');
-      this.authors$ = this.buildRepresentations('Person', 'dc.contributor.author');
+    this.journalIssues$ = this.relationshipService.getRelatedItemsByLabel(this.item, 'isJournalIssueOfPublication');
-
-      this.projects$ = this.relationshipService.getRelatedItemsByLabel(this.item, 'isProjectOfPublication');
-      this.orgUnits$ = this.relationshipService.getRelatedItemsByLabel(this.item, 'isOrgUnitOfPublication');
-      this.journalIssues$ = this.relationshipService.getRelatedItemsByLabel(this.item, 'isJournalIssueOfPublication');
-
-    }
   }
 }

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

@@ -1,20 +1,16 @@
-import { Component, Inject, OnInit } from '@angular/core';
+import { Component, Inject } from '@angular/core';
 import { Observable ,  zip as observableZip, combineLatest as observableCombineLatest } from 'rxjs';
-import { distinctUntilChanged, filter, flatMap, map } from 'rxjs/operators';
+import { filter, flatMap, map } from 'rxjs/operators';
-import { ItemDataService } from '../../../../core/data/item-data.service';
 import { PaginatedList } from '../../../../core/data/paginated-list';
 import { RemoteData } from '../../../../core/data/remote-data';
-import { RelationshipType } from '../../../../core/shared/item-relationships/relationship-type.model';
 import { Relationship } from '../../../../core/shared/item-relationships/relationship.model';
 import { Item } from '../../../../core/shared/item.model';
-import { getRemoteDataPayload, getSucceededRemoteData } from '../../../../core/shared/operators';
 import { ITEM } from '../../../../shared/items/switcher/item-type-switcher.component';
 import { MetadataRepresentation } from '../../../../core/shared/metadata-representation/metadata-representation.model';
 import { ItemMetadataRepresentation } from '../../../../core/shared/metadata-representation/item/item-metadata-representation.model';
 import { MetadatumRepresentation } from '../../../../core/shared/metadata-representation/metadatum/metadatum-representation.model';
 import { of } from 'rxjs/internal/observable/of';
 import { MetadataValue } from '../../../../core/shared/metadata.models';
-import { compareArraysUsingIds } from './item-relationships-utils';
 import { RelationshipService } from '../../../../core/data/relationship.service';
 
 /**
@@ -24,15 +20,15 @@ import { RelationshipService } from '../../../../core/data/relationship.service'
  * @param metadata    The list of original Metadatum objects
  */
 export const relationsToRepresentations = (thisId: string, itemType: string, metadata: MetadataValue[]) =>
-  (source: Observable<Relationship[]>): Observable<MetadataRepresentation[]> =>
+  (source: Observable<RemoteData<PaginatedList<Relationship>>>): Observable<RemoteData<PaginatedList<MetadataRepresentation>>> =>
     source.pipe(
-      flatMap((rels: Relationship[]) =>
+      flatMap((relRD: RemoteData<PaginatedList<Relationship>>) =>
         observableZip(
           ...metadata
             .map((metadatum: any) => Object.assign(new MetadataValue(), metadatum))
             .map((metadatum: MetadataValue) => {
             if (metadatum.isVirtual) {
-              const matchingRels = rels.filter((rel: Relationship) => ('' + rel.id) === metadatum.virtualValue);
+              const matchingRels = relRD.payload.page.filter((rel: Relationship) => ('' + rel.id) === metadatum.virtualValue);
               if (matchingRels.length > 0) {
                 const matchingRel = matchingRels[0];
                 return observableCombineLatest(matchingRel.leftItem, matchingRel.rightItem).pipe(
@@ -51,6 +47,8 @@ export const relationsToRepresentations = (thisId: string, itemType: string, met
               return of(Object.assign(new MetadatumRepresentation(itemType), metadatum));
             }
           })
+        ).pipe(
+          map((representations: MetadataRepresentation[]) => Object.assign(relRD, { payload: { page: representations } }))
         )
       )
     );
@@ -62,59 +60,25 @@ export const relationsToRepresentations = (thisId: string, itemType: string, met
 /**
  * A generic component for displaying metadata and relations of an item
  */
-export class ItemComponent implements OnInit {
+export class ItemComponent {
-  /**
-   * Resolved relationships and types together in one observable
-   */
-  resolvedRelsAndTypes$: Observable<[Relationship[], RelationshipType[]]>;
 
   constructor(
     @Inject(ITEM) public item: Item,
     public relationshipService: RelationshipService
   ) {}
 
-  ngOnInit(): void {
-    const relationships$ = this.item.relationships;
-    if (relationships$) {
-      const relsCurrentPage$ = relationships$.pipe(
-        filter((rd: RemoteData<PaginatedList<Relationship>>) => rd.hasSucceeded),
-        getRemoteDataPayload(),
-        map((pl: PaginatedList<Relationship>) => pl.page),
-        distinctUntilChanged(compareArraysUsingIds())
-      );
-
-      const relTypesCurrentPage$ = relsCurrentPage$.pipe(
-        flatMap((rels: Relationship[]) =>
-          observableZip(...rels.map((rel: Relationship) => rel.relationshipType)).pipe(
-            map(([...arr]: Array<RemoteData<RelationshipType>>) => arr.map((d: RemoteData<RelationshipType>) => d.payload))
-          )
-        ),
-        distinctUntilChanged(compareArraysUsingIds())
-      );
-
-      this.resolvedRelsAndTypes$ = observableCombineLatest(
-        relsCurrentPage$,
-        relTypesCurrentPage$
-      );
-    }
-  }
-
   /**
    * Build a list of MetadataRepresentations for the current item. This combines all metadata and relationships of a
    * certain type.
    * @param itemType          The type of item we're building representations of. Used for matching templates.
    * @param metadataField     The metadata field that resembles the item type.
+   * @param relationshipLabel The label to use to fetch relationships to create MetadataRepresentations for.
    */
-  buildRepresentations(itemType: string, metadataField: string): Observable<MetadataRepresentation[]> {
+  buildRepresentations(itemType: string, metadataField: string, relationshipLabel: string): Observable<RemoteData<PaginatedList<MetadataRepresentation>>> {
     const metadata = this.item.findMetadataSortedByPlace(metadataField);
-    const relsCurrentPage$ = this.item.relationships.pipe(
+    const relationships$ = this.relationshipService.getItemRelationshipsByLabel(this.item, relationshipLabel);
-      getSucceededRemoteData(),
-      getRemoteDataPayload(),
-      map((pl: PaginatedList<Relationship>) => pl.page),
-      distinctUntilChanged(compareArraysUsingIds())
-    );
 
-    return relsCurrentPage$.pipe(
+    return relationships$.pipe(
       relationsToRepresentations(this.item.id, itemType, metadata)
     );
   }

src/app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.html

@@ -29,12 +29,12 @@
   </div>
   <div class="col-xs-12 col-md-6">
     <ds-related-items
-      [items]="volumes$ | async"
+      [items]="(volumes$ | async)?.payload?.page"
       [label]="'relationships.isSingleVolumeOf' | translate">
     </ds-related-items>
     <ds-related-items
       class="mb-1 mt-1"
-      [items]="publications$ | async"
+      [items]="(publications$ | async)?.payload?.page"
       [label]="'relationships.isPublicationOfJournalIssue' | translate">
     </ds-related-items>
     <ds-generic-item-page-field [item]="item"

src/app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.ts

@@ -2,9 +2,9 @@ import { Component } from '@angular/core';
 import { Observable } from 'rxjs';
 import { Item } from '../../../../core/shared/item.model';
 import { ItemViewMode, rendersItemType } from '../../../../shared/items/item-type-decorator';
-import { isNotEmpty } from '../../../../shared/empty.util';
 import { ItemComponent } from '../../../../+item-page/simple/item-types/shared/item.component';
-import { getRelatedItemsByTypeLabel } from '../../../../+item-page/simple/item-types/shared/item-relationships-utils';
+import { RemoteData } from '../../../../core/data/remote-data';
+import { PaginatedList } from '../../../../core/data/paginated-list';
 
 @rendersItemType('JournalIssue', ItemViewMode.Full)
 @Component({
@@ -19,23 +19,15 @@ export class JournalIssueComponent extends ItemComponent {
   /**
    * The volumes related to this journal issue
    */
-  volumes$: Observable<Item[]>;
+  volumes$: Observable<RemoteData<PaginatedList<Item>>>;
 
   /**
    * The publications related to this journal issue
    */
-  publications$: Observable<Item[]>;
+  publications$: Observable<RemoteData<PaginatedList<Item>>>;
 
   ngOnInit(): void {
-    super.ngOnInit();
+    this.volumes$ = this.relationshipService.getRelatedItemsByLabel(this.item, 'isJournalVolumeOfIssue');
-
+    this.publications$ = this.relationshipService.getRelatedItemsByLabel(this.item, 'isPublicationOfJournalIssue');
-    if (isNotEmpty(this.resolvedRelsAndTypes$)) {
-      this.volumes$ = this.resolvedRelsAndTypes$.pipe(
-        getRelatedItemsByTypeLabel(this.item.id, 'isJournalVolumeOfIssue')
-      );
-      this.publications$ = this.resolvedRelsAndTypes$.pipe(
-        getRelatedItemsByTypeLabel(this.item.id, 'isPublicationOfJournalIssue')
-      );
-    }
   }
 }

src/app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.html

@@ -17,11 +17,11 @@
   </div>
   <div class="col-xs-12 col-md-6">
     <ds-related-items
-      [items]="journals$ | async"
+      [items]="(journals$ | async)?.payload?.page"
       [label]="'relationships.isSingleJournalOf' | translate">
     </ds-related-items>
     <ds-related-items
-      [items]="issues$ | async"
+      [items]="(issues$ | async)?.payload?.page"
       [label]="'relationships.isIssueOf' | translate">
     </ds-related-items>
     <ds-generic-item-page-field [item]="item"

src/app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.ts

@@ -2,9 +2,9 @@ import { Component } from '@angular/core';
 import { Observable } from 'rxjs';
 import { Item } from '../../../../core/shared/item.model';
 import { ItemViewMode, rendersItemType } from '../../../../shared/items/item-type-decorator';
-import { isNotEmpty } from '../../../../shared/empty.util';
 import { ItemComponent } from '../../../../+item-page/simple/item-types/shared/item.component';
-import { getRelatedItemsByTypeLabel } from '../../../../+item-page/simple/item-types/shared/item-relationships-utils';
+import { RemoteData } from '../../../../core/data/remote-data';
+import { PaginatedList } from '../../../../core/data/paginated-list';
 
 @rendersItemType('JournalVolume', ItemViewMode.Full)
 @Component({
@@ -19,23 +19,15 @@ export class JournalVolumeComponent extends ItemComponent {
   /**
    * The journals related to this journal volume
    */
-  journals$: Observable<Item[]>;
+  journals$: Observable<RemoteData<PaginatedList<Item>>>;
 
   /**
    * The journal issues related to this journal volume
    */
-  issues$: Observable<Item[]>;
+  issues$: Observable<RemoteData<PaginatedList<Item>>>;
 
   ngOnInit(): void {
-    super.ngOnInit();
+    this.journals$ = this.relationshipService.getRelatedItemsByLabel(this.item, 'isJournalOfVolume');
-
+    this.issues$ = this.relationshipService.getRelatedItemsByLabel(this.item, 'isIssueOfJournalVolume');
-    if (isNotEmpty(this.resolvedRelsAndTypes$)) {
-      this.journals$ = this.resolvedRelsAndTypes$.pipe(
-        getRelatedItemsByTypeLabel(this.item.id, 'isJournalOfVolume')
-      );
-      this.issues$ = this.resolvedRelsAndTypes$.pipe(
-        getRelatedItemsByTypeLabel(this.item.id, 'isIssueOfJournalVolume')
-      );
-    }
   }
 }

src/app/entity-groups/journal-entities/item-pages/journal/journal.component.html

@@ -21,7 +21,7 @@
   </div>
   <div class="col-xs-12 col-md-6">
     <ds-related-items
-      [items]="volumes$ | async"
+      [items]="(volumes$ | async)?.payload?.page"
       [label]="'relationships.isVolumeOf' | translate">
     </ds-related-items>
     <ds-generic-item-page-field class="item-page-fields" [item]="item"

src/app/entity-groups/journal-entities/item-pages/journal/journal.component.ts

@@ -2,9 +2,9 @@ import { Component } from '@angular/core';
 import { Observable } from 'rxjs';
 import { Item } from '../../../../core/shared/item.model';
 import { ItemViewMode, rendersItemType } from '../../../../shared/items/item-type-decorator';
-import { isNotEmpty } from '../../../../shared/empty.util';
 import { ItemComponent } from '../../../../+item-page/simple/item-types/shared/item.component';
-import { getRelatedItemsByTypeLabel } from '../../../../+item-page/simple/item-types/shared/item-relationships-utils';
+import { RemoteData } from '../../../../core/data/remote-data';
+import { PaginatedList } from '../../../../core/data/paginated-list';
 
 @rendersItemType('Journal', ItemViewMode.Full)
 @Component({
@@ -19,15 +19,9 @@ export class JournalComponent extends ItemComponent {
   /**
    * The volumes related to this journal
    */
-  volumes$: Observable<Item[]>;
+  volumes$: Observable<RemoteData<PaginatedList<Item>>>;
 
   ngOnInit(): void {
-    super.ngOnInit();
+    this.volumes$ = this.relationshipService.getRelatedItemsByLabel(this.item, 'isVolumeOfJournal');
-
-    if (isNotEmpty(this.resolvedRelsAndTypes$)) {
-      this.volumes$ = this.resolvedRelsAndTypes$.pipe(
-        getRelatedItemsByTypeLabel(this.item.id, 'isVolumeOfJournal')
-      );
-    }
   }
 }

src/app/entity-groups/research-entities/item-pages/orgunit/orgunit.component.html

@@ -25,15 +25,15 @@
   </div>
   <div class="col-xs-12 col-md-6">
     <ds-related-items
-      [items]="people$ | async"
+      [items]="(people$ | async)?.payload?.page"
       [label]="'relationships.isPersonOf' | translate">
     </ds-related-items>
     <ds-related-items
-      [items]="projects$ | async"
+      [items]="(projects$ | async)?.payload?.page"
       [label]="'relationships.isProjectOf' | translate">
     </ds-related-items>
     <ds-related-items
-      [items]="publications$ | async"
+      [items]="(publications$ | async)?.payload?.page"
       [label]="'relationships.isPublicationOf' | translate">
     </ds-related-items>
     <ds-generic-item-page-field [item]="item"

src/app/entity-groups/research-entities/item-pages/orgunit/orgunit.component.ts

@@ -2,9 +2,9 @@ import { Component, OnInit } from '@angular/core';
 import { Observable } from 'rxjs';
 import { Item } from '../../../../core/shared/item.model';
 import { ItemViewMode, rendersItemType } from '../../../../shared/items/item-type-decorator';
-import { isNotEmpty } from '../../../../shared/empty.util';
 import { ItemComponent } from '../../../../+item-page/simple/item-types/shared/item.component';
-import { getRelatedItemsByTypeLabel } from '../../../../+item-page/simple/item-types/shared/item-relationships-utils';
+import { RemoteData } from '../../../../core/data/remote-data';
+import { PaginatedList } from '../../../../core/data/paginated-list';
 
 @rendersItemType('OrgUnit', ItemViewMode.Full)
 @Component({
@@ -19,32 +19,21 @@ export class OrgunitComponent extends ItemComponent implements OnInit {
   /**
    * The people related to this organisation unit
    */
-  people$: Observable<Item[]>;
+  people$: Observable<RemoteData<PaginatedList<Item>>>;
 
   /**
    * The projects related to this organisation unit
    */
-  projects$: Observable<Item[]>;
+  projects$: Observable<RemoteData<PaginatedList<Item>>>;
 
   /**
    * The publications related to this organisation unit
    */
-  publications$: Observable<Item[]>;
+  publications$: Observable<RemoteData<PaginatedList<Item>>>;
 
   ngOnInit(): void {
-    super.ngOnInit();
+    this.people$ = this.relationshipService.getRelatedItemsByLabel(this.item, 'isPersonOfOrgUnit');
-
+    this.projects$ = this.relationshipService.getRelatedItemsByLabel(this.item, 'isProjectOfOrgUnit');
-    if (isNotEmpty(this.resolvedRelsAndTypes$)) {
+    this.publications$ = this.relationshipService.getRelatedItemsByLabel(this.item, 'isPublicationOfOrgUnit');
-      this.people$ = this.resolvedRelsAndTypes$.pipe(
+  }
-        getRelatedItemsByTypeLabel(this.item.id, 'isPersonOfOrgUnit')
+}
-      );
-
-      this.projects$ = this.resolvedRelsAndTypes$.pipe(
-        getRelatedItemsByTypeLabel(this.item.id, 'isProjectOfOrgUnit')
-      );
-
-      this.publications$ = this.resolvedRelsAndTypes$.pipe(
-        getRelatedItemsByTypeLabel(this.item.id, 'isPublicationOfOrgUnit')
-      );
-    }
-  }}

src/app/entity-groups/research-entities/item-pages/person/person.component.html

@@ -25,11 +25,11 @@
   </div>
   <div class="col-xs-12 col-md-6">
     <ds-related-items
-      [items]="projects$ | async"
+      [items]="(projects$ | async)?.payload?.page"
       [label]="'relationships.isProjectOf' | translate">
     </ds-related-items>
     <ds-related-items
-      [items]="orgUnits$ | async"
+      [items]="(orgUnits$ | async)?.payload?.page"
       [label]="'relationships.isOrgUnitOf' | translate">
     </ds-related-items>
     <ds-generic-item-page-field [item]="item"

src/app/entity-groups/research-entities/item-pages/person/person.component.ts

@@ -1,13 +1,10 @@
-import { Component, Inject } from '@angular/core';
+import { Component } from '@angular/core';
-import { Observable ,  of as observableOf } from 'rxjs';
+import { Observable } from 'rxjs';
 import { Item } from '../../../../core/shared/item.model';
 import { ItemViewMode, rendersItemType } from '../../../../shared/items/item-type-decorator';
-import { ITEM } from '../../../../shared/items/switcher/item-type-switcher.component';
-import { SearchFixedFilterService } from '../../../../+search-page/search-filters/search-filter/search-fixed-filter.service';
-import { isNotEmpty } from '../../../../shared/empty.util';
 import { ItemComponent } from '../../../../+item-page/simple/item-types/shared/item.component';
-import { getRelatedItemsByTypeLabel } from '../../../../+item-page/simple/item-types/shared/item-relationships-utils';
+import { RemoteData } from '../../../../core/data/remote-data';
-import { RelationshipService } from '../../../../core/data/relationship.service';
+import { PaginatedList } from '../../../../core/data/paginated-list';
 
 @rendersItemType('Person', ItemViewMode.Full)
 @Component({
@@ -22,53 +19,21 @@ export class PersonComponent extends ItemComponent {
   /**
    * The publications related to this person
    */
-  publications$: Observable<Item[]>;
+  publications$: Observable<RemoteData<PaginatedList<Item>>>;
 
   /**
    * The projects related to this person
    */
-  projects$: Observable<Item[]>;
+  projects$: Observable<RemoteData<PaginatedList<Item>>>;
 
   /**
    * The organisation units related to this person
    */
-  orgUnits$: Observable<Item[]>;
+  orgUnits$: Observable<RemoteData<PaginatedList<Item>>>;
 
-  /**
-   * The applied fixed filter
-   */
-  fixedFilter$: Observable<string>;
-
-  /**
-   * The query used for applying the fixed filter
-   */
-  fixedFilterQuery: string;
-
-  constructor(
-    @Inject(ITEM) public item: Item,
-    public relationshipService: RelationshipService,
-    private fixedFilterService: SearchFixedFilterService
-  ) {
-    super(item, relationshipService);
-  }
   ngOnInit(): void {
-    super.ngOnInit();
+    this.publications$ = this.relationshipService.getRelatedItemsByLabel(this.item, 'isPublicationOfAuthor');
-
+    this.projects$ = this.relationshipService.getRelatedItemsByLabel(this.item, 'isProjectOfPerson');
-    if (isNotEmpty(this.resolvedRelsAndTypes$)) {
+    this.orgUnits$ = this.relationshipService.getRelatedItemsByLabel(this.item, 'isOrgUnitOfPerson');
-      this.publications$ = this.resolvedRelsAndTypes$.pipe(
-        getRelatedItemsByTypeLabel(this.item.id, 'isPublicationOfAuthor')
-      );
-
-      this.projects$ = this.resolvedRelsAndTypes$.pipe(
-        getRelatedItemsByTypeLabel(this.item.id, 'isProjectOfPerson')
-      );
-
-      this.orgUnits$ = this.resolvedRelsAndTypes$.pipe(
-        getRelatedItemsByTypeLabel(this.item.id, 'isOrgUnitOfPerson')
-      );
-
-      this.fixedFilterQuery = this.fixedFilterService.getQueryByRelations('isAuthorOfPublication', this.item.id);
-      this.fixedFilter$ = observableOf('publication');
-    }
   }
 }

src/app/entity-groups/research-entities/item-pages/project/project.component.html

@@ -12,7 +12,7 @@
     <!--</ds-generic-item-page-field>-->
     <ds-metadata-representation-list
       [label]="'project.page.contributor' | translate"
-      [representations]="contributors$ | async">
+      [representations]="(contributors$ | async)?.payload?.page">
     </ds-metadata-representation-list>
     <ds-generic-item-page-field [item]="item"
       [fields]="['project.identifier.funder']"
@@ -29,15 +29,15 @@
   </div>
   <div class="col-xs-12 col-md-6">
     <ds-related-items
-      [items]="people$ | async"
+      [items]="(people$ | async)?.payload?.page"
       [label]="'relationships.isPersonOf' | translate">
     </ds-related-items>
     <ds-related-items
-      [items]="publications$ | async"
+      [items]="(publications$ | async)?.payload?.page"
       [label]="'relationships.isPublicationOf' | translate">
     </ds-related-items>
     <ds-related-items
-      [items]="orgUnits$ | async"
+      [items]="(orgUnits$ | async)?.payload?.page"
       [label]="'relationships.isOrgUnitOf' | translate">
     </ds-related-items>
     <ds-generic-item-page-field [item]="item"

src/app/entity-groups/research-entities/item-pages/project/project.component.ts

@@ -3,9 +3,9 @@ import { Observable } from 'rxjs';
 import { Item } from '../../../../core/shared/item.model';
 import { MetadataRepresentation } from '../../../../core/shared/metadata-representation/metadata-representation.model';
 import { ItemViewMode, rendersItemType } from '../../../../shared/items/item-type-decorator';
-import { isNotEmpty } from '../../../../shared/empty.util';
 import { ItemComponent } from '../../../../+item-page/simple/item-types/shared/item.component';
-import { getRelatedItemsByTypeLabel } from '../../../../+item-page/simple/item-types/shared/item-relationships-utils';
+import { RemoteData } from '../../../../core/data/remote-data';
+import { PaginatedList } from '../../../../core/data/paginated-list';
 
 @rendersItemType('Project', ItemViewMode.Full)
 @Component({
@@ -20,40 +20,28 @@ export class ProjectComponent extends ItemComponent implements OnInit {
   /**
    * The contributors related to this project
    */
-  contributors$: Observable<MetadataRepresentation[]>;
+  contributors$: Observable<RemoteData<PaginatedList<MetadataRepresentation>>>;
 
   /**
    * The people related to this project
    */
-  people$: Observable<Item[]>;
+  people$: Observable<RemoteData<PaginatedList<Item>>>;
 
   /**
    * The publications related to this project
    */
-  publications$: Observable<Item[]>;
+  publications$: Observable<RemoteData<PaginatedList<Item>>>;
 
   /**
    * The organisation units related to this project
    */
-  orgUnits$: Observable<Item[]>;
+  orgUnits$: Observable<RemoteData<PaginatedList<Item>>>;
 
   ngOnInit(): void {
-    super.ngOnInit();
+    this.contributors$ = this.buildRepresentations('OrgUnit', 'project.contributor.other', 'isOrgUnitOfProject');
 
-    if (isNotEmpty(this.resolvedRelsAndTypes$)) {
+    this.people$ = this.relationshipService.getRelatedItemsByLabel(this.item, 'isPersonOfProject');
-      this.contributors$ = this.buildRepresentations('OrgUnit', 'project.contributor.other');
+    this.publications$ = this.relationshipService.getRelatedItemsByLabel(this.item, 'isPublicationOfProject');
-
+    this.orgUnits$ = this.relationshipService.getRelatedItemsByLabel(this.item, 'isOrgUnitOfProject');
-      this.people$ = this.resolvedRelsAndTypes$.pipe(
-        getRelatedItemsByTypeLabel(this.item.id, 'isPersonOfProject')
-      );
-
-      this.publications$ = this.resolvedRelsAndTypes$.pipe(
-        getRelatedItemsByTypeLabel(this.item.id, 'isPublicationOfProject')
-      );
-
-      this.orgUnits$ = this.resolvedRelsAndTypes$.pipe(
-        getRelatedItemsByTypeLabel(this.item.id, 'isOrgUnitOfProject')
-      );
-    }
   }
 }