commit

src/pages/Home.jsx

@@ -4,34 +4,52 @@ import axios from "axios";
 
 export default function Home() {
   const navigate = useNavigate();
-  const [games, setGames] = useState({});
+  const [games, setGames] = useState([]);
   const [loading, setLoading] = useState(true);
+  const [name, setName] = useState("");
 
   useEffect(() => {
     const token = localStorage.getItem("token");
     if (!token) {
-      navigate("/login")
+      navigate("/login");
+      return;
     }
     
     async function fetchGames() {
       setLoading(true);
-      const response = await axios.post("http://localhost:3000/api/v1/games/getall", {
+      try {
-        token: token
+        const response = await axios.post("http://localhost:3000/api/v1/games/getall", { token });
-      });
+        setGames(response.data);
-
+      } catch (error) {
-      setGames(response.data);
+        console.error("Error fetching games:", error);
-      setLoading(false);
+      } finally {
+        setLoading(false);
+      }
     }
 
     fetchGames();
-  }, []);
+  }, [navigate]);
 
-  if (loading) {
+  const handleSearchChange = (event) => {
-    return <div>Loading...</div>
+    setName(event.target.value);
+  };
+
+  const filteredGames = games.filter((game) => 
+    game.title.toLowerCase().includes(name.toLowerCase())
+  );
+
+  function getCode(id) {
+    const alphabet = 'abcdefghijklmnopqrstuvwxyz';
+    const base = alphabet.length;
+    let firstLetterIndex = Math.floor(id / base);
+    let secondLetterIndex = id % base;
+
+    let firstLetter = alphabet[firstLetterIndex];
+    let secondLetter = alphabet[secondLetterIndex];
+
+    return firstLetter + secondLetter;
   }
 
-  console.log(games);
-
   return (
     <div>
       <div>
@@ -41,13 +59,21 @@ export default function Home() {
           navigate("/login");
         }}>Logout</button>
       </div>
-      <div>
+      Recherche : <input
-        {
+        type="text"
-          games.map((game) => (
+        value={name}
-            <div key={game.id}>{game.title}</div>
+        onChange={handleSearchChange}
-          ))
+      />
-        }
+      {loading ? (
-      </div>
+        <div>Loading...</div>
+      ) : (
+        filteredGames.map((game) => (
+          <div key={game.id}>
+            <img src={`https://www.myludo.fr/img/jeux/1/300/${getCode(Math.floor(game.id / 1000))}/${game.id}.png`} />
+            {game.title}
+          </div>
+        ))
+      )}
     </div>
-  )
+  );
 }

src/pages/Register.jsx

@@ -6,7 +6,6 @@ export default function Register() {
     const navigate = useNavigate();
 
     useEffect(() => {
-  
       if (localStorage.getItem("token")) {
         navigate("/")
       }
@@ -14,8 +13,8 @@ export default function Register() {
   
     async function register() {
       const username = document.getElementById("username").value;
-    const name = document.getElementById("name").value;
+      const name = document.getElementById("name").value;
-    const lastname = document.getElementById("lastname").value;
+      const lastname = document.getElementById("lastname").value;
       const password = document.getElementById("password").value;
   
       if (!username || !name || !lastname || !password) {