CODEWITHSUNDEEP
angularionic-frameworkrxjs
mctuna
mctuna

Reputation: 871

Forcing Observable Waiting till the Callback Funtion to be Invoked

What I am trying to achieve, whenever I get the status code 401 Unauthorized, throwing a dialog and after clicking "OK" navigating to login page.

I will explain it in detail but generally my problem is, I cannot make the observable this.getDialogModalService().displayDialogModal() wait for the callback function of ModalController "onDidDismiss" to be invoked. And immediately returns undefined to the caller service this.http.post().

Is there any way to make the observable wait till the callback is invoked? Or maybe the whole structure is unnecessarily nested and should be changed.

I don't want to give more info and complicate the things even more but if needed I can give more info for the unclear parts.

Here is a small call stack;

=> subscribed => getEventList() => this.http.post() => this.getDialogModalService().displayDialogModal() => callback => dialogModal.onDidDismiss()

Event.Component.ts

    public getEventList() {
    return this.eventService.getEventList(this.navParams.data).subscribe((x: Array<HomeEventListViewModel>) => {
        this._eventList.next(x);
    }, error => {
    });
}

EventService.ts I call here this.http.post

public getEventList(eventType: number): Observable<Array<HomeEventListViewModel>> {
        var model = new EventListType(eventType);
        return this.http.post('/api/Event/EventList', JSON.stringify(model), null).map((res: Response) => {
          if (res) {
            let httpResponse: HttpResponseSuccessModel = res.json();
            return httpResponse.content;
          }              
        }, error => {
            return null;
         }).catch(x => {
             return null;
        });
}

HttpInterceptor.ts

I send here the http request with my intercepted http service and catch 401 call modal service to display the dialog

post(url: string, body: string, options?: RequestOptionsArgs): Observable<Response> {
    url = this.updateUrl(url);
    return super.post(url, body, this.getRequestOptionArgs(options)).map((res: Response) => {
        return res;
    }, error => {
        this.getDialogModalService().displayDialogModal("UNKNOWN_ERROR_TITLE", "UNKNOWN_ERROR_MESSAGE");            
        return null;
    }).catch(error => {
        let errorResponse: any = JSON.parse(error._body);
        return this.getDialogModalService().displayDialogModal(errorResponse.errorMessage, "ERROR").map(x => {

            return error;            
        });
    });
}

ModalDialog.Service.ts

This is the modal service I use for all my displaying dialog events. And in my opinion where the problem begins. It doesn't wait for the callback till it is invoked but immediately returns undefined.

displayDialogModal(infoMessage: string, infoTitle: string = "INFO"): Observable<any> {
    return this.translateService.get(infoTitle).map(title => {
        let messageType: number = infoTitle == "INFO" ? 1 : 2;
        let dialogModal = this.dialogModalPresent(infoMessage, title, messageType);

        return dialogModal.onDidDismiss(data => {
          return data;
        });
    });        
}


// messageType = 1:Info, 2:Error
private dialogModalPresent(infoMessage: string, infoTitle: string, messageType: number): Modal {
  let cssClass: string = messageType == 1 ? "gift-modal gift-modal-info" : "gift-modal gift-modal-error";
  let dialogModal = this.modalCtrl.create(DialogComponent,
    { "infoMessage": infoMessage, "infoTitle": infoTitle, "firstButtonText": "OK"},
    { showBackdrop: true, enableBackdropDismiss: false, cssClass: cssClass });

  dialogModal.present();

  return dialogModal;
}

Upvotes: 1

Views: 229

Answers (1)

Richard Matsen
Richard Matsen

Reputation: 23473

I admit I'm having trouble seeing the full picture, but one thing of note - if you're using Angular 4.3.4 and the HttpInterceptor interface then your http.post in EventService.ts should probably be HttpClient.post.

Hope this helps.

Upvotes: 1

Related Questions