How to create a reusuable modal?

To create a generic modal for different confirmations, errors, and information messages, you can start by creating an asynchronous function that opens the modal. Within this function, use the await keyword to store the confirmation message in a variable using the storeValue function.

Once you have the message stored, you can then display it within the modal. Use an if statement to conditionally trigger the relevant actions based on the user's response to the message. If the user agrees to the confirmation, execute the relevant code. If not, trigger the else block.

Here's some sample code that demonstrates this approach:

async function showModal(message) {
  await storeValue('confirmationMessage', message);

  // opening the modal here 

  const confirmationMessage = await retrieveValue('confirmationMessage');
  const response = await displayMessageModal(confirmationMessage);

  if (response) {
    // execute relevant code here
  } else {
    // execute alternative code here
  }
}

In this code, the showModal function stores the message using the storeValue function. It then retrieves that message and displays it within the modal using the displayMessageModal function.

The function then waits for the user's response and triggers either the if or else block based on that response.

Overall, this approach allows you to create a generic modal that can be initialized with different messages and trigger different actions based on the user's response.