commit

src/assets/HelpButton.css

@@ -0,0 +1,7 @@
+.helpButton-enabled {
+    background-color: green;
+}
+
+.helpButton-disabled {
+    background-color: red;
+}

src/assets/HelpButton.jsx

@@ -0,0 +1,42 @@
+import { useEffect, useState } from 'react';
+import axios from 'axios';
+
+import './HelpButton.css';
+
+export default function HelpButton({ gameid, helpingprop, token }) {
+    const [helping, setHelping] = useState(helpingprop);
+
+    function addHelper() {
+        axios.post("http://leizour.fr:3000/api/v1/games/addHelper", { token, gameid })
+            .then(() => setHelping(true))
+            .catch((error) => console.error("Error adding helper"));
+    }
+
+    function removeHelper() {
+        axios.post("http://leizour.fr:3000/api/v1/games/removeHelper", { token, gameid })
+            .then(() => setHelping(false))
+            .catch((error) => console.error("Error removing helper"));
+    }
+
+    function handleClick(event) {
+        if (helping) {
+            removeHelper();
+        } else {
+            addHelper();
+        }
+    }
+
+    useEffect(() => {
+        if (helping) {
+            document.getElementById(`helpbutton-${gameid}`).classList.add("helpButton-enabled");
+            document.getElementById(`helpbutton-${gameid}`).classList.remove("helpButton-disabled");
+        } else {
+            document.getElementById(`helpbutton-${gameid}`).classList.remove("helpButton-enabled");
+            document.getElementById(`helpbutton-${gameid}`).classList.add("helpButton-disabled");
+        }
+    }, [helping]);
+
+    return (
+        <button className="helpButton" id={`helpbutton-${gameid}`} onClick={handleClick}>Set helper</button>
+    )
+}

src/pages/Home.jsx

@@ -2,23 +2,30 @@ import { useState, useEffect } from 'react';
 import { useNavigate } from "react-router-dom";
 import axios from "axios";
 
+import HelpButton from '../assets/HelpButton';
+
 export default function Home() {
   const navigate = useNavigate();
+  const [user, setUser] = useState();
+  const [token, setToken] = useState();
   const [games, setGames] = useState([]);
   const [loading, setLoading] = useState(true);
   const [name, setName] = useState("");
 
   useEffect(() => {
-    const token = localStorage.getItem("token");
+    const tokenLocal = localStorage.getItem("token");
-    if (!token) {
+    if (!tokenLocal) {
       navigate("/login");
       return;
     }
 
+    setToken(tokenLocal);
+    setUser(JSON.parse(atob(tokenLocal.split(".")[1])).user);
+    
     async function fetchGames() {
       setLoading(true);
       try {
-        const response = await axios.post("http://localhost:3000/api/v1/games/getall", { token });
+        const response = await axios.post("http://leizour.fr:3000/api/v1/games/getall", { token: tokenLocal });
         setGames(response.data);
       } catch (error) {
         console.error("Error fetching games:", error);
@@ -28,9 +35,9 @@ export default function Home() {
     }
 
     fetchGames();
-  }, [navigate]);
+  }, []);
 
-  const handleSearchChange = (event) => {
+  function handleSearchChange(event) {
     setName(event.target.value);
   };
 
@@ -68,9 +75,18 @@ export default function Home() {
         <div>Loading...</div>
       ) : (
         filteredGames.map((game) => (
-          <div key={game.id}>
+          <div className='game'>
             <img src={`https://www.myludo.fr/img/jeux/1/300/${getCode(Math.floor(game.id / 1000))}/${game.id}.png`} />
-            {game.title}
+            <h1 className='game-title'>{game.title}</h1>
+            <div className='helpers'>
+              {(JSON.parse(game.helpers).map((helper) => (
+                helper === user.id ? () => {} : (
+                  <div className='helper'>
+                    <h2 className='helper-title'>{helper}</h2>
+                  </div>
+              ))))}
+            </div>
+            <HelpButton gameid={game.id} helpingprop={JSON.parse(game.helpers).includes(user.id)} token={token} />
           </div>
         ))
       )}

src/pages/Login.jsx

@@ -21,7 +21,7 @@ export default function Login() {
     }
 
     try {
-      const response = await axios.post("http://localhost:3000/api/v1/auth/login", {
+      const response = await axios.post("http://leizour.fr:3000/api/v1/auth/login", {
         username: username,
         password: password
       })

src/pages/Register.jsx

@@ -22,14 +22,14 @@ export default function Register() {
       }
   
       try {
-        const response = await axios.post("http://localhost:3000/api/v1/auth/register", {
+        const response = await axios.post("http://leizour.fr:3000/api/v1/auth/register", {
             username: username,
             name: name,
             lastname: lastname,
             password: password
         })
 
-        const loginResponse = await axios.post("http://localhost:3000/api/v1/auth/login", {
+        const loginResponse = await axios.post("http://leizour.fr:3000/api/v1/auth/login", {
             username: username,
             password: password
         })