Updated the autosave directive to use observables for timing instead of the timeout service

rxjs has a better way of handling cancellations, since we couldn't get an actual timer cancel to work in the timeout service. Also, this is probably a better way to go anyway since rxjs handles it. To handle this, we introduce two streams, one for autosave starts and one for autosave cancels. When the form becomes dirty (on a status change) we initiate a stream that debounces off the autosave start events, takes until an autosave cancel event, and then fires and autosave. The keyup events then just push autosave start events to the stream.

Also, added a final dirty and validation check before the actual save is fired. This addresses an issue where an autosaving card could save twice if the card close triggers a save, but the autosave never resets, and thus never checks to see that the form became pristine.

Author: KorinaGraber

source/behaviors/autosave/autosave.tests.ts

@@ -1,8 +1,6 @@
 import { Subject } from 'rxjs';
 import { rlFakeAsync, mock, rlTick, flushMicrotasks } from 'rl-async-testing';
 
-import { services } from 'typescript-angular-utilities';
-
 import { AutosaveDirective, DEFAULT_AUTOSAVE_DEBOUNCE } from './autosave';
 
 interface IFormMock {
@@ -35,7 +33,7 @@ describe('AutosaveDirective', () => {
 
 		autosaveAction = { trigger: sinon.spy() };
 
-		autosave = new AutosaveDirective(<any>form, new services.timeout.TimeoutService(), <any>autosaveAction);
+		autosave = new AutosaveDirective(<any>form, <any>autosaveAction);
 	});
 
 	describe('ngAfterViewInit', (): void => {
@@ -178,5 +176,15 @@ describe('AutosaveDirective', () => {
 			sinon.assert.calledOnce(autosaveAction.trigger);
 			sinon.assert.calledWith(autosaveAction.trigger, waitValue);
 		});
+
+		it('should not save if the form becomes pristine immediately before saving', () => {
+			const waitValue = mock.request()();
+			form.submitAndWait = sinon.spy(() => waitValue);
+			form.dirty = false;
+
+			autosave.autosave();
+
+			sinon.assert.notCalled(autosaveAction.trigger);
+		});
 	});
 });

source/behaviors/autosave/autosave.ts

@@ -1,7 +1,5 @@
 import { Directive, Input, Self, AfterViewInit, HostListener } from '@angular/core';
-
-import { services } from 'typescript-angular-utilities';
-import __timeout = services.timeout;
+import { Observable, Subject } from 'rxjs';
 
 import { FormComponent } from '../../components/form/form';
 import { AutosaveActionService } from '../../services/autosaveAction/autosaveAction.service';
@@ -16,16 +14,15 @@ export class AutosaveDirective implements AfterViewInit {
 	@Input() saveWhenInvalid: boolean;
 	@HostListener('keyup') keyupListener = this.resetDebounce;
 
-	timer: __timeout.ITimeout;
 	form: FormComponent;
-	timeoutService: __timeout.TimeoutService;
 	autosaveAction: AutosaveActionService;
 
+	autosaveStart$: Subject<void> = new Subject<void>();
+	autosaveCancel$: Subject<void> = new Subject<void>();
+
 	constructor( @Self() form: FormComponent
-			, timeoutService: __timeout.TimeoutService
 			, autosaveAction: AutosaveActionService) {
 		this.form = form;
-		this.timeoutService = timeoutService;
 		this.autosaveAction = autosaveAction;
 	}
 
@@ -34,32 +31,34 @@ export class AutosaveDirective implements AfterViewInit {
 	}
 
 	ngOnDestroy(): void {
-		if (this.timer) {
-			this.timer.cancel();
-		}
+		this.autosaveCancel$.next();
 	}
 
 	setDebounce = (): void => {
-		if (!this.timer && this.form.dirty && (this.saveWhenInvalid || this.form.validate())) {
-			this.timer = this.timeoutService.setTimeout(this.autosave, DEFAULT_AUTOSAVE_DEBOUNCE)
-											.catch(() => null);
+		if (this.canAutosave()) {
+			this.autosaveCancel$.next();
+			this.autosaveStart$.debounceTime(DEFAULT_AUTOSAVE_DEBOUNCE).takeUntil(this.autosaveCancel$).subscribe(() => this.autosave());
+			this.autosaveStart$.next();
+		} else {
+			this.autosaveCancel$.next();
 		}
 	}
 
 	resetDebounce(): void {
-		if (this.timer) {
-			this.timer.cancel();
-			this.timer = null;
-			this.setDebounce();
+		if (this.canAutosave()) {
+			this.autosaveStart$.next();
 		}
 	}
 
 	autosave = (): void => {
+		if (!this.canAutosave()) {
+			return;
+		}
+
 		const waitOn = this.submitAndWait();
 		if (waitOn) {
 			this.autosaveAction.trigger(waitOn);
 		}
-		this.timer = null;
 	}
 
 	submitAndWait(): IWaitValue<any> {
@@ -69,4 +68,8 @@ export class AutosaveDirective implements AfterViewInit {
 			return this.form.submitAndWait();
 		}
 	}
+
+	private canAutosave(): boolean {
+		return this.form.dirty && (this.saveWhenInvalid || this.form.validate());
+	}
 }