My challenge is to display multiple bootstrap popups sequentially to the user, each containing a stream of messages. However, if I simply subscribe and show the messages one after the other, it might not wait for the user to dismiss a popup before showing the next one. This would lead to either repeatedly calling show('modal') or displaying only the last message.
One unconventional solution could be to introduce a delay between notifications using the debounce operator and hope that the user's response time aligns with this delay.
Another idea I've been pondering is creating a notification stream with a callback function at the receiving end to indicate when a notification has been handled.
export class CallbackNotification<T> {
parameter : T;
callbackFunction: () => any;
}
export function notifyAndMoveNext<T>(source: Observable<T>) : Observable<CallbackNotification<T>> {
let notifications = new BehaviorSubject<any>(0);
return zip(source, notifications)
.pipe(map(([a, n]) => <CallbackNotification<T>> {
parameter = a,
callbackFunction = () => notifications.next(0)
}));
}
Then, the implementation would look like:
notifyAndMoveNext(myMessagesObservable).subscribe(x => { this.currentNotification = x.callbackFunction; showModal(x.parameter); });
and in the button event handler of each popup
this.currentNotification();
This approach may not be suitable for shared subscriptions (publish and refCount). Are there any potential issues with this method that I might have overlooked? Any suggestions for alternative approaches?