Merged in DSC-1336-improve-handling-of-dynamic-content-in-ssr (pull request DSpace#992)

DSC-1336 improve handling of dynamic content in ssr

Approved-by: Giuseppe Digilio

Author: vNovski

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

@@ -74,7 +74,7 @@ <h3 class="sr-only">{{'collection.page.browse.recent.head' | translate}}</h3>
     </div>
         <ds-error *ngIf="collectionRD?.hasFailed"
             message="{{'error.collection' | translate}}"></ds-error>
-        <ds-themed-loading *ngIf="collectionRD?.isLoading"
+        <ds-themed-loading *ngIf="!collectionRD || collectionRD?.isLoading"
             message="{{'loading.collection' | translate}}"></ds-themed-loading>
   </div>
 </div>

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

@@ -1,4 +1,5 @@
-import { ChangeDetectionStrategy, Component, OnInit, Inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnInit, Inject, PLATFORM_ID } from '@angular/core';
+import { isPlatformServer } from '@angular/common';
 import { ActivatedRoute, Router } from '@angular/router';
 import { BehaviorSubject, combineLatest as observableCombineLatest, Observable, Subject } from 'rxjs';
 import { filter, map, mergeMap, startWith, switchMap, take } from 'rxjs/operators';
@@ -62,6 +63,7 @@ export class CollectionPageComponent implements OnInit {
   collectionPageRoute$: Observable<string>;
 
   constructor(
+    @Inject(PLATFORM_ID) private platformId: Object,
     private collectionDataService: CollectionDataService,
     private searchService: SearchService,
     private route: ActivatedRoute,
@@ -82,6 +84,10 @@ export class CollectionPageComponent implements OnInit {
   }
 
   ngOnInit(): void {
+    if (isPlatformServer(this.platformId)) {
+      return;
+    }
+
     this.collectionRD$ = this.route.data.pipe(
       map((data) => data.dso as RemoteData<Collection>),
       redirectOn4xx(this.router, this.authService),

src/app/home-page/recent-item-list/recent-item-list.component.ts

@@ -1,4 +1,6 @@
 import { ChangeDetectionStrategy, Component, ElementRef, Inject, OnInit, PLATFORM_ID } from '@angular/core';
+import { isPlatformServer } from '@angular/common';
+
 import { PaginatedSearchOptions } from '../../shared/search/models/paginated-search-options.model';
 import { fadeIn, fadeInOut } from '../../shared/animations/fade';
 import { RemoteData } from '../../core/data/remote-data';
@@ -62,6 +64,10 @@ export class RecentItemListComponent implements OnInit {
     this.sortConfig = new SortOptions(environment.homePage.recentSubmissions.sortField, SortDirection.DESC);
   }
   ngOnInit(): void {
+    if (isPlatformServer(this.platformId)) {
+      return;
+    }
+
     const linksToFollow: FollowLinkConfig<Item>[] = [];
     if (this.appConfig.browseBy.showThumbnails) {
       linksToFollow.push(followLink('thumbnail'));

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

@@ -1,7 +1,7 @@
 import { HostWindowService } from '../shared/host-window.service';
 import { SidebarService } from '../shared/sidebar/sidebar.service';
 import { SearchComponent } from '../shared/search/search.component';
-import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Inject, PLATFORM_ID } from '@angular/core';
 import { pushInOut } from '../shared/animations/push';
 import { SEARCH_CONFIG_SERVICE } from '../my-dspace-page/my-dspace-page.component';
 import { SearchConfigurationService } from '../core/shared/search/search-configuration.service';
@@ -32,9 +32,10 @@ export class ConfigurationSearchPageComponent extends SearchComponent {
               protected searchManager: SearchManager,
               protected sidebarService: SidebarService,
               protected windowService: HostWindowService,
+              @Inject(PLATFORM_ID) public platformId: any,
               @Inject(SEARCH_CONFIG_SERVICE) public searchConfigService: SearchConfigurationService,
               protected routeService: RouteService,
               protected router: Router) {
-    super(service, searchManager, sidebarService, windowService, searchConfigService, routeService, router);
+    super(service, searchManager, sidebarService, windowService, searchConfigService, platformId, routeService, router);
   }
 }

src/app/search-page/search-page.component.html

@@ -1 +1 @@
-<ds-themed-search [showCharts]="true" [showCsvExport]="false" [showExport]="true" [trackStatistics]="true"></ds-themed-search>
+<ds-themed-search [renderOnServerSide]="false" [showCharts]="true" [showCsvExport]="false" [showExport]="true" [trackStatistics]="true"></ds-themed-search>

src/app/shared/browse-most-elements/browse-most-elements.component.ts

@@ -1,4 +1,5 @@
-import { ChangeDetectorRef, Component, Inject, Input, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, Inject, Input, OnInit, PLATFORM_ID } from '@angular/core';
+import { isPlatformServer } from '@angular/common';
 
 import { SearchService } from '../../core/shared/search/search.service';
 import { PaginatedSearchOptions } from '../search/models/paginated-search-options.model';
@@ -37,12 +38,17 @@ export class BrowseMostElementsComponent implements OnInit {
 
   constructor(
     @Inject(APP_CONFIG) protected appConfig: AppConfig,
+    @Inject(PLATFORM_ID) private platformId: Object,
     private searchService: SearchService,
     private cdr: ChangeDetectorRef) {
 
   }
 
   ngOnInit() {
+    if (isPlatformServer(this.platformId)) {
+      return;
+    }
+
     const showThumbnails = this.showThumbnails ?? this.appConfig.browseBy.showThumbnails;
     const followLinks = showThumbnails ? [followLink('thumbnail')] : [];
     this.searchService.search(this.paginatedSearchOptions, null, true, true, ...followLinks).pipe(

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

@@ -1,4 +1,5 @@
-import { Component, Inject, Input, OnInit } from '@angular/core';
+import { Component, Inject, Input, OnInit, PLATFORM_ID } from '@angular/core';
+import { isPlatformServer } from '@angular/common';
 
 import { BehaviorSubject, forkJoin, Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
@@ -39,11 +40,16 @@ export class CountersSectionComponent implements OnInit {
 
   constructor(private searchService: SearchService,
               private uuidService: UUIDService,
-              @Inject(NativeWindowService) protected _window: NativeWindowRef) {
+              @Inject(PLATFORM_ID) private platformId: Object,
+              @Inject(NativeWindowService) protected _window: NativeWindowRef,) {
 
   }
 
   ngOnInit() {
+    if (isPlatformServer(this.platformId)) {
+      return;
+    }
+
     this.counterData$ = forkJoin(
       this.countersSection.counterSettingsList.map((counterSettings: CountersSettings) =>
         this.searchService.search(new PaginatedSearchOptions({

src/app/shared/search/search.component.ts

@@ -6,7 +6,8 @@ import {
   Input,
   OnDestroy,
   OnInit,
-  Output
+  Output,
+  PLATFORM_ID
 } from '@angular/core';
 import { NavigationStart, Router } from '@angular/router';
 
@@ -49,6 +50,7 @@ import { COLLECTION_MODULE_PATH } from '../../collection-page/collection-page-ro
 import { COMMUNITY_MODULE_PATH } from '../../community-page/community-page-routing-paths';
 import { SearchManager } from '../../core/browse/search-manager';
 import { AlertType } from '../alert/alert-type';
+import { isPlatformServer } from '@angular/common';
 
 @Component({
   selector: 'ds-search',
@@ -222,6 +224,11 @@ export class SearchComponent implements OnInit, OnDestroy {
    */
   @Input() showFilterToggle = false;
 
+  /**
+   * Defines whether to show the toggle button to Show/Hide filter
+   */
+  @Input() renderOnServerSide = true;
+
   /**
    * Defines whether to show the toggle button to Show/Hide chart
    */
@@ -358,9 +365,10 @@ export class SearchComponent implements OnInit, OnDestroy {
     protected searchManager: SearchManager,
     protected sidebarService: SidebarService,
     protected windowService: HostWindowService,
+    @Inject(PLATFORM_ID) public platformId: any,
     @Inject(SEARCH_CONFIG_SERVICE) public searchConfigService: SearchConfigurationService,
     protected routeService: RouteService,
-    protected router: Router) {
+    protected router: Router,) {
     this.isXsOrSm$ = this.windowService.isXsOrSm();
   }
 
@@ -372,6 +380,11 @@ export class SearchComponent implements OnInit, OnDestroy {
    * If something changes, update the list of scopes for the dropdown
    */
   ngOnInit(): void {
+    if (!this.renderOnServerSide && isPlatformServer(this.platformId)) {
+      this.initialized$.next(true);
+      return;
+    }
+
     if (this.useUniquePageId) {
       // Create an unique pagination id related to the instance of the SearchComponent
       this.paginationId = uniqueId(this.paginationId);

src/app/shared/search/themed-search.component.ts

@@ -20,7 +20,7 @@ import { AlertType } from '../alert/alert-type';
   templateUrl: '../theme-support/themed.component.html',
 })
 export class ThemedSearchComponent extends ThemedComponent<SearchComponent> {
-  protected inAndOutputNames: (keyof SearchComponent & keyof this)[] = ['configurationList', 'context', 'configuration', 'fixedFilterQuery', 'forcedEmbeddedKeys', 'useCachedVersionIfAvailable', 'collapseCharts', 'collapseFilters', 'inPlaceSearch', 'linkType', 'paginationId', 'projection', 'searchEnabled', 'sideBarWidth', 'searchFormPlaceholder', 'selectable', 'selectionConfig', 'showCharts', 'showExport', 'showSidebar', 'showThumbnails', 'showViewModes', 'useUniquePageId', 'viewModeList', 'showScopeSelector', 'showFilterToggle', 'showChartsToggle', 'showCsvExport', 'resultFound', 'deselectObject', 'selectObject', 'customEvent', 'trackStatistics', 'query', 'searchResultNotice', 'searchResultNoticeType', 'showSearchResultNotice'];
+  protected inAndOutputNames: (keyof SearchComponent & keyof this)[] = ['configurationList', 'context', 'configuration', 'fixedFilterQuery', 'forcedEmbeddedKeys', 'useCachedVersionIfAvailable', 'collapseCharts', 'collapseFilters', 'inPlaceSearch', 'linkType', 'paginationId', 'projection', 'searchEnabled', 'sideBarWidth', 'searchFormPlaceholder', 'selectable', 'selectionConfig', 'showCharts', 'showExport', 'showSidebar', 'showThumbnails', 'showViewModes', 'useUniquePageId', 'viewModeList', 'showScopeSelector', 'showFilterToggle', 'showChartsToggle', 'showCsvExport', 'resultFound', 'deselectObject', 'selectObject', 'customEvent', 'trackStatistics', 'query', 'searchResultNotice', 'searchResultNoticeType', 'showSearchResultNotice', 'renderOnServerSide'];
 
   @Input() configurationList: SearchConfigurationOption[];
 
@@ -88,6 +88,8 @@ export class ThemedSearchComponent extends ThemedComponent<SearchComponent> {
 
   @Input() query: string;
 
+  @Input() renderOnServerSide = false;
+
   @Output() resultFound: EventEmitter<SearchObjects<DSpaceObject>> = new EventEmitter();
 
   @Output() deselectObject: EventEmitter<ListableObject> = new EventEmitter();