Feature request: singleton popup

[mariusGundersen]

I have some popups that should only be open one at a time, and it would be nice if that was something react-call can be configured to handle/restrict. I have a few different thoughts on how this could be implemented, not sure what you think:

simple version: include index in call props

If the index of the array item is included in the call props then I can have a useEffect that checks if the index is 0 or more than 0, and if it is something other than 0 I can just call end() right away:

export const Confirm = createCallable(({ call, message }) => {
  useEffect(() => {
    // This causes any confirm popup that isn't the first one to close
    if(call.index > 0) call.end();
  }, []);

  return (
    <div role="dialog">
      <p>{message}</p>
      <button onClick={() => call.end(true)}>Yes</button>
      <button onClick={() => call.end(false)}>No</button>
    </div>
  );
})

more complex version: configure what happens with subsequent calls

Another option is to set an option in createCallable as to what should happen with multiple simultaneous calls. By default they stack, but there could be an option for "only-first" or "close-previous", or some other option.

export const Confirm = createCallable(({ call, message }) => (
  <div role="dialog">
    <p>{message}</p>
    <button onClick={() => call.end(true)}>Yes</button>
    <button onClick={() => call.end(false)}>No</button>
  </div>
), {
  multipleCalls: "only-first" // this one is "stacks" by default
})

The last one would be nicer, but I can live with the first option.