Subscribe to observable, async map result with input from dialog, use result from map to route

user_13891306 0
Viewed 148

I am calling an API-service which returns an Observable - containing an array of elements.

apiMethod(input: Input): Observable<ResultElement[]>

From this I have been choosing the first element of the array, subscribing to that. Then used that element to route to another page like this:

this.apiService
  .apiMethod(input)
  .pipe(map((results) => results[0])
  .subscribe(
    (result) => {
      return this.router.navigate('elements/', result.id)
  }
)

This works just fine.

Problem is, I do not want to just use the first element, I want a MatDialog, or other similar to pop up, and give the user option of which element to choose, and THEN route to the correct one.

If the list only contain one element though, the dialog should not show, and the user should be routed immediately.

I have tried to open a dialog in the .pipe(map()) function, but the subscribe() happens before I get answer from the user, causing it to fail. And I am not sure if that even is the correct approach. How would any of you solve this problem?

Edit Ended up doing partly what @BizzyBob suggested:

Changing map to switchmap in the API-call, making it this way:

this.apiService
  .apiMethod(input)
  .pipe(switchMap((results) => this.mapToSingle(results)
  .subscribe(
    (result) => {
      return this.router.navigate('elements/', result.id)
  }
)

With the mapToSingle(ResultElement[]) being like this:

private mapToSingle(results: ResultElement[]): Observable<ResultElement> {
  if (result.length === 1){
    return of(results[0]);
  }
    const dialogConfig = new MatDialogConfig<ResultElement[]>();
    dialogConfig.data = results;

    const dialogRef = this.dialog.open(ResultDialogComponent, dialogConfig);

    return dialogRef.afterClosed();
}
rxjs angular-material angular typescript javascript
3 Answers

Two possible options:

  1. Having a subject for the selected result that is "nexted" either by user input or a side effect of getting an api result with one element.
  2. Keeping track of an overall state of the component and responding appropriately whenever a selectedResult is set in the state.

The example below is a sketch of using an Observable to keep track of the component's state.

  • There are two input streams into the state, the results from the api and the user input for the selected result.
  • Each stream is converted into a reducer function that will modify the overall state.
  • The UI should subscribe to this state via an async pipe, showing the modal when appropriate, and updating updating state from events via the Subjects.
  • The redirection should come as an effect to the change of the state when selectedResult has a value.
readonly getResultsSubject = new Subject<MyInput>();
readonly resultSelectedSubject = new Subject<ResultType>();

private readonly apiResults$ = this.getResultsSubjects.pipe(
  switchMap((input) => this.apiMethod(input))
);

readonly state = combineLatest([
  this.apiResults$.pipe(map(results => (s) => results.length === 1 
    ? { ...s, results, selectedResult: x[0], showModal: false }
    : { ...s, results, showModal: results.length > 1 })),
  this.resultSelectedSubject.pipe(map(selectedResult => (s) => ({ ...s, selectedResult })))
]).pipe(
  scan((s, reducer) => reducer(s), { }),
  shareReplay(1)
);

ngOnInit() {
  this.state.pipe(
    filter(x => !!x.selectedResult)
  ).subscribe(x => this.router.navigate('elements/', x.selectedResult.id));
}

I've been using this pattern a lot lately. It makes it pretty easy the number of actions and properties of the state grow.

user_24973350

I would create a DialogComponent that takes in the list of choices as an input, and emits the chosen item when it's closed.

Then, create a helper method (maybe call it promptUser) that simply returns an observable that emits the selected value:

this.apiService.apiMethod(input)
    .pipe(
        switchMap(results => results.length > 1
            ? this.promptUser(results)
            : of(results[0])
        )
    )
    .subscribe(
        result => this.router.navigate('elements/', result.id)
    );

Here we simply use switchMap to return an observable that emits the proper item. If the length is greater than 1, we return the helper method that displays the dialog and emits the chosen item, else just emit the first (only) item. Notice that we wrapped plain value with of since within switchMap, we need to return observable.

In either case, the desired item is emitted and received by your subscribe callback.

user_18583570

I would solve it using the following method:

  1. Get the data with your subscribe (without the pipe). And save this data in the component variable
options: any;

this.apiService
  .apiMethod(input)
  .subscribe(
    (result) => {
       if (result.length === 1) {
         this.router.navigate([result[0]]);
         return;
       }
       options = result;
  }
)
  1. with an ngIf on the modal (conditional of the length of the array of options > 0 display the component with the different choices when the data is received
<modal-component *ngIf="options.length > 0"></modal-component>
  1. when the user (click) on an option inside your modal, use the router to redirect.
html
<div (click)="redirect(value)">option 1</div>

ts
redirect(value) {
    this.router.navigate([value]);
}

That would be the most straight forward

user_90281760
Related