reduce async observables with local assignment

2025-10-17 23:13:04 +00:00 · 2017-10-04 19:41:20 -05:00
parent bd6557378d
commit 8932817658
11 changed files with 112 additions and 105 deletions
--- a/src/app/+collection-page/collection-page.component.html
+++ b/src/app/+collection-page/collection-page.component.html
@@ -1,35 +1,37 @@
 <div class="collection-page">
  <div *ngIf="collectionData.hasSucceeded | async" @fadeInOut>
-    <!-- Collection Name -->
-    <ds-comcol-page-header
-      [name]="(collectionData.payload | async)?.name">
-    </ds-comcol-page-header>
-    <!-- Collection logo -->
-    <ds-comcol-page-logo *ngIf="logoData"
-      [logo]="logoData.payload | async"
-      [alternateText]="'Collection Logo'">
-    </ds-comcol-page-logo>
-    <!-- Introductionary text -->
-    <ds-comcol-page-content
-      [content]="(collectionData.payload | async)?.introductoryText"
-      [hasInnerHtml]="true">
-    </ds-comcol-page-content>
-    <!-- News -->
-    <ds-comcol-page-content
-      [content]="(collectionData.payload | async)?.sidebarText"
-      [hasInnerHtml]="true"
-      [title]="'community.page.news'">
-    </ds-comcol-page-content>
-    <!-- Copyright -->
-    <ds-comcol-page-content
-      [content]="(collectionData.payload | async)?.copyrightText"
-      [hasInnerHtml]="true">
-    </ds-comcol-page-content>
-    <!-- Licence -->
-    <ds-comcol-page-content
-      [content]="(collectionData.payload | async)?.license"
-      [title]="'collection.page.license'">
-    </ds-comcol-page-content>
+    <div *ngIf="collectionData.payload | async; 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"
+        [alternateText]="'Collection Logo'">
+      </ds-comcol-page-logo>
+      <!-- Introductionary text -->
+      <ds-comcol-page-content
+        [content]="collectionPayload.introductoryText"
+        [hasInnerHtml]="true">
+      </ds-comcol-page-content>
+      <!-- News -->
+      <ds-comcol-page-content
+        [content]="collectionPayload.sidebarText"
+        [hasInnerHtml]="true"
+        [title]="'community.page.news'">
+      </ds-comcol-page-content>
+      <!-- Copyright -->
+      <ds-comcol-page-content
+        [content]="collectionPayload.copyrightText"
+        [hasInnerHtml]="true">
+      </ds-comcol-page-content>
+      <!-- Licence -->
+      <ds-comcol-page-content
+        [content]="collectionPayload.license"
+        [title]="'collection.page.license'">
+      </ds-comcol-page-content>
+    </div>
  </div>
  <ds-error *ngIf="collectionData.hasFailed | async" message="Error fetching collection"></ds-error>
  <ds-loading *ngIf="collectionData.isLoading | async" message="Loading collection..."></ds-loading>
--- a/src/app/+collection-page/collection-page.component.ts
+++ b/src/app/+collection-page/collection-page.component.ts
@@ -27,7 +27,7 @@ import { fadeIn, fadeInOut } from '../shared/animations/fade';
  selector: 'ds-collection-page',
  styleUrls: ['./collection-page.component.scss'],
  templateUrl: './collection-page.component.html',
