Problèmes avec afterclosed()

Comme cette question est restée en suspens depuis longtemps, il vaut la peine d’examiner comment elle aurait pu être abordée pour auto-diagnostiquer quel est le problème. Prenons le code “tel quel” et voyons comment une petite réorganisation du problème simplifierait le débogage. Tout d’abord, voici à quoi ressemble le code actuellement :

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)
        }
      })
    })
  }

C’est un vieux morceau de code désordonné et il sera difficile de comprendre ce qui se passe. Décomposons cela en quelque chose de beaucoup plus gérable. Tout d’abord, décomposons le stockage selon sa propre méthode :

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);
}

Maintenant, brisons la gestion de la boîte de dialogue :

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)
        }
      })
    })
}

À ce stade, nous pouvons définir notre message approuvé comme suit :

approved(): void {
  this.writeToLocalStorage();
  this.showProjectFormDialog();
}

Revenons maintenant à la gestion des boîtes de dialogue. À l’heure actuelle, c’est un gâchis d’indentation et d’abonnements. Je connais TypeScript et je n’ai pas pu comprendre d’un seul coup d’œil ce qui se passait là-dedans, donc je ne peux pas imaginer ce que ce serait si quelqu’un de nouveau dans le langage le comprenait. Je vais tout décomposer d’un seul coup, pour y mettre un peu d’ordre.

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'); });
}

Maintenant, je peux voir ce que fait le code. Le problème le plus évident est que l’enregistrement portant cet identifiant n’existe pas. C’est ce que je vérifierais en premier. La deuxième chose que j’examinerais est d’ajouter la gestion des erreurs à la partie appel de repos pour voir si j’obtenais ici quelque chose comme une erreur 404 ou un statut 5xx. À l’heure actuelle, le code part de l’hypothèse naïve que l’abonnement reviendra toujours avec de bonnes informations. Quoi qu’il en soit, j’espère que cela vous aidera si vous voulez savoir comment transformer tout un tas de code en quelque chose qui peut être facilement débogué.

Remarque : je n’aime vraiment aucun type de données, mais je ne sais pas si les valeurs sont renvoyées, donc je l’ai laissé là, et j’ai ajouté des points-virgules et des types vides parce que j’aime le code cohérent.