Jugadores andando

src/pages/comparacion/comparacion.jsx

@@ -3,14 +3,13 @@ import React, { useState } from 'react';
 import TextField from '@mui/material/TextField';
 import { Footer } from 'common/footer/footer';
 import {
-  IconButton, Typography, Divider, Container,
+  IconButton, Typography, Divider, Container, Grid, Paper,
 } from '@mui/material';
 import SearchIcon from '@mui/icons-material/Search';
 import { Grafica } from 'pages/grafica/grafica';
 import { ApiService } from 'networking/api-service';
 import { API_ROUTES } from 'networking/api-routes';
 import { ListaJugadores } from 'common/lista/lista';
-import raw from '../../consultas/consultas.txt';
 import styles from './comparacion.module.scss';
 
 const Comparacion = () => {
@@ -54,13 +53,20 @@ LIMIT 1
     });
     setAbstract(response.data.results.bindings[0]?.info.value);
   };
-  const handleClickLista = (fechaNac) => {
+
+  const handleClickLista = async (fechaNac) => {
     // query con nombre
     setListaJugadores([]);
-    fetch(raw)
-      .then((r) => r.text())
-      .then(async (text) => {
-        const request = `${text}
+    const request = `
+    PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>
+    PREFIX xsd: <http://www.w3.org/2001/XMLSchema#>
+    PREFIX fo: <http://purl.org/ontology/fo/>
+    PREFIX foo: <http://filmontology.org/ontology/1.0/>
+    prefix rdfs: <http://www.w3.org/2000/01/rdf-schema#>
+    prefix owl: <http://www.w3.org/2002/07/owl#>
+    prefix football: <http://football.org/football#>
+    prefix fifa: <http://football.org/fifa#>
+
     SELECT ?jugador ?nombre ?foto ?pais ?temporada ?valoracion ?altura ?pierna ?club ?nombreClub ?bandera ?linkTransfermarkt
     WHERE {
       ?nombreProp  rdfs:subPropertyOf football:nombre .
@@ -70,7 +76,7 @@ LIMIT 1
       ?jugador ?tieneNac ?pais .
     
       ?tieneFecha  rdfs:subPropertyOf football:fechaNac .
-          ?jugador ?tieneFecha "1987-06-24"^^xsd:date .
+      ?jugador ?tieneFecha "${fechaNac}"^^xsd:date .
       
       OPTIONAL  {
         #Transfermarkt
@@ -81,14 +87,9 @@ LIMIT 1
         ?piernaHabil  rdfs:subPropertyOf football:pierna .
         ?jugador ?piernaHabil ?pierna .
 
-            ?tieneFecha  rdfs:subPropertyOf football:fechaNac .
-            ?jugador ?tieneFecha "1987-06-24"^^xsd:date .
-            
         ?juegaPara  rdfs:subPropertyOf football:juegaPara .
         ?jugador ?juegaPara ?club .
         
-            ?club ?nombreProp ?nombreClub.
-            
         ?urlTransf rdfs:subPropertyOf football:transfermarktURL .
         ?jugador ?urlTransf ?linkTransfermarkt .
     
@@ -99,7 +100,7 @@ LIMIT 1
         ?jugador ?versionJuego ?stats .
     
         ?tieneFoto rdfs:subPropertyOf football:foto .
-            ?stats ?tieneFoto ?foto .
+        ?jugador ?tieneFoto ?foto .
     
         ?tieneVal rdfs:subPropertyOf football:valoracion .
         ?stats ?tieneVal ?valoracion .
@@ -108,7 +109,7 @@ LIMIT 1
         ?stats ?anio ?temporada .
     
       }
-          filter(regex(?nombre, "messi", "i"))
+      filter(regex(?nombre, "${nombre}", "i"))
     }
     ORDER BY DESC(?temporada)
     LIMIT 10
@@ -116,6 +117,7 @@ LIMIT 1
     const response = await ApiService.get(API_ROUTES.EXAMPLE, {
       query: request,
     });
+    console.log('respuesta ', response.data.results.bindings);
     await getDBpediaInfo(nombre, fechaNac);
     const lista = [];
     response.data.results.bindings.forEach(async (elem) => {
@@ -144,15 +146,21 @@ LIMIT 1
       }
       lista.push(nuevo);
     });
-        setListaValoracion(lista.sort());
-      });
+    setListaValoracion(lista.sort((a, b) => a - b).reverse());
   };
