Repeated Dialog Opening Due to Multiple Subscription Calls in Response to ngrx State Mutation
Attempted to use takeUntil(loadingComplete) where loadingComplete = new BehaviorSubject(false) but it did not work within the logic. This is because the subscription needs to be called at least once after the job state is "COMPLETED".
Also tried using take(1) since I am polling to retrieve progress status, however, it cannot be fetched after the first subscription with take 1. Therefore, I added the isCompleteDialogOpened flag to control the multiple subscription dialog openings to happen only once. Despite setting the isCompleteDialogOpened flag to true after the first subscription in the openUploadCompleteDialog() method call, it remains false on the second subscription, causing multiple dialog openings.
if(uploadStatus.jobStatus === 'COMPLETED' && !this.isCompleteDialogOpened)
Even after setting it to true on the first subscription in the openUploadCompleteDialog() method call, isCompleteDialogOpened is false on the second subscription, leading to multiple dialog openings.
isCompleteDialogOpened = false; // Initial as false
ngOnInit() {
this.pollUploadStatus(); // Call subscription method onInit
}
pollUploadStatus() { // Subscribed to uploadStore ngrx store when selectCurrentJob mutates
this.uploadStore.select(selectCurrentJob)
.pipe(filter(uploadJob => !!uploadJob && !!uploadJob.jobStatus))
.subscribe((uploadJob) => { // Multiple subscription calls
const uploadStatus = uploadJob.jobStatus;
if (uploadStatus.jobStatus === 'COMPLETED' && !this.isCompleteDialogOpened) {
this.openUploadCompleteDialog(); // Dialog box called twice
}
}
openUploadCompleteDialog(): void {
this.isCompleteDialogOpened = true; // Set to true after dialog open on subscription
const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
data: ....
});
dialogRef.afterClosed().subscribe(result => {
const message = this.translate
.instant('upload-success');
this.openUploadSnackBar(true, message);
this.router.navigateByUrl('car/add-update/car-history');
});
}
ngOnDestroy() {
this.uploadStore.dispatch(stopPolling({}));
this.destroy$.next();
this.destroy$.complete();
}
May overlap with How to stop a subscription after the response to a service/store has a certain argument/value but takeUntil does not suit the logic in this case
Is there a way to ensure the dialog box opens only once after the state changes to "COMPLETED" based on a flag? If using a flag, how can the state be maintained on each subscribe? Any assistance is appreciated.
Using Angular8, Rxjs 6.5.2.