fix(sync): ensure local changes are synced quickly before leaving the app

by immediate sync after editing data locally

closes #2397

Author: sleidig

src/app/core/database/sync.service.spec.ts

@@ -8,6 +8,7 @@ import { LoginState } from "../session/session-states/login-state.enum";
 import { KeycloakAuthService } from "../session/auth/keycloak/keycloak-auth.service";
 import { HttpStatusCode } from "@angular/common/http";
 import PouchDB from "pouchdb-browser";
+import { Subject } from "rxjs";
 
 describe("SyncService", () => {
   let service: SyncService;
@@ -28,6 +29,15 @@ describe("SyncService", () => {
     loginState = TestBed.inject(LoginStateSubject);
   });
 
+  /**
+   * ensure the interval for sync is stopped at end of test to avoid errors.
+   * Somehow this does not work in afterEach().
+   */
+  function stopPeriodicTimer() {
+    service.liveSyncEnabled = false;
+    tick(SyncService.SYNC_INTERVAL + 500);
+  }
+
   it("should be created", () => {
     expect(service).toBeTruthy();
   });
@@ -59,8 +69,7 @@ describe("SyncService", () => {
     tick(SyncService.SYNC_INTERVAL);
     expect(mockLocalDb.sync).toHaveBeenCalled();
 
-    service.liveSyncEnabled = false;
-    tick(SyncService.SYNC_INTERVAL);
+    stopPeriodicTimer();
   }));
 
   it("should try auto-login if fetch fails and fetch again", fakeAsync(() => {
@@ -101,7 +110,31 @@ describe("SyncService", () => {
     expect(mockAuthService.login).toHaveBeenCalled();
     expect(mockAuthService.addAuthHeader).toHaveBeenCalledTimes(2);
 
-    service.liveSyncEnabled = false;
-    tick(SyncService.SYNC_INTERVAL);
+    stopPeriodicTimer();
+  }));
+
+  it("should sync immediately when local db has changes", fakeAsync(() => {
+    const mockLocalDb = jasmine.createSpyObj(["sync"]);
+    const db = TestBed.inject(Database) as PouchDatabase;
+    spyOn(db, "getPouchDB").and.returnValue(mockLocalDb);
+    const mockChanges = new Subject();
+    spyOn(db, "changes").and.returnValue(mockChanges);
+
+    loginState.next(LoginState.LOGGED_IN);
+
+    service.startSync();
+
+    mockLocalDb.sync.and.resolveTo({});
+    tick(1000);
+    expect(mockLocalDb.sync).toHaveBeenCalled();
+    mockLocalDb.sync.calls.reset();
+    expect(mockLocalDb.sync).not.toHaveBeenCalled();
+
+    // simulate local doc written
+    mockChanges.next({});
+    tick(500); // sync has a short debounce time
+    expect(mockLocalDb.sync).toHaveBeenCalled();
+
+    stopPeriodicTimer();
   }));
 });

src/app/core/database/sync.service.ts

@@ -6,11 +6,17 @@ import { HttpStatusCode } from "@angular/common/http";
 import PouchDB from "pouchdb-browser";
 import { SyncState } from "../session/session-states/sync-state.enum";
 import { SyncStateSubject } from "../session/session-type";
-import { filter, mergeMap, repeat, retry, takeWhile } from "rxjs/operators";
+import {
+  debounceTime,
+  filter,
+  mergeMap,
+  retry,
+  takeWhile,
+} from "rxjs/operators";
 import { KeycloakAuthService } from "../session/auth/keycloak/keycloak-auth.service";
 import { Config } from "../config/config";
 import { Entity } from "../entity/model/entity";
-import { from, of } from "rxjs";
+import { from, interval, merge, of } from "rxjs";
 import { environment } from "../../../environments/environment";
 
 /**
@@ -140,11 +146,18 @@ export class SyncService {
   private liveSync() {
     this.liveSyncEnabled = true;
 
-    of(true)
+    merge(
+      // do an initial sync immediately
+      of(true),
+      // re-sync at regular interval
+      interval(SyncService.SYNC_INTERVAL),
+      // and immediately sync to upload any local changes
+      this.database.changes(""),
+    )
       .pipe(
+        debounceTime(500),
         mergeMap(() => from(this.sync())),
         retry({ delay: SyncService.SYNC_INTERVAL }),
-        repeat({ delay: SyncService.SYNC_INTERVAL }),
         takeWhile(() => this.liveSyncEnabled),
       )
       .subscribe();