Added search in Ranking

webapp/src/components/ranking/RankingView.js

@@ -10,21 +10,34 @@ const retriever = new RankingRetriever();
 const RankingView = () => {
   const [rankingData, setRankingData] = useState(null);
   const [myRankingData, setMyRankingData] = useState(null);
+  const [searchTerm, setSearchTerm] = useState(""); // Nuevo estado para el término de búsqueda
+
   const[t] = useTranslation("global");
   const {user} = useUserContext();
 
   const getRanking = async () => {
     try {
       var ranking = await retriever.getTopTen();
       setRankingData(ranking.usersCompetitiveStats);
-      var myrank = await retriever.getMyPosition(user.username);
+      var myrank = await retriever.getUser(user.username);
       setMyRankingData(myrank);
       console.log(myrank)
     } catch (error) {
       console.log(error);
     }
   }
-
+  const handleSearch = async (e) => {
+    e.preventDefault();
+    if(searchTerm.length!==0){
+      try {
+        const rank = await retriever.getUser(searchTerm);
+        setMyRankingData(rank);
+      } catch (error) {
+        console.log(error);
+      }
+    }
+
+  }
   if(rankingData==null){
     getRanking();
   }
@@ -33,7 +46,18 @@ const RankingView = () => {
     <div className='table'>
       <BackButton t={t} />
       <h1>{t("ranking.ranking")}</h1>
+      <form onSubmit={handleSearch} className='search'>
+        <input
+          type="text"
+          value={searchTerm}
+          onChange={(e) => setSearchTerm(e.target.value)}
+          placeholder={t("ranking.enter_username")}
+        />
+        <button type="submit">{t("ranking.search")}</button>
+      </form>
       {rankingData && rankingData.length > 0 && myRankingData ? (
+        <>
+
         <table>
           <thead>
             <tr>
@@ -64,6 +88,7 @@ const RankingView = () => {
             </tr>
           </tbody>
         </table>
+        </>
       ) : (
         < Loader />
       )}

webapp/src/custom.css

@@ -1655,3 +1655,21 @@ h2{
 .table tbody tr:last-child td:last-child {
   border-right: 2px solid rgba(205, 187, 187, 0.455); /* Borde derecho */
 }
+
+/* Estilo para el cuadro de búsqueda */
+input[type="text"] {
+  border: 2px solid #636262; /* Borde sólido */
+  padding: 8px; /* Espaciado interno */
+  font-size: 16px; /* Tamaño de letra */
+  color: #e5e0e0; /* Color de letra */
+  background-color: #2a2929; /* Color de fondo */
+}
+
+/* Estilo para el botón */
+.search > button{
+  font-size: 18px; /* Tamaño de letra */
+  width: 7em;
+  height: 2em;
+}
+
+

webapp/src/translations/en/global.json

@@ -103,7 +103,9 @@
         "position":"Position",
         "username":"Username",
         "points":"Points",
-        "num_games":"Competitive games"
+        "num_games":"Competitive games",
+        "search":"Search",
+        "enter_username":"Enter Username..."
       },
       "error":{
         "error":"Error",

webapp/src/translations/es/global.json

@@ -111,7 +111,9 @@
       "position":"Posición",
       "username":"Username",
       "points":"Puntos",
-      "num_games":"Juegos Competitivos"
+      "num_games":"Juegos Competitivos",
+      "search":"Buscar",
+      "enter_username":"Inserta usuario..."
     }
 
   }