I have function that creates the client, but before that it should check if there are any similar names in database. If there are, it returns array string with those names, if not it returns empty array. My code so far:
let similarNames:string[] = [];
this.clientsService.getSimilarNames(clientFormData.clientName, 0).subscribe(res => {
similarNames = res;
console.log("Length: ", similarNames.length)
console.log(similarNames) <-- console.log shows that everything is fine there
if(similarNames.length > 0){
this.confirmationService.confirm({
message: 'There are already similar names:' + similarNames,
header: 'Similar names',
icon: 'fa fa-exclamation-triangle',
acceptLabel: 'Yes',
rejectLabel: 'No',
accept: () => {},
reject: () => {return;}
})
}
this.clientsService.createClient(clientFormData).subscribe(resp => {
this.isLoading = false;
this.onCreateClientSuccess();
}, error => {
this.isLoading = false;
this.messageHelperService.showErrorMessage(error, this.messages.CreateError);
});
})
My problem is that this.clientService.createClient doesn't wait for code in if statement to finish. Right now it creates client and then shows similar names and ask to create. I want to work it like that: If there is any similar name pop up should appear with list of those names and if accepted it should just proceed to creating a client if rejected it should exit the function and don't create client.
Hi and welcome to the StackOverflow community first of all!
Actually, I would proceed with RxJS chaining them with pipe and exhaustMap.
this.clientsService.getSimilarNames(clientFormData.clientName, 0).pipe(
exhaustMap(res => {
similarNames = res;
console.log("Length: ", similarNames.length)
console.log(similarNames) <-- console.log shows that everything is fine there
if( similarNames.length > 0 ){
return this.confirmationService.confirm({
message: 'There are already similar names:' + similarNames,
header: 'Similar names',
icon: 'fa fa-exclamation-triangle',
acceptLabel: 'Yes',
rejectLabel: 'No',
accept: () => {},
reject: () => {return;}
})
}
return of();
}),
exhaustMap(responseFromConfirm => this.clientsService.createClient(clientFormData))
).subscribe(
() => {
this.isLoading = false;
this.onCreateClientSuccess();
},
error => {
this.isLoading = false;
this.messageHelperService.showErrorMessage(error, this.messages.CreateError);
});
In this way, you are chaining your async operation and emit the value of the next operator only when completed. Of course, the creation will be triggered even if the check on the similiarNames fails.
For more information about, see exhaustMap
You could put the creatClient code in an else and duplicate it in the use the accept callback
Of course, then you'll duplicate code for no good reason
So, it's better to create a function for the "common" code and do something like
note the function is an arrow function, to preserve this
let similarNames: string[] = [];
this.clientsService.getSimilarNames(clientFormData.clientName, 0).subscribe(res => {
similarNames = res;
console.log("Length: ", similarNames.length)
console.log(similarNames)
const fn = () => {
this.clientsService.createClient(clientFormData).subscribe(resp => {
this.isLoading = false;
this.onCreateClientSuccess();
}, error => {
this.isLoading = false;
this.messageHelperService.showErrorMessage(error, this.messages.CreateError);
});
};
if (similarNames.length > 0) {
this.confirmationService.confirm({
message: 'There are already similar names:' + similarNames,
header: 'Similar names',
icon: 'fa fa-exclamation-triangle',
acceptLabel: 'Yes',
rejectLabel: 'No',
accept: fn,
reject: () => {}
});
} else {
fn()
}
})
Another alternative is to use async/await and a new Promise - seems OTT for the situation, but, the code does look clean (IMHO)
let similarNames: string[] = [];
this.clientsService.getSimilarNames(clientFormData.clientName, 0).subscribe(async (res) => {
similarNames = res;
try {
if (similarNames.length > 0) {
await new Promise((resolve, reject) => {
this.confirmationService.confirm({
message: 'There are already similar names:' + similarNames,
header: 'Similar names',
icon: 'fa fa-exclamation-triangle',
acceptLabel: 'Yes',
rejectLabel: 'No',
accept: resolve,
reject: reject // will result a thrown error
});
});
}
this.clientsService.createClient(clientFormData).subscribe(resp => {
this.isLoading = false;
this.onCreateClientSuccess();
}, error => {
this.isLoading = false;
this.messageHelperService.showErrorMessage(error, this.messages.CreateError);
});
} catch {
}
})