[UXP-99] Improvements to carousel-sections component

Author: davide-negretti

src/app/shared/explore/section-component/carousel-section/carousel-section.component.html

@@ -1,5 +1,5 @@
-<div *ngIf="(searchResults$ | async) && (searchResults$ | async)?.payload?.page.length > 0">
-  <ds-carousel [items]="(searchResults$ | async)?.payload?.page" [carouselOptions]="carouselOptions"></ds-carousel>
+<div *ngIf="(searchResults$ | async)?.length > 0 && !(isLoading$ | async)">
+  <ds-carousel [items]="(searchResults$ | async)" [carouselOptions]="carouselOptions"></ds-carousel>
 </div>
 <div class="text-center" *ngIf="isLoading$ | async">
   <ds-loading message="{{'loading.default' | translate}}"></ds-loading>

src/app/shared/explore/section-component/carousel-section/carousel-section.component.spec.ts

@@ -11,9 +11,7 @@ import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { SearchService } from '../../../../core/shared/search/search.service';
 import { TranslateLoaderMock } from '../../../mocks/translate-loader.mock';
 import { CarouselSectionComponent } from './carousel-section.component';
-import { SearchResult } from '../../../search/models/search-result.model';
-import { DSpaceObject } from '../../../../core/shared/dspace-object.model';
-import { createSuccessfulRemoteDataObject, createSuccessfulRemoteDataObject$ } from '../../../remote-data.utils';
+import { createSuccessfulRemoteDataObject$ } from '../../../remote-data.utils';
 import { ObjectCacheService } from '../../../../core/cache/object-cache.service';
 import { UUIDService } from '../../../../core/shared/uuid.service';
 import { RemoteDataBuildService } from '../../../../core/cache/builders/remote-data-build.service';
@@ -25,6 +23,7 @@ import { HttpClient } from '@angular/common/http';
 import { DSOChangeAnalyzer } from '../../../../core/data/dso-change-analyzer.service';
 import { DefaultChangeAnalyzer } from '../../../../core/data/default-change-analyzer.service';
 import { cold } from 'jasmine-marbles';
+import { ItemSearchResult } from '../../../object-collection/shared/item-search-result.model';
 
 describe('CarouselSectionComponent', () => {
     let component: CarouselSectionComponent;
@@ -33,27 +32,23 @@ describe('CarouselSectionComponent', () => {
     let searchServiceStub: any;
     let notificationService: NotificationsServiceStub;
 
-    const searchResult = Object.assign(new SearchResult(), {
-        indexableObject: Object.assign(new DSpaceObject(), {
-            id: 'd317835d-7b06-4219-91e2-1191900cb897',
-            uuid: 'd317835d-7b06-4219-91e2-1191900cb897',
-            name: 'My first person',
-            metadata: {
-                'dc.title': [
-                    { value: 'Test' }
-                ],
-                'dc.description.abstract': [
-                    { value: 'Lorem Ipsum' }
-                ]
-            },
-            _links: {
-              content: { href: 'file-selflink' }
-            }
-        })
+    const searchResult = Object.assign(new ItemSearchResult(), {
+        id: 'd317835d-7b06-4219-91e2-1191900cb897',
+        uuid: 'd317835d-7b06-4219-91e2-1191900cb897',
+        name: 'My first person',
+        metadata: {
+            'dc.title': [
+                { value: 'Test' }
+            ],
+            'dc.description.abstract': [
+                { value: 'Lorem Ipsum' }
+            ]
+        },
+        _links: {
+            content: { href: 'file-selflink' }
+        }
     });
 
-    const searchResultRD = createSuccessfulRemoteDataObject({ page: [searchResult] });
-
     beforeEach(waitForAsync(() => {
         searchServiceStub = jasmine.createSpyObj('SearchService', {
             search: jasmine.createSpy('search'),
@@ -124,7 +119,7 @@ describe('CarouselSectionComponent', () => {
     }));
 
     it('should init search results data properly', (done) => {
-        const expected = cold('(a|)', { a: searchResultRD });
+        const expected = cold('(a|)', { a: [searchResult] });
         expect(component.searchResults$).toBeObservable(expected);
         done();
     });

src/app/shared/explore/section-component/carousel-section/carousel-section.component.ts

@@ -2,17 +2,14 @@ import { Component, Input, OnInit } from '@angular/core';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { tap } from 'rxjs/operators';
 import { SortDirection, SortOptions } from '../../../../core/cache/models/sort-options.model';
-import { PaginatedList } from '../../../../core/data/paginated-list.model';
-import { RemoteData } from '../../../../core/data/remote-data';
 import { DSpaceObjectType } from '../../../../core/shared/dspace-object-type.model';
-import { DSpaceObject } from '../../../../core/shared/dspace-object.model';
-import { getFirstCompletedRemoteData } from '../../../../core/shared/operators';
+import { getFirstSucceededRemoteListPayload } from '../../../../core/shared/operators';
 import { SearchService } from '../../../../core/shared/search/search.service';
 import { PaginationComponentOptions } from '../../../pagination/pagination-component-options.model';
 import { PaginatedSearchOptions } from '../../../search/models/paginated-search-options.model';
-import { SearchResult } from '../../../search/models/search-result.model';
 import { CarouselSection } from '../../../../core/layout/models/section.model';
 import {CarouselOptions} from '../../../carousel/carousel-options.model';
+import { ItemSearchResult } from '../../../object-collection/shared/item-search-result.model';
 
 /**
  * Component representing the Carousel component section.
@@ -39,7 +36,7 @@ export class CarouselSectionComponent implements OnInit {
   /**
    * Search results of provided carousel configurations.
    */
-  searchResults$: Observable<RemoteData<PaginatedList<SearchResult<DSpaceObject>>>>;
+  searchResults$: Observable<ItemSearchResult[]>;
 
   /**
    * Paginated Search Options of current carousel configurations.
@@ -107,9 +104,9 @@ export class CarouselSectionComponent implements OnInit {
     });
 
     this.searchResults$ = this.searchService.search(this.paginatedSearchOptions).pipe(
-      getFirstCompletedRemoteData(),
+      getFirstSucceededRemoteListPayload(),
       tap(() => this.isLoading$.next(false)),
-    );
+    ) as Observable<ItemSearchResult[]>;
   }
 
 }