My task involves managing a list of objects where the user can choose an object to edit using a child component. However, when the user returns to the list component, the child component needs to clean up in the ngOnDestroy method, which includes making a server call for a final 'patch' on the object. This cleanup process can sometimes be slow.
The issue arises when the API call completes before the database transaction from the ngOnDestroy method, causing the user to see outdated data upon returning to the list.
ngOnDestroy(){
this.destroy$.next();
this.template.template_items.forEach((item, index) => {
// mark uncompleted items for deletion
if (!item.is_completed) {
this.template.template_items[index]['_destroy'] = true;
};
});
// NOTE
// We don't care about result, this is a 'silent' save to remove empty items,
// but also to ensure the final sorted order is saved to the server
this._templateService.patchTemplate(this.template).subscribe();
this._templateService.selectedTemplate = null;
}
I am aware that synchronous calls are not recommended due to UI/browser blocking. While there are various solutions available, it's challenging to determine the best approach, especially considering Angular's lack of support for sync requests.
One idea I considered was having ngOnDestroy send a 'marker' to the API to label the object as 'processing'. The list component could then check for this marker and display a 'refresh stale data' button for any objects in that state (likely just one item - the most recently edited by the user). However, this workaround seems cumbersome and requires additional code compared to changing to a synchronous call.
I have not been able to find clear examples of similar issues apart from this synchronous one.
EDIT
Note that the child component already has a CanDeactivate guard in place, prompting the user to confirm changes before leaving. If the user confirms, the cleanup code in ngOnDestroy executes. In this context, the user is not discarding changes but rather awaiting server processing of the final data set. Ideally, the user should not leave until ngOnDestroy finishes - how can I enforce waiting for the API call to complete?
My CanDeactivate guard is implemented similarly to the official documentation for the Hero app, utilizing a dialog service to query the user's intention to stay or proceed away:
canDeactivate(): Observable<boolean> | boolean {
console.log('deactivating');
if (this.template.template_items.filter((obj) => { return !obj.is_completed}).length < 2)
return true;
// If there are empty items, prompt user with the dialog service
return this._dialogService.confirm('You have some empty items. Is it OK if I delete them?');
}
Although moving the cleanup code from ngOnDestroy to a "YES" method handler in the dialog may seem like a solution, the issue remains as the YES handler would still complete before the API, resulting in the same problem.
UPDATE
Based on feedback received, I believe the solution may involve modifying the guard from:
return this._dialogService.confirm('You have some empty items.
Is it OK if I delete them?');
to
return this._dialogService.confirm('You have some empty items.
Is it OK if I delete them?').subscribe(result => {
...if yes, call the API and return true...
...if no, return false...
});