Cartographier les responsabilités de l’application

Quand un tableau de bord grandit, une même page peut finir par mêler affichage, saisie, filtrage et calculs. Cette concentration rend les changements difficiles à isoler : une modification du récapitulatif risque de perturber la liste des dépenses. Vous allez cartographier ces responsabilités avant de construire les fonctionnalités.

Distinguer les responsabilités

Commencez par identifier ce que chaque partie de l’écran doit faire. L’entête présente le tableau de bord et ses liens de navigation ; le récapitulatif affiche une période et ses totaux ; le formulaire recueille une dépense ; les filtres permettent de préciser la liste ; la liste présente les résultats et les actions associées. Ces zones visuelles constituent des frontières de composants : chacune regroupe une responsabilité que vous pouvez comprendre et faire évoluer séparément.

Une frontière n’impose pas qu’un composant réalise tout le travail associé à sa zone. Un composant de présentation décrit ce qui doit apparaître et où ; la logique métier porte les règles propres aux dépenses, comme décider quelles dépenses appartiennent à une période ou comment obtenir un total. Séparer ces rôles évite d’encombrer le balisage avec des règles de calcul, et permet de repérer plus facilement l’endroit où une règle doit être modifiée.

Associer les responsabilités aux fichiers

Le projet fournit déjà une arborescence adaptée à cette cartographie. App.tsx joue le rôle de composant de page : il assemble les grandes zones, sans absorber tous leurs détails. Les fichiers de src/components correspondent aux éléments d’interface identifiables ; Entete.tsx et Navigation.tsx séparent, par exemple, la présentation du titre et les liens de navigation.

• src/components/Entete.tsx et Navigation.tsx : titre et navigation.
• src/components/Recapitulatif.tsx : présentation du récapitulatif mensuel.
• src/components/FormulaireDepense.tsx : champs et action de saisie.
• src/components/FiltresDepenses.tsx : contrôles de filtrage.
• src/components/ListeDepenses.tsx : tableau, état vide et actions sur les lignes.

La logique métier ne doit pas être enfouie dans le composant qui dessine un tableau ou un formulaire. Le contrat du projet prévoit des hooks dédiés dans src/hooks pour fournir les données et les calculs nécessaires aux composants. Le contexte, le service et les types disposent également de fichiers séparés : vous les rencontrerez dans les leçons consacrées à ces responsabilités. À ce stade, retenez surtout qu’un composant d’interface n’est pas l’endroit où concentrer toutes les règles du domaine.

Composer la page

La composition donne à la page un rôle lisible : elle indique quelles zones sont réunies et dans quel ordre, tandis que chaque composant spécialisé garde son propre balisage. Voici une représentation de cette organisation. Les imports et composants utilisés correspondent aux fichiers prévus par le contrat ; les éléments natifs et les classes restent ceux du squelette de référence.

import { Entete } from "./components/Entete";
import { Recapitulatif } from "./components/Recapitulatif";
import { FormulaireDepense } from "./components/FormulaireDepense";
import { FiltresDepenses } from "./components/FiltresDepenses";
import { ListeDepenses } from "./components/ListeDepenses";

export function App() {
  return (
    <div className="atelier-app">
      <Entete />
      <main className="atelier-principal">
        <Recapitulatif />
        <FormulaireDepense />
        <section id="depenses" className="atelier-liste" aria-labelledby="titre-depenses">
          <h2 id="titre-depenses">Dépenses</h2>
          <FiltresDepenses />
          <ListeDepenses />
        </section>
      </main>
    </div>
  );
}

La page garde ici la structure générale, notamment le titre de la section des dépenses, tandis que les composants importés prennent en charge les zones spécialisées. Dans l’implémentation complète, leurs données et leurs actions seront reliées aux mécanismes prévus dans le projet. Cette répartition n’ajoute ni classe CSS ni nouveau fichier : elle utilise les composants et les noms déjà définis par le contrat.

À retenir

• Répartissez le tableau de bord selon ses zones fonctionnelles : récapitulatif, saisie, filtres et liste.
• Confiez à App.tsx l’assemblage des zones, et aux composants spécialisés leur présentation.
• Gardez les règles métier distinctes du balisage des composants d’interface.
• Respectez l’arborescence et les noms du contrat ; une frontière de composant doit clarifier une responsabilité.

Dans la prochaine leçon, vous définirez les types du domaine en TypeScript strict pour représenter les dépenses et les catégories.