Modifiez la mise à jour de la tâche avec HTTP Client

Objectifs de ce chapitre

• ✔️
  Modifiez la mise à jour de la tâche avec HTTP Client

  Apprenez comment mettre à jour une tâche de la liste en utilisant HTTP Client dans une application Angular.

En plus de cibler la mise à jour d’une tâche plutôt que sa création, cette leçon sera assez similaire à la précédente :

• Vous mettrez à jour TaskService;
• Vous mettrez à jour TaskFormComponent en faisant attention à la requête HTTP asynchrone.

TaskService

Basé sur le protocole HTTP, vous utiliserez la fonction put pour ajouter une tâche à la liste : http.put(). Cette fonction attend 2 paramètres :

1. L’URL du serveur API; Cette URL inclura l’identifiant de la tâche à mettre à jour : http://localhost:3000/tasks/${task.id}
2. L’objet de la tâche à envoyer au serveur

updateTask(task: Partial<Task>, id: string) {
    return this.http.patch<Task>(`http://localhost:3000/tasks/${id}`, task);
}

🎓 Instructions

1. Modifiez le fichier task.service.ts.

   import { Injectable } from '@angular/core';
   import { HttpClient } from '@angular/common/http';
   import { Task, TaskForm } from './task.model';
   
   @Injectable({
       providedIn: 'root'
   })
   export class TaskService {
       constructor(private http: HttpClient) { }
   
       getTask(id: string) {
           return this.http.get<Task>(`http://localhost:3000/tasks/${id}`);
       }
   
       updateTask(task: Partial<Task>, id: string) {
           return this.http.patch<Task>(`http://localhost:3000/tasks/${id}`, task);
       }
   }

Récupérer la tâche à mettre à jour

Vous venez de mettre à jour la fonction getTask pour récupérer une tâche spécifique. Tout comme les fonctions changées précédemment pour communiquer avec l’API, cette fonction va donc altérer le code existant dans le composant TaskFormComponent. Si le nom de la fonction ne change pas, il va désormais falloir subscribe pour en récupérer la valeur.

ngOnInit() {
    const id = this.route.snapshot.paramMap.get('id');

    if (id) {
      this.taskService.getTask(id).subscribe(task => {
        this.task = task;
      });
    }
  }

🎓 Instructions

1. Modifiez le fichier task-form.component.ts.

   import { Component, OnInit } from '@angular/core';
   import { ActivatedRoute, Router } from '@angular/router';
   import { TaskForm } from '../task.model';
   import { TaskService } from '../task.service';
   
   @Component({
       selector: 'app-task-form',
       templateUrl: './task-form.component.html',
       styleUrls: ['./task-form.component.css']
   })
   export class TaskFormComponent implements OnInit {
       task: TaskForm = { id: '', title: '', description: '' };
   
       constructor(private taskService: TaskService, private router: Router, private route: ActivatedRoute) { }
   
       ngOnInit() {
           const id = this.route.snapshot.paramMap.get('id');
   
           if (id) {
   
               this.taskService.getTask(id).subscribe(task => {
                   this.task = task;
               });
           }
       }
   }

TaskFormComponent

Modifiez TaskFormComponent pour qu’il utilise la nouvelle fonction. Le moyen le plus simple de le faire serait d’appliquer la même logique que dans la leçon précédente, en mettant à jour la fonction submit pour effectuer un appel API et accéder à la page de liste.

Cela donnerait le code suivant :

submit() {
    if (task.id) {

        this.taskService.updateTask(this.task, id).subscribe(() => {
            this.router.navigate(['/']);
        });
    } else {
        this.taskService.addTask(task).subscribe(() => {
            this.router.navigate(['/']);
        });
    }
}

Cela fonctionne mais ce n’est pas la meilleure façon de procéder car nous dupliquons la logique de navigation. Si le chemin de la page de liste change, nous devrons le mettre à jour à deux endroits. Gérez-le en modifiant la fonction submit :

• Créez une variable dont la valeur sera soit la fonction updateTask ou addTask. Sa valeur sera donc une Observable auquelle vous pourrez vous abonner.
• Abonnez-vous à cette variable et accédez à la page de la liste.

🎓 Instructions

1. Modifiez le fichier task-form.component.ts.

   import { Component } from '@angular/core';
   import { Router } from '@angular/router';
   import { TaskForm } from '../task.model';
   import { TaskService } from '../task.service';
   
   @Component({
       selector: 'app-task-form',
       templateUrl: './task-form.component.html',
       styleUrls: ['./task-form.component.css']
   })
   export class TaskFormComponent {
       constructor(private taskService: TaskService, private router: Router) { }
   
       submit() {
           const id = this.route.snapshot.paramMap.get('id');
           const taskObservable = id ? this.taskService.updateTask(task, id) : this.taskService.addTask(task);
   
           taskObservable.subscribe(() => {
               this.router.navigate(['/']);
           });
       }
   }

✔️ Ce que vous avez appris

Vous avez appris à envoyer une requête PUT avec HttpClient pour mettre à jour une tâche dans une application Angular.