From bcf4c96e3b49efe9008401ddec3eca9adc312613 Mon Sep 17 00:00:00 2001
From: Melissa <stage2@echoes.solutions>
Date: Thu, 25 Jun 2026 11:55:05 +0200
Subject: [PATCH] tried adding the tri in form but doesnt work

---
 react-project/src/App.jsx                     | 44 +++++++++++++++++--
 react-project/src/components/Badge.jsx        |  2 +-
 .../src/components/BarreRecherche.jsx         | 33 ++------------
 react-project/src/components/Carte.jsx        |  2 +-
 react-project/src/components/Form.jsx         | 26 +++++++++++
 5 files changed, 72 insertions(+), 35 deletions(-)
 create mode 100644 react-project/src/components/Form.jsx

diff --git a/react-project/src/App.jsx b/react-project/src/App.jsx
index 18f4b0b..5e27d79 100644
--- a/react-project/src/App.jsx
+++ b/react-project/src/App.jsx
@@ -1,6 +1,7 @@
 import Header from "./components/Header";
 import Footer from "./components/Footer";
 import Carte from "./components/Carte";
+import BarreRecherche from "./components/BarreRecherche";
 import { useState, useEffect } from "react";
 import "./App.css";
 
@@ -9,6 +10,25 @@ function App() {
   const [total, setTotal] = useState(0);
   const [jeux, setJeux] = useState([]);
   const [chargement, setChargement] = useState(true);
+  const [titre, setTitre] = useState("");
+  const [annee, setAnnee] = useState("");
+  const [console, setConsole] = useState("");
+
+  function ajouter(e) {
+    e.preventDefault();
+    if (titre.trim() === "") return;
+    const nouveau = {
+      id: Date.now(),
+      titre,
+      annee: Number(annee),
+      console,
+      Type: "3d",
+    };
+    setJeux([...jeux, nouveau]);
+    setTitre("");
+    setAnnee("");
+    setConsole("");
+  }
 
   const filtres = jeux.filter((j) =>
     j.titre.toLowerCase().includes(recherche.toLowerCase()),
@@ -30,9 +50,7 @@ function App() {
     <>
       <Header />
 
-      <input
-        type="search"
-        placeholder="Search Game…"
+      <BarreRecherche
         value={recherche}
         onChange={(e) => setRecherche(e.target.value)}
       />
@@ -46,12 +64,32 @@ function App() {
           titre={jeu.titre}
           console={jeu.console}
           annee={jeu.annee}
+          Type={jeu.Type}
           onLike={() => setTotal((t) => t + 1)}
         />
       ))}
 
       <p> Total de likes : {total}</p>
 
+      <form onSubmit={ajouter}>
+        <input
+          value={titre}
+          onChange={(e) => setTitre(e.target.value)}
+          placeholder="Titre du jeu"
+        />
+        <input
+          value={annee}
+          onChange={(e) => setAnnee(e.target.value)}
+          placeholder="Année"
+        />
+        <input
+          value={console}
+          onChange={(e) => setConsole(e.target.value)}
+          placeholder="Console"
+        />
+        <button type="submit">Ajouter</button>
+      </form>
+
       <section id="spacer"></section>
       <Footer />
     </>
diff --git a/react-project/src/components/Badge.jsx b/react-project/src/components/Badge.jsx
index 2a6ff9c..875faa8 100644
--- a/react-project/src/components/Badge.jsx
+++ b/react-project/src/components/Badge.jsx
@@ -1,5 +1,5 @@
 function Badge({ Type }) {
-  if (Type === "2d") return null;
+  if (Type === "2d") return "Jeu 2D";
   return <span className="badge"> Jeu 3D </span>;
 }
 
diff --git a/react-project/src/components/BarreRecherche.jsx b/react-project/src/components/BarreRecherche.jsx
index 9b48202..93948dc 100644
--- a/react-project/src/components/BarreRecherche.jsx
+++ b/react-project/src/components/BarreRecherche.jsx
@@ -1,38 +1,11 @@
-import { useState, useEffect } from "react";
-const [jeux, setJeux] = useState([]);
-const [recherche, setRecherche] = useState("");
-
-useEffect(() => {
-  document.title = `${jeux.length} jeux Zelda`;
-}, [jeux]);
-
-const filtres = jeux.filter((j) =>
-  j.titre.toLowerCase().includes(recherche.toLowerCase()),
-);
- const [total, setTotal] = useState(0);
-
-function BarreRecherche() {
+function BarreRecherche({ valeur, onChange }) {
   return (
     <input
       type="search"
       placeholder="Search Game…"
-      value={recherche}
-      onChange={(e) => setRecherche(e.target.value)}
+      value={valeur}
+      onChange={onChange}
     />
-
-    {filtres.length === 0 && <p>Aucun jeu trouvé 😕</p>}
-
-    {filtres.map((jeu) => (
-      <Carte
-        key={jeu.id}
-        gameId={jeu.id}
-        titre={jeu.titre}
-        console={jeu.console}
-        annee={jeu.annee}
-        onLike={() => setTotal((t) => t + 1)}
-      />
-    ))}
-    <p> Total de likes : {total}</p>
   );
 }
 
diff --git a/react-project/src/components/Carte.jsx b/react-project/src/components/Carte.jsx
index ae2cdd2..c3b6105 100644
--- a/react-project/src/components/Carte.jsx
+++ b/react-project/src/components/Carte.jsx
@@ -15,7 +15,7 @@ function Carte(props) {
     <div className="carte">
       <h2>{props.titre}</h2>
       <p>
-        {props.console} - {props.annee} - <Badge />
+        {props.console} - {props.annee} - <Badge Type={props.Type} />
       </p>
       <button
         onClick={() => {
diff --git a/react-project/src/components/Form.jsx b/react-project/src/components/Form.jsx
new file mode 100644
index 0000000..dd16071
--- /dev/null
+++ b/react-project/src/components/Form.jsx
@@ -0,0 +1,26 @@
+import Carte from "./components/Carte";
+import { useState } from "react";
+
+const [tri, setTri] = useState("titre");
+
+const affiches = [...filtres].sort((a, b) => {
+  if (tri === "titre") return a.titre.localeCompare(b.titre);
+  if (tri === "annee") return a.annee - b.annee;
+  return 0;
+});
+
+function Form() {
+  return (
+    <>
+      <select value={tri} onChange={(e) => setTri(e.target.value)}>
+        <option value="titre">Titre (A→Z)</option>
+        <option value="annee">Année</option>
+      </select>
+      {affiches.map((jeu) => (
+        <Carte />
+      ))}
+    </>
+  );
+}
+
+export default Form;