-  const handleSearch = () => {
+
+  const handleSearch = async () => {
     // llamada a la api
-    fetch(raw)
-      .then((r) => r.text())
-      .then(async (text) => {
-        const request = `${text}
+    const request = `
+    PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>
+    PREFIX xsd: <http://www.w3.org/2001/XMLSchema#>
+    PREFIX fo: <http://purl.org/ontology/fo/>
+    PREFIX foo: <http://filmontology.org/ontology/1.0/>
+    prefix rdfs: <http://www.w3.org/2000/01/rdf-schema#>
+    prefix owl: <http://www.w3.org/2002/07/owl#>
+    prefix football: <http://football.org/football#>
+    prefix fifa: <http://football.org/fifa#>
+
     SELECT ?jugador ?nombre ?foto ?pais ?temporada ?fechaNac
     WHERE {
       ?nombreProp  rdfs:subPropertyOf football:nombre .
@@ -168,12 +176,11 @@ LIMIT 1
       ?jugador ?versionJuego ?stats .
     
       ?tieneFoto rdfs:subPropertyOf football:foto .
-          ?stats ?tieneFoto ?foto .
+      ?jugador ?tieneFoto ?foto .
     
       ?anio rdfs:subPropertyOf football:temporada .
       ?stats ?anio ?temporada .
       
-          
       filter(regex(?nombre, "${nombre}", "i"))
     }
     LIMIT 10
@@ -182,6 +189,7 @@ LIMIT 1
       query: request,
     });
     const lista = [];
+    if (response.data.results.bindings.length > 0) {
       response.data.results.bindings.forEach((elem) => {
         const nuevo = {
           nombre: elem.nombre.value,
@@ -194,39 +202,18 @@ LIMIT 1
         } else { lista.push(nuevo); }
       });
       setListaJugadores(lista);
-      });
+    }
   };
   return (
     <>
-
       <NavBar />
       <Container>
         <h1>
           JUGADORES
         </h1>
-        <p>{abstract}</p>
-      </Container>
-      <Divider />
-      <div className={styles.content}>
-        <div className={styles.column}>
-          <div className={styles.search}>
-            <TextField
-              label="Nombre del jugador"
-              onChange={handleChange}
-              value={nombre}
-            />
-            <IconButton type="submit" className={styles.icon} aria-label="search" onClick={handleSearch}>
-              <SearchIcon />
-            </IconButton>
-          </div>
-          <div className={styles.lista}>
-            <ListaJugadores lista={listaJugadores} handleClickLista={handleClickLista} />
-          </div>
-        </div>
-        <div className={styles.chart}>
-          <Grafica data={listaValoracion} dataKey1="temporada" dataKey2="valoracion" />
-        </div>
-        <div className={styles.ficha}>
+        <Grid container spacing={2}>
+          <Container item xs={4}>
+            <Paper className={styles.ficha}>
               <Typography>
                 FICHA DEL JUGADOR
               </Typography>
@@ -268,6 +255,34 @@ LIMIT 1
                 {abstract}
               </Typography> */}
 
+            </Paper>
+          </Container>
+          <Container item xs={8}>
+            <Paper className={styles.ficha}>
+              <p>{abstract}</p>
+            </Paper>
+          </Container>
+        </Grid>
+      </Container>
+      <Divider />
+      <div className={styles.content}>
+        <div className={styles.column}>
+          <div className={styles.search}>
+            <TextField
+              label="Nombre del jugador"
+              onChange={handleChange}
+              value={nombre}
+            />
+            <IconButton type="submit" className={styles.icon} aria-label="search" onClick={handleSearch}>
+              <SearchIcon />
+            </IconButton>
+          </div>
+          <div className={styles.lista}>
+            <ListaJugadores lista={listaJugadores} handleClickLista={handleClickLista} />
+          </div>
+        </div>
+        <div className={styles.chart}>
+          <Grafica data={listaValoracion} dataKey1="temporada" dataKey2="valoracion" />
         </div>
       </div>
       <Footer />

src/pages/comparacion/comparacion.module.scss

@@ -4,8 +4,6 @@
     display: flex;
 }
 .ficha {
-    width: 400px;
-    height: 600px;
     display: flex;
     flex-direction: column;
 }