Correction services: le tri n'a aucun effet (affiche filtrees au lieu de affichees) -> une seule liste filtree PUIS triee, afficher affichees

CORRECTION_tri.md

@@ -0,0 +1,81 @@
+# 🔧 Correction — ton tri ne change rien à l'affichage
+
+Bonne nouvelle : ton like est **réparé** (likes dans le parent, `liker(id)`, total recalculé) et ton **formulaire d'ajout marche** 👏. Le tri, lui, semble « ne rien faire ». C'est un bug très instructif.
+
+---
+
+## 🔍 Pourquoi le tri n'a aucun effet
+
+Tu calcules **deux** listes dans `App` :
+
+```jsx
+const affichees = [...trilogies].sort((a, b) => { ... });   // ✅ triée... mais jamais utilisée
+const filtrees  = trilogies.filter((t) => ...);             // filtrée (PAS triée)
+```
+
+Et dans le rendu, tu affiches… **`filtrees`** :
+
+```jsx
+{filtrees.map((trilo) => ( ... ))}     // ❌ tu affiches la liste filtrée, pas la triée
+```
+
+Donc quand tu changes le `<select>`, l'état `tri` change bien, React **recalcule `affichees`**… mais comme tu n'affiches **jamais** `affichees`, rien ne bouge à l'écran. Ta liste triée part à la poubelle.
+
+> 🧠 **La règle :** la valeur que tu **calcules** doit être celle que tu **affiches**. Si tu tries `affichees` mais que tu `.map()` `filtrees`, le tri est invisible.
+
+---
+
+## ✅ La correction : UNE seule liste, filtrée **puis** triée
+
+L'ordre logique est : **filtrer** (recherche) → **trier** → **afficher**. On enchaîne les deux sur la même liste :
+
+```jsx
+const affichees = [...trilogies]
+  .filter((t) => t.nom.toLowerCase().includes(recherche.toLowerCase()))
+  .sort((a, b) => {
+    if (tri === "nom")   return a.nom.localeCompare(b.nom);
+    if (tri === "likes") return (likes[b.id] || 0) - (likes[a.id] || 0);
+    return 0;
+  });
+```
+
+Puis tu **supprimes** l'ancien `const filtrees = ...` (devenu inutile) et tu affiches **`affichees`** :
+
+```jsx
+{affichees.length === 0 && <p>Aucune trilogie trouvée</p>}
+{affichees.map((trilo) => (
+  <Carte
+    key={trilo.id}
+    titre={trilo.nom}
+    niveaux={trilo.niveaux}
+    likes={likes[trilo.id] || 0}
+    onLike={() => liker(trilo.id)}
+  />
+))}
+```
+
+> 🔎 `[...trilogies]` fait une **copie** avant de trier (sinon `.sort()` modifierait l'original sur place). On chaîne `.filter().sort()` : chacune renvoie une nouvelle liste, donc on peut les enchaîner tranquillement.
+
+**✅ Test :** tape dans la recherche → la liste se réduit ; change le `<select>` (Nom / Plus likées) → l'**ordre** change ; like une carte puis trie par « Plus likées » → elle remonte.
+
+---
+
+## 🧹 Détail mineur
+
+Tu as enveloppé ton `<select>` dans un fragment `<>…</>` :
+```jsx
+<>
+  <select ...>...</select>
+</>
+```
+Ce n'est pas faux, mais inutile ici : le fragment `<>…</>` ne sert que pour grouper **plusieurs** éléments. Pour un `<select>` seul, tu peux l'enlever.
+
+---
+
+## ✅ Récap
+- [ ] Une **seule** liste `affichees` = `trilogies` **filtrée puis triée**
+- [ ] Supprimer l'ancien `filtrees`
+- [ ] Afficher **`affichees`** dans le `.map()` (et le message « aucune trilogie »)
+- [ ] (Optionnel) enlever le fragment inutile autour du `<select>`
+
+> 💬 La phrase à garder : **on affiche la liste qu'on a vraiment transformée.** Filtre → trie → `map`, sur la même variable.