Définir la forme de l’état

Quand vous ajoutez des informations dans plusieurs endroits, l’interface peut afficher des totaux incohérents. Par exemple, une tâche peut être cochée alors que le compteur indique encore qu’elle est en attente. Vous allez définir une source de données claire pour les tâches et calculer la progression à partir de cette source.

Une source de vérité pour les tâches

L’état applicatif est l’ensemble des données dont l’application a besoin pour décrire sa situation à un instant donné. Dans ce gestionnaire, il contient la liste des tâches. Chaque tâche possède un identifiant, un libellé et une valeur booléenne indiquant si elle est terminée. Garder une forme identique pour toutes les tâches rend leur lecture et leur traitement prévisibles.

La progression visible dans le HTML présente le nombre de tâches terminées et le nombre total de tâches. Ces nombres ne doivent pas être stockés séparément de la liste : ils peuvent être calculés à partir de celle-ci. Ce sont des données dérivées. En évitant de conserver à la fois les tâches et leurs compteurs, vous évitez qu’une modification de la liste oublie de mettre à jour un total.

Définir l’état initial

L’état initial est la valeur de départ utilisée avant que l’application ait reçu ou créé des tâches. Pour le moment, la liste est vide. Vous exportez cette valeur depuis etat.js, qui est le fichier prévu par le contrat du projet pour définir l’état initial. La fonction nettoyerLibelle, déjà présente depuis les leçons précédentes, reste également exportée.

// js/etat.js

export function nettoyerLibelle(libelle) {
  return libelle.trim();
}

export const etatInitial = {
  taches: []
};

export function calculerProgression(etat) {
  const total = etat.taches.length;
  let terminees = 0;

  for (const tache of etat.taches) {
    if (tache.terminee) {
      terminees += 1;
    }
  }

  return {
    terminees,
    total
  };
}

La fonction calculerProgression reçoit l’état et renvoie les deux nombres utiles à l’affichage. Elle n’ajoute pas ces valeurs à l’état : elle les recalcule au moment où elles sont demandées. Avec une liste vide, le résultat contient zéro tâche terminée et zéro tâche au total. La fonction pourra être appelée lors d’une mise à jour de l’interface, sans créer une seconde version des compteurs.

Vérifier la forme obtenue

Pour vérifier la structure sans toucher au DOM, vous pouvez importer l’état initial et la fonction de calcul depuis le point d’entrée. Remplacez l’exemple autonome précédent de main.js par ce contenu. L’exemple ajoute en mémoire deux tâches de formes identiques afin de rendre le calcul observable ; il ne modifie pas encore l’état initial et ne met pas à jour la page.

// js/main.js
import { calculerProgression, etatInitial } from "./etat.js";

const etatExemple = {
  taches: [
    { id: 1, libelle: "Préparer la réunion", terminee: true },
    { id: 2, libelle: "Envoyer le compte rendu", terminee: false }
  ]
};

const progressionInitiale = calculerProgression(etatInitial);
const progressionExemple = calculerProgression(etatExemple);

console.log("État initial :", etatInitial);
console.log("Progression initiale :", progressionInitiale);
console.log("Progression de l’exemple :", progressionExemple);

État initial : { taches: [] }
Progression initiale : { terminees: 0, total: 0 }
Progression de l’exemple : { terminees: 1, total: 2 }

L’identifiant sert à distinguer les tâches, même si deux libellés sont identiques. Le libellé contient le texte affiché, tandis que terminee porte l’information d’achèvement. Le calcul compte les valeurs vraies de cette propriété et prend la longueur de la liste comme total. L’exemple confirme ainsi que la progression annoncée est cohérente avec les tâches présentes.

À retenir

• L’état applicatif conserve les tâches selon une forme stable : identifiant, libellé et statut d’achèvement.
• L’état initial est une liste vide, exposée par `etat.js`.
• Les compteurs de progression sont des données dérivées, calculées à partir de la liste.
• L’exemple vérifie les résultats sans intervenir sur le DOM.

Dans la prochaine leçon, vous ferez évoluer cet état à partir d’actions explicites, sans disperser les changements dans l’application.