Scenario
If the description made you more confused about what this is actually about, here’s a flowchart diagram for you:
flowchart TD
id1(Check if prompt needs to be shown via API call)
--> id2{Prompt shown?}
id2 -->|Yes| id3{Show prompt with Yes/No buttons}
id2 -->|No| id4(Make 2nd API call)
id3 -->|Yes| id5(Make 2nd API call)
id3 -->|No| id6(Close the prompt)
Usecase
You’re trying to create a Company.If a company name already exists, users should be warned that the company name already exists and do they really want to proceed with the same name. Company won’t be created if user chooses to cancel the prompt but, company with same name will be created if user chooses to proceed.
Implementation
Let’s look at some react code to see how you might go on implementing this:
const [createCompanyResolver, setCreateCompanyResolver] = useState<{
resolve: null | ((value: boolean | PromiseLike<boolean>) => void);
}>({
resolve: null,
});
Here, createCompanyResolver
is a state that will be used to resolve the promise that will be created when the prompt is shown.
try {
const exists = await checkCompanyNameExists(companyName);
if (exists) {
// Show prompt with warning
...
const createCompany = new Promise<boolean>((resolve) => {
setCreateCompanyResolver({ resolve });
});
// Await for user to confirm if they want to create company
const shouldCreateCompany = await createCompany;
if (!shouldCreateCompany) {
return;
}
}
}
The value of createCompany
will be resolved based on whether the user chooses to proceed (true) or cancel(false) the prompt.
<WarningModal
...
onUserAction={(proceed) => {
if (createCompanyResolver.resolve) {
createCompanyResolver.resolve(proceed);
}
}}
...
/>