-  animations:[
+  animations: [
    fadeIn,
    fadeInOut
  ]
--- a/src/app/+community-page/community-page.component.html
+++ b/src/app/+community-page/community-page.component.html
@@ -1,28 +1,30 @@
 <div class="community-page" *ngIf="communityData.hasSucceeded | async" @fadeInOut>
-  <!-- Community name -->
-  <ds-comcol-page-header [name]="(communityData.payload | async)?.name"></ds-comcol-page-header>
-  <!-- Community logo -->
-  <ds-comcol-page-logo *ngIf="logoData"
-    [logo]="logoData.payload | async"
-    [alternateText]="'Community Logo'">
-  </ds-comcol-page-logo>
-  <!-- Introductionary text -->
-  <ds-comcol-page-content
-    [content]="(communityData.payload | async)?.introductoryText"
-    [hasInnerHtml]="true">
-  </ds-comcol-page-content>
-  <!-- News -->
-  <ds-comcol-page-content
-    [content]="(communityData.payload | async)?.sidebarText"
-    [hasInnerHtml]="true"
-    [title]="'community.page.news'">
-  </ds-comcol-page-content>
-  <!-- Copyright -->
-  <ds-comcol-page-content
-    [content]="(communityData.payload | async)?.copyrightText"
-    [hasInnerHtml]="true">
-  </ds-comcol-page-content>
-  <ds-community-page-sub-collection-list></ds-community-page-sub-collection-list>
+  <div *ngIf="communityData.payload | async; let communityPayload">
+    <!-- Community name -->
+    <ds-comcol-page-header [name]="communityPayload.name"></ds-comcol-page-header>
+    <!-- Community logo -->
+    <ds-comcol-page-logo *ngIf="logoData"
+      [logo]="logoData.payload | async"
+      [alternateText]="'Community Logo'">
+    </ds-comcol-page-logo>
+    <!-- Introductionary text -->
+    <ds-comcol-page-content
+      [content]="communityPayload.introductoryText"
+      [hasInnerHtml]="true">
+    </ds-comcol-page-content>
+    <!-- News -->
+    <ds-comcol-page-content
+      [content]="communityPayload.sidebarText"
+      [hasInnerHtml]="true"
+      [title]="'community.page.news'">
+    </ds-comcol-page-content>
+    <!-- Copyright -->
+    <ds-comcol-page-content
+      [content]="communityPayload.copyrightText"
+      [hasInnerHtml]="true">
+    </ds-comcol-page-content>
+    <ds-community-page-sub-collection-list></ds-community-page-sub-collection-list>
+  </div>
 </div>
 <ds-error *ngIf="communityData.hasFailed | async" message="Error fetching community"></ds-error>
 <ds-loading *ngIf="communityData.isLoading | async" message="Loading community..."></ds-loading>
--- a/src/app/+community-page/community-page.component.ts
+++ b/src/app/+community-page/community-page.component.ts
@@ -15,7 +15,7 @@ import { fadeInOut } from '../shared/animations/fade';
  selector: 'ds-community-page',
  styleUrls: ['./community-page.component.scss'],
  templateUrl: './community-page.component.html',
-  animations:[fadeInOut]
+  animations: [fadeInOut]
 })
 export class CommunityPageComponent implements OnInit, OnDestroy {
  communityData: RemoteData<Community>;
--- a/src/app/+home-page/top-level-community-list/top-level-community-list.component.ts
+++ b/src/app/+home-page/top-level-community-list/top-level-community-list.component.ts
@@ -13,7 +13,7 @@ import { fadeInOut } from '../../shared/animations/fade';
  selector: 'ds-top-level-community-list',
  styleUrls: ['./top-level-community-list.component.scss'],
  templateUrl: './top-level-community-list.component.html',
-  animations:[fadeInOut]
+  animations: [fadeInOut]
 })
 export class TopLevelCommunityListComponent {
  topLevelCommunities: RemoteData<Community[]>;
--- a/src/app/+item-page/simple/item-page.component.html
+++ b/src/app/+item-page/simple/item-page.component.html
@@ -1,22 +1,24 @@
 <div class="item-page" *ngIf="item.hasSucceeded | async" @fadeInOut>
-  <ds-item-page-title-field [item]="item.payload | async"></ds-item-page-title-field>
-  <div class="row">
-    <div class="col-xs-12 col-md-4">
-      <ds-metadata-field-wrapper>
-        <ds-thumbnail [thumbnail]="thumbnail | async"></ds-thumbnail>
-      </ds-metadata-field-wrapper>
-      <ds-item-page-file-section [item]="item.payload | async"></ds-item-page-file-section>
-      <ds-item-page-date-field [item]="item.payload | async"></ds-item-page-date-field>
-      <ds-item-page-author-field [item]="item.payload | async"></ds-item-page-author-field>
-    </div>
-    <div class="col-xs-12 col-md-6">
-      <ds-item-page-abstract-field [item]="item.payload | async"></ds-item-page-abstract-field>
-      <ds-item-page-uri-field [item]="item.payload | async"></ds-item-page-uri-field>
-      <ds-item-page-collections [item]="item.payload | async"></ds-item-page-collections>
-      <div>
-        <a class="btn btn-outline-primary" [routerLink]="['/items/' + (item.payload | async)?.id + '/full']">
-          {{"item.page.link.full" | translate}}
-        </a>
+  <div *ngIf="item.payload | async; let itemPayload">
+    <ds-item-page-title-field [item]="itemPayload"></ds-item-page-title-field>
+    <div class="row">
+      <div class="col-xs-12 col-md-4">
+        <ds-metadata-field-wrapper>
+          <ds-thumbnail [thumbnail]="thumbnail | async"></ds-thumbnail>
+        </ds-metadata-field-wrapper>
+        <ds-item-page-file-section [item]="itemPayload"></ds-item-page-file-section>
+        <ds-item-page-date-field [item]="itemPayload"></ds-item-page-date-field>
+        <ds-item-page-author-field [item]="itemPayload"></ds-item-page-author-field>
+      </div>
+      <div class="col-xs-12 col-md-6">
+        <ds-item-page-abstract-field [item]="itemPayload"></ds-item-page-abstract-field>
+        <ds-item-page-uri-field [item]="itemPayload"></ds-item-page-uri-field>
+        <ds-item-page-collections [item]="itemPayload"></ds-item-page-collections>
+        <div>
+          <a class="btn btn-outline-primary" [routerLink]="['/items/' + itemPayload.id + '/full']">
+            {{"item.page.link.full" | translate}}
+          </a>
+        </div>
      </div>
    </div>
  </div>
--- a/src/app/+item-page/simple/item-page.component.ts
+++ b/src/app/+item-page/simple/item-page.component.ts
@@ -20,7 +20,7 @@ import { fadeInOut } from '../../shared/animations/fade';
  selector: 'ds-item-page',
  styleUrls: ['./item-page.component.scss'],
  templateUrl: './item-page.component.html',
-  animations:[fadeInOut]
+  animations: [fadeInOut]
 })
 export class ItemPageComponent implements OnInit {

--- a/src/app/object-list/object-list.component.html
+++ b/src/app/object-list/object-list.component.html
@@ -1,19 +1,20 @@
-<ds-pagination [paginationOptions]="config"
-               [pageInfoState]="pageInfo"
-               [collectionSize]="(pageInfo | async)?.totalElements"
-               [sortOptions]="sortConfig"
-               [hideGear]="hideGear"
-               [hidePagerWhenSinglePage]="hidePagerWhenSinglePage"
-               (pageChange)="onPageChange($event)"
-               (pageSizeChange)="onPageSizeChange($event)"
-               (sortDirectionChange)="onSortDirectionChange($event)"
-               (sortFieldChange)="onSortDirectionChange($event)"
-               (paginationChange)="onPaginationChange($event)">
-    <ul *ngIf="objects.hasSucceeded | async" @fadeIn> <!--class="list-unstyled"-->
-        <li *ngFor="let object of (objects.payload | async) | paginate: { itemsPerPage: (pageInfo | async)?.elementsPerPage, currentPage: (pageInfo | async)?.currentPage, totalItems: (pageInfo | async)?.totalElements }">
-            <ds-wrapper-list-element [object]="object"></ds-wrapper-list-element>
-        </li>
-    </ul>
-    <ds-error *ngIf="objects.hasFailed | async" message="Error fetching"></ds-error>
-    <ds-loading *ngIf="objects.isLoading | async" message="Loading..."></ds-loading>
+<ds-pagination
+  [paginationOptions]="config"
+  [pageInfoState]="pageInfo"
+  [collectionSize]="(pageInfo | async)?.totalElements"
+  [sortOptions]="sortConfig"
+  [hideGear]="hideGear"
+  [hidePagerWhenSinglePage]="hidePagerWhenSinglePage"
+  (pageChange)="onPageChange($event)"
+  (pageSizeChange)="onPageSizeChange($event)"
+  (sortDirectionChange)="onSortDirectionChange($event)"
+  (sortFieldChange)="onSortDirectionChange($event)"
+  (paginationChange)="onPaginationChange($event)">
+  <ul *ngIf="objects.hasSucceeded | async" @fadeIn> <!--class="list-unstyled"-->
+      <li *ngFor="let object of (objects.payload | async) | paginate: { itemsPerPage: (pageInfo | async)?.elementsPerPage, currentPage: (pageInfo | async)?.currentPage, totalItems: (pageInfo | async)?.totalElements }">
+          <ds-wrapper-list-element [object]="object"></ds-wrapper-list-element>
+      </li>
+  </ul>
+  <ds-error *ngIf="objects.hasFailed | async" message="Error fetching"></ds-error>
+  <ds-loading *ngIf="objects.isLoading | async" message="Loading..."></ds-loading>
 </ds-pagination>
--- a/src/app/shared/object-list/object-list.component.ts
+++ b/src/app/shared/object-list/object-list.component.ts
@@ -10,23 +10,23 @@ import {

 import { Observable } from 'rxjs/Observable';

-import { RemoteData } from '../../core/data/remote-data';
-import { PageInfo } from '../../core/shared/page-info.model';
+import { RemoteData } from '../core/data/remote-data';
+import { PageInfo } from '../core/shared/page-info.model';

-import { PaginationComponentOptions } from '../pagination/pagination-component-options.model';
+import { PaginationComponentOptions } from '../shared/pagination/pagination-component-options.model';

-import { SortOptions, SortDirection } from '../../core/cache/models/sort-options.model';
-import { ListableObject } from '../../object-list/listable-object/listable-object.model';
+import { SortOptions, SortDirection } from '../core/cache/models/sort-options.model';
+import { ListableObject } from '../object-list/listable-object/listable-object.model';

-import { fadeIn } from '../../shared/animations/fade';
+import { fadeIn } from '../shared/animations/fade';

@Component({
  changeDetection: ChangeDetectionStrategy.Default,
  encapsulation: ViewEncapsulation.Emulated,
  selector: 'ds-object-list',
-  styleUrls: ['../../object-list/object-list.component.scss'],
-  templateUrl: '../../object-list/object-list.component.html',
-  animations:[fadeIn]
+  styleUrls: ['./object-list.component.scss'],
+  templateUrl: './object-list.component.html',
+  animations: [fadeIn]
 })
 export class ObjectListComponent implements OnChanges, OnInit {

--- a/src/app/shared/search-form/search-form.component.ts
+++ b/src/app/shared/search-form/search-form.component.ts
@@ -13,7 +13,7 @@ import { Observable } from 'rxjs/Observable';
@Component({
  selector: 'ds-search-form',
  styleUrls: ['./search-form.component.scss'],
-  templateUrl: './search-form.component.html',
+  templateUrl: './search-form.component.html'
 })
 export class SearchFormComponent {
  @Input() query: string;
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -22,7 +22,7 @@ import { CommunityListElementComponent } from '../object-list/community-list-ele
 import { ErrorComponent } from './error/error.component';
 import { LoadingComponent } from './loading/loading.component';
 import { ItemListElementComponent } from '../object-list/item-list-element/item-list-element.component';
-import { ObjectListComponent } from './object-list/object-list.component';
+import { ObjectListComponent } from '../object-list/object-list.component';
 import { ObjectListElementComponent } from '../object-list/object-list-element/object-list-element.component';
 import { PaginationComponent } from './pagination/pagination.component';
 import { ThumbnailComponent } from '../thumbnail/thumbnail.component';