feat(core/presentation): Expose status in useDataSource hook (#8118)

* feat(core/presentation): Expose status in useDataSource hook * feat(core/presentation): Adding loaded to the status$ stream Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>
spinnaker · Apr 1, 2020 · eac4cf5 · eac4cf5
1 parent 941cd60
commit eac4cf5
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 4 deletions.
diff --git a/app/scripts/modules/core/src/application/application.model.ts b/app/scripts/modules/core/src/application/application.model.ts
@@ -126,10 +126,12 @@ export class Application {
 
     const noneLeftToFetch = statuses.every(({ status }) => ['FETCHED', 'NOT_INITIALIZED'].includes(status));
     const lastFetch = statuses.reduce((latest, status) => Math.max(latest, status.lastRefresh || 0), 0);
+    const allLoaded = statuses.every(({ loaded }) => loaded);
 
     return {
       status: rolledUpStatus,
       lastRefresh: noneLeftToFetch ? lastFetch : this.lastRefresh,
+      loaded: allLoaded,
       data: undefined,
     };
   }

diff --git a/app/scripts/modules/core/src/application/service/applicationDataSource.ts b/app/scripts/modules/core/src/application/service/applicationDataSource.ts
@@ -12,6 +12,7 @@ import { Application } from '../application.model';
 
 export interface IFetchStatus {
   status: 'NOT_INITIALIZED' | 'FETCHING' | 'FETCHED' | 'ERROR';
+  loaded: boolean;
   error?: any;
   lastRefresh: number;
   data: any;
@@ -322,6 +323,8 @@ export class ApplicationDataSource<T = any> implements IDataSourceConfig<T> {
   public dataUpdated(data?: T): void {
     if (this.loaded) {
       this.updateData(data !== undefined ? data : this.data);
+      const updatedStatus = { data: this.data, ...this.status$.value };
+      this.status$.next(updatedStatus);
     }
   }
 
@@ -370,6 +373,7 @@ export class ApplicationDataSource<T = any> implements IDataSourceConfig<T> {
 
     this.status$ = new BehaviorSubject({
       status: 'NOT_INITIALIZED',
+      loaded: this.loaded,
       lastRefresh: 0,
       error: null,
       data: this.data,
@@ -403,6 +407,7 @@ export class ApplicationDataSource<T = any> implements IDataSourceConfig<T> {
     fetchStream$.withLatestFrom(nextTick$).subscribe(([fetchStatus, _void]) => {
       // Update mutable flags
       this.statusUpdated(fetchStatus);
+      fetchStatus.loaded = this.loaded;
 
       if (fetchStatus.status === 'FETCHED') {
         this.updateData(fetchStatus.data);

diff --git a/app/scripts/modules/core/src/presentation/hooks/useDataSource.hook.ts b/app/scripts/modules/core/src/presentation/hooks/useDataSource.hook.ts
@@ -1,9 +1,9 @@
 import { useObservableValue } from './useObservableValue.hook';
 import { useLatestCallback } from './useLatestCallback.hook';
 
-import { ApplicationDataSource } from '../../application';
+import { ApplicationDataSource, IFetchStatus } from '../../application';
 
-export interface IDataSourceResult<T> {
+export interface IDataSourceResult<T> extends IFetchStatus {
   data: T;
   refresh: () => void;
 }
@@ -17,7 +17,7 @@ export interface IDataSourceResult<T> {
  * @returns IDataSourceResult<T>
  */
 export const useDataSource = <T>(dataSource: ApplicationDataSource<T>): IDataSourceResult<T> => {
-  const data = useObservableValue(dataSource.data$, dataSource.data$.value);
+  const status = useObservableValue(dataSource.status$, dataSource.status$.value);
 
   // Memoize to give consumers a stable ref,
   // but don't return the promise that dataSource.refresh() returns
@@ -26,7 +26,7 @@ export const useDataSource = <T>(dataSource: ApplicationDataSource<T>): IDataSou
   });
 
   return {
-    data,
+    ...status,
     refresh,
   };
 };