If the condition is met, go ahead and run the switchMap function; if not, make sure to cancel everything

Question

If the condition is met, go ahead and run the switchMap function; if not, make sure to cancel everything

Working on a web application using Angular 10 has led me to prefer Observables over Promises. However, creating a seamless flow of executions can be challenging at times.

My objective is to follow this flow:

Show a confirmation modal
If the confirmation returns a value ({isConfirmed: true}), display a loading screen (based on the condition).
Utilize switchMap to initiate HTTP calls.
If any HTTP call fails, hide the loading screen and display a warning message.

My Approach:

 send(title: string, message): Observable<any> {
    const isConfirmed: Promise<{isConfirmed: boolean}> = this.alertService.warningConfirmation(
      'Send message',
      'Are you sure you want to send the message?',
      'Send',
      'Cancel'
    );

    return from(isConfirmed)
      .pipe(
        tap(res => res.isConfirmed ? this.loadingService.present() : EMPTY),
        switchMap(res => from(this.service.httpCallOneGetUsers())
          .pipe(
            map(users => users.map(user => user.email)),
            switchMap(emails => this.service.httpCallTwoSendMessage(title, message, emails))
          )
        ),
        finalize(() => this.loadingService.dismiss()),
        tap({
          next: () => console.log('Message sent!'),
          error: () => console.log('Could not send the message.')
        })
      );
  }

When canceling the confirmation, the error event is triggered without displaying the loading screen.

The first switchMap contains two HTTP calls, one returning a Promise and the other an Observable. This is why I used from() for the first call.

My Objectives are:

To conditionally enter the switchMap if the confirmation result is isConfirmed: true. If false, abort the process without triggering the error event.
To determine the optimal placement for tap or finalize to handle showing/hiding the loading screen and displaying success/error messages to the user.

angular typescript rxjs

Answer 1

Answer №1

1

Execute the switchMap only if the confirmation result is isConfirmed: true.

Consider using filter. For example:

from(isConfirmed).pipe(
  filter((res) => !!res.isConfirmed)
  ...
)

This will emit values that meet the filter condition.

2

When is the ideal place to include tap or finalize...?

finalize: Should be placed at the end to ensure it runs even if a prior subscription fails.
tap: Can be used wherever an action needs to be executed. For instance, for printing users' emails, the tap instruction should be inserted in the pipe where that data exists.

In summary:

from(isConfirmed).pipe(
  filter((res) => !!res.isConfirmed),
  switchMap((res) => from(this.service.httpCallOneGetUsers())),
  map((users) => users.map((user) => user.email)),
  switchMap((emails) =>
    this.service.httpCallTwoSendMessage(title, message, emails)
  ),
  finalize(() => this.loadingService.dismiss()),
  tap({
    next: () => console.log("Message sent!"),
    error: () => console.log("Could not send the message."),
  })
);

Note: the final tap acts as the subscriber of the subscription outcome, hence its position at the end. However, this code snippet should belong inside the subscribe function.

UPDATE (from comments)

To complete the observable when the condition is false, consider implementing the following logic:

from(isConfirmed).pipe(
  switchMap((res) => {
    if (res.isConfirmed) {
      this.loadingService.present();
      return from(this.service.httpCallOneGetUsers());
    } else {
      throwError("");
    }
  }),
  map((users) => users.map((user) => user.email)),
  switchMap((emails) =>
    this.service.httpCallTwoSendMessage(title, message, emails)
  ),
  finalize(() => this.loadingService.dismiss()),
  tap({
    next: () => console.log("Message sent!"),
    error: () => console.log("Could not send the message."),
  })
);

If the condition is true, the pipe will execute accordingly. If it's false, the flow will bypass subsequent operations and transition to finalize.

Answer 2

1

Execute the switchMap only if the confirmation result is isConfirmed: true.

Consider using filter. For example:

from(isConfirmed).pipe(
  filter((res) => !!res.isConfirmed)
  ...
)

This will emit values that meet the filter condition.

2

When is the ideal place to include tap or finalize...?

finalize: Should be placed at the end to ensure it runs even if a prior subscription fails.
tap: Can be used wherever an action needs to be executed. For instance, for printing users' emails, the tap instruction should be inserted in the pipe where that data exists.

