debug tri

mon-projet/src/App.jsx

@@ -39,11 +39,14 @@ function App() {
   const [niveaux, setNiveaux] = useState("");
   const [tri, setTri] = useState("nom");
 
-  const affichees = [...trilogies].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;
-  });
+  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;
+    });
+
   function ajouter(e) {
     e.preventDefault(); // empêche le rechargement de page
     if (nom.trim() === "") return; // on n'ajoute pas du vide
@@ -59,10 +62,6 @@ function App() {
 
   const total = Object.values(likes).reduce((s, n) => s + n, 0);
 
-  const filtrees = trilogies.filter((t) =>
-    t.nom.toLowerCase().includes(recherche.toLowerCase()),
-  );
-
   return (
     <div className="body">
       <Header />
@@ -92,14 +91,14 @@ function App() {
         onChange={(e) => setRecherche(e.target.value)}
       />
       <p>👍 Total de likes : {total}</p>
-      {filtrees.length === 0 && <p>Aucune trilogie trouvée</p>}
-      {filtrees.map((trilo) => (
+      {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} // SON nombre de likes
-          onLike={() => liker(trilo.id)} // incrémente SON like
+          likes={likes[trilo.id] || 0}
+          onLike={() => liker(trilo.id)}
         />
       ))}
       <Footer />

mon-projet/src/main.jsx

@@ -1,10 +1,17 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import './index.css'
-import App from './App.jsx'
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "./index.css";
+import App from "./App.jsx";
+import { BrowserRouter } from "react-router-dom";
 
-createRoot(document.getElementById('root')).render(
+createRoot(document.getElementById("root")).render(
+  <BrowserRouter>
+    <App />
+  </BrowserRouter>,
+);
+
+createRoot(document.getElementById("root")).render(
   <StrictMode>
     <App />
   </StrictMode>,
-)
+);