Click here to Skip to main content
15,867,686 members
Please Sign up or sign in to vote.
1.00/5 (2 votes)
I have a function that when it is performed there are times that the navigate works and other times it doesn't (sometimes it enters the if and other times it goes to the else). By console the first thing that appears to me is the console.log of the else, and then appears a console.log that is found in the dialog that was opened, that is much before that else.

What I have tried:

approved(){
    localStorage.setItem('encargado', this.approach.responsable.id)
    localStorage.setItem('cliente', this.approach.client.id)
    localStorage.setItem('approach', this.id)
const dialog = this.dialog.open(ProjectFormComponent)
    dialog.afterClosed().subscribe( result =>{
this.rest.get("/project?approach=" + this.id)
      .subscribe((data:any)=>{
        console.log(data)
if(data.length>0){
this.rest.put("/approach/" + this.id,{
            approachStatus: 'APROBADO'
          }).subscribe((result:any) =>{
this.router.navigate(["/proyecto/" + data[0].id])
          },error=>{
            console.log('error')
          })
        }else{
          console.log("/project?approach=" + this.id)
        }
      })
    })
  }
Posted

1 solution

As this question has been dormant for a long time, it's worth looking at how this could have been tackled to self-diagnose what the problem is. Let's take the code "as-is", and see how a little bit of rearranging the problem would simplify debugging. First, this is what the code currently looks like:
TypeScript
approved(){
    localStorage.setItem('encargado', this.approach.responsable.id)
    localStorage.setItem('cliente', this.approach.client.id)
    localStorage.setItem('approach', this.id)
const dialog = this.dialog.open(ProjectFormComponent)
    dialog.afterClosed().subscribe( result =>{
this.rest.get("/project?approach=" + this.id)
      .subscribe((data:any)=>{
        console.log(data)
if(data.length>0){
this.rest.put("/approach/" + this.id,{
            approachStatus: 'APROBADO'
          }).subscribe((result:any) =>{
this.router.navigate(["/proyecto/" + data[0].id])
          },error=>{
            console.log('error')
          })
        }else{
          console.log("/project?approach=" + this.id)
        }
      })
    })
  }
That's a messy old piece of code, and is going to be difficult to work out what is going on. Let's break this into something much more manageable. First, let's break out the storage into its own method:
TypeScript
approved(): void {
  this.writeToLocalStorage();
const dialog = this.dialog.open(ProjectFormComponent)
    dialog.afterClosed().subscribe( result =>{
this.rest.get("/project?approach=" + this.id)
      .subscribe((data:any)=>{
        console.log(data)
if(data.length>0){
this.rest.put("/approach/" + this.id,{
            approachStatus: 'APROBADO'
          }).subscribe((result:any) =>{
this.router.navigate(["/proyecto/" + data[0].id])
          },error=>{
            console.log('error')
          })
        }else{
          console.log("/project?approach=" + this.id)
        }
      })
    })
}

private writeToLocalStorage(): void {
  localStorage.setItem('encargado', this.approach.responsable.id);
  localStorage.setItem('cliente', this.approach.client.id);
  localStorage.setItem('approach', this.id);
}
Now, let's break the dialog handling out:
TypeScript
private showProjectFormDialog(): void {
const dialog = this.dialog.open(ProjectFormComponent)
    dialog.afterClosed().subscribe( result =>{
this.rest.get("/project?approach=" + this.id)
      .subscribe((data:any)=>{
        console.log(data)
if(data.length>0){
this.rest.put("/approach/" + this.id,{
            approachStatus: 'APROBADO'
          }).subscribe((result:any) =>{
this.router.navigate(["/proyecto/" + data[0].id])
          },error=>{
            console.log('error')
          })
        }else{
          console.log("/project?approach=" + this.id)
        }
      })
    })
}
At this point, we can set our approved message as follows:
TypeScript
approved(): void {
  this.writeToLocalStorage();
  this.showProjectFormDialog();
}
Now, let's get back to tidying up the dialog handling. Right now, that's a mess of indentation and subscriptions. I know TypeScript and I couldn't work out what was going on in there at a glance, so I can't imagine what it would be like if someone new to the language were to pick this up. I'm going to break the whole thing up in one go, putting some order to it.
TypeScript
private showFormDialog(): void {
  const dialog = this.dialog.open(ProjectFormComponent);
  dialog.afterClosed().subscribe(result => {
    this.afterProjectFormClosed();
  });
}

private afterProjectFormClosed(): void {
  this.rest.get(`/project?approach={this.id}`).subscribe((data: any) => { updateProject(data); });
}

private updateProject(data: any): void {
  console.log(data);
  if (data.length > 0) {
    addProjectToStatus(data);
  }
  else {
    console.log(`Did not fetch the project at /project?approach={this.id}`);
  }
}

private addProjectToStatus(data: any): void {
  this.rest.put(`/project?approach={this.id}`).subscribe(
    (result:any) =>{ this.router.navigate(["/proyecto/" + data[0].id]); }
     ,error=>{ console.log('error'); });
}
Now, I can see what the code is doing. The most obvious candidate for there being a problem is that the record with that id does not exist. That's what I would be checking first. The second thing I would be looking at is adding error handling to the rest call part to see if I was getting something like a 404 error here, or a 5xx status. Right now, the code has a naive assumption that the subscription is always going to return with good information. Anyway, I hope that helps with you if you want to know how to turn a whole heap of code into something that can be debugged easily.

Note: I really don't like any as a datatype but I don't know that values are being returned so I have left it at that, and I have added semi-colons and void types because I like consistent code.
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900