fix race condition with Observables in list components

src/app/list/device-list/device-list-datasource.ts

@@ -3,7 +3,7 @@ import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 
 import { map } from 'rxjs/operators';
-import { Observable, of as observableOf, merge } from 'rxjs';
+import { Observable, of as observableOf, merge, Subject } from 'rxjs';
 import { Device } from '../../device';
 import { SystemConfigService } from '../../system-config.service';
 
@@ -14,6 +14,7 @@ import { SystemConfigService } from '../../system-config.service';
  */
 export class DeviceListDataSource extends DataSource<Device> {
   data: Device[];
+  dataSubject: Subject<Device[]>;
   paginator: MatPaginator;
   sort: MatSort;
 
@@ -30,7 +31,8 @@ export class DeviceListDataSource extends DataSource<Device> {
     // Combine everything that affects the rendered data into one update
     // st
     const dataMutations = [
-      this.systemConfigService.getDevices(),
+      this.dataSubject,
+      observableOf(this.data),
       this.paginator.page,
       this.sort.sortChange
     ];

src/app/list/device-list/device-list.component.ts

@@ -7,6 +7,7 @@ import { DeviceListDataSource } from './device-list-datasource';
 import { Device } from '../../device';
 import { SystemConfigService } from '../../system-config.service';
 import { cardElevation } from '../../style';
+import { Subject } from 'rxjs';
 
 
 @Component({
@@ -28,18 +29,21 @@ export class DeviceListComponent implements AfterViewInit, OnInit {
 
   ngOnInit() {
     this.dataSource = new DeviceListDataSource(this.systemConfigService);
+    this.dataSource.dataSubject = new Subject<Device[]>()
     this.dataSource.data = [];
+
+    this.systemConfigService.getDevices().subscribe(
+      data => {
+        console.log("get data??", data)
+        this.dataSource.data = data;
+        this.dataSource.dataSubject.next(data);
+      }
+    );
   }
 
   ngAfterViewInit() {
     this.dataSource.sort = this.sort;
     this.dataSource.paginator = this.paginator;
     this.table.dataSource = this.dataSource;
-
-    this.systemConfigService.getDevices().subscribe(
-      data => {
-        this.dataSource.data = data;
-      }
-    );
   }
 }

src/app/list/folder-list/folder-list-datasource.ts

@@ -3,7 +3,7 @@ import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 
 import { map } from 'rxjs/operators';
-import { Observable, of as observableOf, merge } from 'rxjs';
+import { Observable, of as observableOf, merge, Subject } from 'rxjs';
 import { Folder } from '../../folder';
 import { SystemConfigService } from '../../system-config.service';
 
@@ -12,8 +12,9 @@ import { SystemConfigService } from '../../system-config.service';
  * encapsulate all logic for fetching and manipulating the displayed data
  * (including sorting, pagination, and filtering).
  */
-export class FolderListDataSource extends DataSource<Folder> {
+export class FolderListDataSource extends DataSource<Folder>  {
   data: Folder[];
+  dataSubject: Subject<Folder[]>;
   paginator: MatPaginator;
   sort: MatSort;
 
@@ -30,8 +31,8 @@ export class FolderListDataSource extends DataSource<Folder> {
     // Combine everything that affects the rendered data into one update
     // st
     const dataMutations = [
-      // observableOf(this.data),
+      this.dataSubject,
-      this.systemConfigService.getFolders(),
+      observableOf(this.data),
       this.paginator.page,
       this.sort.sortChange
     ];

src/app/list/folder-list/folder-list.component.ts

@@ -7,6 +7,7 @@ import { FolderListDataSource } from './folder-list-datasource';
 import { Folder } from '../../folder';
 import { SystemConfigService } from '../../system-config.service';
 import { cardElevation } from '../../style';
+import { Subject } from 'rxjs';
 
 @Component({
   selector: 'app-folder-list',
@@ -27,21 +28,20 @@ export class FolderListComponent implements AfterViewInit, OnInit {
 
   ngOnInit() {
     this.dataSource = new FolderListDataSource(this.systemConfigService);
+    this.dataSource.dataSubject = new Subject<Folder[]>();
     this.dataSource.data = [];
-  }
 
-  ngAfterContentInit() {
+    this.systemConfigService.getFolders().subscribe(
+      data => {
+        this.dataSource.data = data;
+        this.dataSource.dataSubject.next(data);
+      }
+    );
   }
 
   ngAfterViewInit() {
     this.dataSource.sort = this.sort;
     this.dataSource.paginator = this.paginator;
     this.table.dataSource = this.dataSource;
-
-    this.systemConfigService.getFolders().subscribe(
-      data => {
-        this.dataSource.data = data;
-      }
-    );
   }
 }