Merge pull request #365 from SamGraber/handle_destroy

Cancel the autosave timer on destroy

Author: Sam Graber

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,44 +14,51 @@ 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;
 	}
 
 	ngAfterViewInit(): void {
 		this.form.form.statusChanges.subscribe(this.setDebounce);
 	}
 
+	ngOnDestroy(): void {
+		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> {
@@ -63,4 +68,8 @@ export class AutosaveDirective implements AfterViewInit {
 			return this.form.submitAndWait();
 		}
 	}
+
+	private canAutosave(): boolean {
+		return this.form.dirty && (this.saveWhenInvalid || this.form.validate());
+	}
 }