EntityList lee una lista que tiene items

esto es para agregar mas metadata, como por ejemplo, poner headers y
esas cosas
This commit is contained in:
Daniel Cortes
2020-06-16 22:25:07 -04:00
parent d1ddc5d1ff
commit f08c108eee
5 changed files with 57 additions and 39 deletions

View File

@@ -19,21 +19,22 @@ const EntityPlaceholder = (props) => {
} }
const EntityItem = (props) => { const EntityItem = (props) => {
const item = props.item;
return ( return (
<li className={'entity-item ' + (props.selected ? 'selected' : '')} id={props.id}> <li className={'entity-item ' + (item.selected ? 'selected' : '')} id={item.id}>
<div class="entity-container"> <div class="entity-container">
<Link to={props.link}> <Link to={item.link}>
{props.cover && {item.cover &&
<div className='cover'> <div className='cover'>
{props.cover} {item.cover}
</div> </div>
} }
<div className='body'> <div className='body'>
<span class='title'>{props.title}</span> <span class='title'>{item.title}</span>
<span className='subtitle'>{props.subtitle}</span> <span className='subtitle'>{item.subtitle}</span>
</div> </div>
</Link> </Link>
{ props.widget && { item.widget &&
<div class="widget"> <div class="widget">
<button class='button'>Agregar a mi lista</button> <button class='button'>Agregar a mi lista</button>
</div> </div>
@@ -52,9 +53,7 @@ export const EntityList = (props) => {
entities.push(<EntityPlaceholder key={i} cover={props.cover}/>) entities.push(<EntityPlaceholder key={i} cover={props.cover}/>)
} }
}else{ }else{
entities = props.items.map(item => <EntityItem id={item.id} cover={item.cover} link={item.link} entities = props.list.items.map(item => <EntityItem item={item}/>);
title={item.title} subtitle={item.subtitle}
selected={item.selected} widget={item.widget}/>);
} }
const className = props.grid ? "grid" : "column"; const className = props.grid ? "grid" : "column";

View File

@@ -26,7 +26,10 @@ const Discs = (props) => {
'title': disc.title, 'title': disc.title,
'subtitle': disc.artist.name 'subtitle': disc.artist.name
})); }));
discsComponent = <EntityList items={items} grid={true}/> const list = {
'items': items
}
discsComponent = <EntityList list={list} grid={true}/>
}else{ }else{
discsComponent = <p>El artista no tiene discos</p> discsComponent = <p>El artista no tiene discos</p>
} }

View File

@@ -31,7 +31,10 @@ const Versions = (props) => {
</Fragment> </Fragment>
})); }));
versionsComponent = <EntityList items={items}/> const list = {
'items': items
}
versionsComponent = <EntityList list={list}/>
} }
let paginateContent; let paginateContent;

View File

@@ -26,7 +26,10 @@ const Recordings = (props) => {
'widget': <button className='button'>Agregar a mi lista</button> 'widget': <button className='button'>Agregar a mi lista</button>
})); }));
recordingsComponent = <EntityList items={items}/> const list = {
'items': items
}
recordingsComponent = <EntityList list={list}/>
} }
return ( return (

View File

@@ -49,7 +49,11 @@ const SearchSongs = (props) => {
'subtitle': song.artist.name 'subtitle': song.artist.name
}; };
}); });
songsComponent = <EntityList items={items}/> const list = {
'items': items
}
songsComponent = <EntityList list={list}/>
} }
let paginateComponent; let paginateComponent;
@@ -107,7 +111,10 @@ const SearchDiscs = (props) => {
'title': disc.title, 'title': disc.title,
'subtitle': disc.artist.name 'subtitle': disc.artist.name
})); }));
discsComponent = <EntityList items={items}/> const list = {
'items': items
}
discsComponent = <EntityList list={list}/>
} }
let paginateComponent; let paginateComponent;
@@ -165,7 +172,10 @@ const SearchArtists = (props) => {
'title': artist.name, 'title': artist.name,
'subtitle': [artist.type, artist.country].filter(Boolean).join(' - ') 'subtitle': [artist.type, artist.country].filter(Boolean).join(' - ')
})); }));
artistsContent = <EntityList items={items}/> const list = {
'items': items
}
artistsContent = <EntityList list={list}/>
} }
let paginateContent; let paginateContent;