mas avances

src/common/lista/lista.jsx

+import React from 'react';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemText from '@mui/material/ListItemText';
+import ListItemAvatar from '@mui/material/ListItemAvatar';
+import Avatar from '@mui/material/Avatar';
+import { array, func } from 'prop-types';
+import ImageIcon from '@mui/icons-material/Image';
+import styles from './lista.module.scss';
+
+const ListaJugadores = ({ lista, handleClickLista }) => (
+  <div className={styles.lista}>
+    <List>
+      {lista.map((elem) => (
+        <ListItem
+          className={styles.listElem}
+          key={elem.nombre}
+          onClick={() => handleClickLista(elem.fechaNac)}
+        >
+          <ListItemAvatar>
+            <Avatar sx={{ width: '100px', height: '100px' }}>
+              {elem.foto ? <img src={elem.foto} alt="" /> : <ImageIcon />}
+            </Avatar>
+          </ListItemAvatar>
+          <ListItemText primary={elem.nombre} secondary={elem.pais} />
+        </ListItem>
+      ))}
+    </List>
+  </div>
+);
+
+ListaJugadores.propTypes = {
+  lista: array,
+  handleClickLista: func.isRequired,
+
+};
+ListaJugadores.defaultProps = {
+  lista: [],
+};
+
+export { ListaJugadores };

src/common/lista/lista.module.scss

+.lista {
+    width: 500px;
+    height: 500px;
+}
+.listElem {
+    margin-top: 3px;
+    cursor: pointer;
+}

src/consultas/consultas.txt

+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://www.football.org/ontologies/2021/football#>
+prefix fifa: <http://www.football.org/ontologies/2021/fifa#>

src/pages/comparacion/comparacion.jsx

@@ -6,6 +6,8 @@ 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 data = [
@@ -55,19 +57,104 @@ const data = [
 
 const Comparacion = () => {
   const [nombre, setNombre] = useState('');
+  const [listaJugadores, setListaJugadores] = useState([]);
   const handleChange = (event) => {
     setNombre(event.target.value);
   };
+  const handleClickLista = (fechaNac) => {
+    // query con nombre
+    setListaJugadores([]);
+    fetch(raw)
+      .then((r) => r.text())
+      .then(async (text) => {
+        const request = `${text}
+        SELECT ?jugador ?nombre ?foto ?pais ?temporada ?fechaNac ?valoracion
+        WHERE {
+          ?nombreProp  rdfs:subPropertyOf football:nombre .
+          ?jugador ?nombreProp ?nombre .
+
+          ?tieneNac  rdfs:subPropertyOf football:nacionalidad .
+          ?jugador ?tieneNac ?pais .
+
+          ?tieneFecha  rdfs:subPropertyOf football:fechaNac .
+          ?jugador ?tieneFecha "${fechaNac}"^^xsd:date .
+          
+          OPTIONAL {
+            ?tieneVal rdfs:subPropertyOf football:valoracion .
+            ?stats ?tieneVal ?valoracion .
+            
+          ?versionJuego rdfs:subPropertyOf football:versionJuego .
+                  ?jugador ?versionJuego ?stats .
+                  
+                  ?tieneFoto rdfs:subPropertyOf football:foto .
+                  ?stats ?tieneFoto ?foto .
+                  
+                  ?anio rdfs:subPropertyOf football:temporada .
+                  ?stats ?anio ?temporada .
+          }
+          filter(regex(?nombre, "${nombre}", "i"))
+          
+        }
+        LIMIT 10
+        `;
+        const response = await ApiService.get(API_ROUTES.EXAMPLE, {
+          query: request,
+        });
+        console.log(response.data.results.bindings);
+      });
+  };
   const handleSearch = () => {
     // llamada a la api
-    console.log(nombre);
-  };
-  useEffect(async () => {
-    const body = 'SELECT ?subject ?predicate ?object WHERE { ?subject ?predicate ?object } LIMIT 25';
+    fetch(raw)
+      .then((r) => r.text())
+      .then(async (text) => {
+        const request = `${text}
+        SELECT ?jugador ?nombre ?foto ?pais ?temporada ?fechaNac
+        WHERE {
+          ?nombreProp  rdfs:subPropertyOf football:nombre .
+          ?jugador ?nombreProp ?nombre .
+
+          ?tieneNac  rdfs:subPropertyOf football:nacionalidad .
+          ?jugador ?tieneNac ?pais .
+
+          ?tieneFecha  rdfs:subPropertyOf football:fechaNac .
+          ?jugador ?tieneFecha ?fechaNac .
+          
+          ?versionJuego rdfs:subPropertyOf football:versionJuego .
+          ?jugador ?versionJuego ?stats .
+          
+          ?tieneFoto rdfs:subPropertyOf football:foto .
+          ?stats ?tieneFoto ?foto .
+          
+          ?anio rdfs:subPropertyOf football:temporada .
+          ?stats ?anio ?temporada .
+          
+          
+          filter(regex(?nombre, "${nombre}", "i"))
+        }
+        LIMIT 10
+        `;
         const response = await ApiService.get(API_ROUTES.EXAMPLE, {
-      query: body,
+          query: request,
         });
-    console.log(response);
+        console.log(response.data.results.bindings);
+        const lista = [];
+        response.data.results.bindings.forEach((elem) => {
+          const nuevo = {
+            nombre: elem.nombre.value,
+            foto: elem.foto ? elem.foto.value : undefined,
+            pais: elem.pais.value,
+            fechaNac: elem.fechaNac.value,
+          };
+          // eslint-disable-next-line no-empty
+          if (lista.find((nu) => nu.nombre === nuevo.nombre)) {
+          } else { lista.push(nuevo); }
+        });
+        setListaJugadores(lista);
+      });
+  };
+  useEffect(async () => {
+
   });
   return (
     <>
@@ -79,10 +166,12 @@ const Comparacion = () => {
         <TextField
           label="Nombre del jugador"
           onChange={handleChange}
+          value={nombre}
         />
         <IconButton type="submit" className={styles.icon} aria-label="search" onClick={handleSearch}>
           <SearchIcon />
         </IconButton>
+        <ListaJugadores lista={listaJugadores} handleClickLista={handleClickLista} />
       </center>
       <div className={styles.content}>
         <div className={styles.ficha}>