In summary:

from(isConfirmed).pipe(
  filter((res) => !!res.isConfirmed),
  switchMap((res) => from(this.service.httpCallOneGetUsers())),
  map((users) => users.map((user) => user.email)),
  switchMap((emails) =>
    this.service.httpCallTwoSendMessage(title, message, emails)
  ),
  finalize(() => this.loadingService.dismiss()),
  tap({
    next: () => console.log("Message sent!"),
    error: () => console.log("Could not send the message."),
  })
);

Note: the final tap acts as the subscriber of the subscription outcome, hence its position at the end. However, this code snippet should belong inside the subscribe function.

UPDATE (from comments)

To complete the observable when the condition is false, consider implementing the following logic:

from(isConfirmed).pipe(
  switchMap((res) => {
    if (res.isConfirmed) {
      this.loadingService.present();
      return from(this.service.httpCallOneGetUsers());
    } else {
      throwError("");
    }
  }),
  map((users) => users.map((user) => user.email)),
  switchMap((emails) =>
    this.service.httpCallTwoSendMessage(title, message, emails)
  ),
  finalize(() => this.loadingService.dismiss()),
  tap({
    next: () => console.log("Message sent!"),
    error: () => console.log("Could not send the message."),
  })
);

If the condition is true, the pipe will execute accordingly. If it's false, the flow will bypass subsequent operations and transition to finalize.

Answer 3

Answer №2

In my opinion, tackling this problem could be approached in the following manner:

return from(isConfirmed)
    .pipe(
        switchMap(res => res.isConfirmed ? of(res) : EMPTY),
        tap(() => this.loadingService.present()),
        switchMap(res => from(this.service.httpCallOneGetUsers()).pipe(...)
        ...

The tweak I've made is incorporating switchMap and tap() right at the start. By checking if res.isConfirmed === false, you can return EMPTY which will not trigger any subsequent operators (it's essentially a complete notification). In cases where it's true, the original res object is returned using of(res).

For concealing the loading process, the optimal operator to use would most likely be finalize() since it executes when the chain is disposed, after completion, encountering errors, or being unsubscribed.

Answer 4

In my opinion, tackling this problem could be approached in the following manner:

return from(isConfirmed)
    .pipe(
        switchMap(res => res.isConfirmed ? of(res) : EMPTY),
        tap(() => this.loadingService.present()),
        switchMap(res => from(this.service.httpCallOneGetUsers()).pipe(...)
        ...

The tweak I've made is incorporating switchMap and tap() right at the start. By checking if res.isConfirmed === false, you can return EMPTY which will not trigger any subsequent operators (it's essentially a complete notification). In cases where it's true, the original res object is returned using of(res).

For concealing the loading process, the optimal operator to use would most likely be finalize() since it executes when the chain is disposed, after completion, encountering errors, or being unsubscribed.

If the condition is met, go ahead and run the switchMap function; if not, make sure to cancel everything

Answer №1

1

2

UPDATE (from comments)

Answer №2

Similar questions

The value of req.headers('Authorization') has not been defined

constructor parameters not being flagged as unused by no-unused-vars plugin

How can I add a new key value pair to an existing object in Angular?

What is the correct way to define the onClick event in a React component?

After extraction from local storage, the type assertion is failing to work properly

Tips for concealing boostrap spinners

What methods can TypeScript use to accommodate this kind of Generic Type?

How to Add External Applications Using Angular-CLI

Using LINQ with ngFor in Angular 6

Encountering an issue while trying to import the validator module in NextJS 13

Tips for correctly decorating constructors in TypeScript

What is the process of submitting form data in Angular?

Effortless loading with tab navigation in routers

Multiple conditions in TypeScript resulting in a function output

Exploring the depths of Rx.ReplaySubject: Techniques for delaying the `next()` event

Using a for loop in conjunction with Observable.forkJoin

Monitoring mouse events on a child element with an attached directive in Angular 7

What is the best way to effectively handle the proxying of objects across multiple levels?

Angular2's service executing http method is limited to just once

What is the easiest way to compile a single .ts file in my src folder? I can achieve this by configuring the tsconfig.js file and running the yarn