From f08c108eeebb5ea5433e97dfffc48f618509f60c Mon Sep 17 00:00:00 2001
From: Daniel Cortes <daniel.cortes.p159@gmail.com>
Date: Tue, 16 Jun 2020 22:25:07 -0400
Subject: [PATCH] EntityList lee una lista que tiene items

esto es para agregar mas metadata, como por ejemplo, poner headers y
esas cosas
---
 src/components/EntityList.jsx | 65 +++++++++++++++++------------------
 src/views/Artist.jsx          |  5 ++-
 src/views/Disc.jsx            |  5 ++-
 src/views/Release.jsx         |  5 ++-
 src/views/Search.jsx          | 16 +++++++--
 5 files changed, 57 insertions(+), 39 deletions(-)

diff --git a/src/components/EntityList.jsx b/src/components/EntityList.jsx
index 4980121..0aee37b 100644
--- a/src/components/EntityList.jsx
+++ b/src/components/EntityList.jsx
@@ -4,42 +4,43 @@ import "./EntityList.scss"
 
 const EntityPlaceholder = (props) => {
   return (
-      <li className={'entity-item ' + (props.cover ? '' : 'pulsating')}>
-        <div class="entity-container">
-          <Link to={props.link}>
-            {props.cover && <div className='cover pulsating'/>}
-            <div className='body'>
-              <span class='title'>&nbsp;</span>
-              <span className='subtitle'>&nbsp;</span>
-            </div>
-          </Link>
-        </div>
-      </li>
+    <li className={'entity-item ' + (props.cover ? '' : 'pulsating')}>
+      <div class="entity-container">
+        <Link to={props.link}>
+          {props.cover && <div className='cover pulsating'/>}
+          <div className='body'>
+            <span class='title'>&nbsp;</span>
+            <span className='subtitle'>&nbsp;</span>
+          </div>
+        </Link>
+      </div>
+    </li>
   )
 }
 
 const EntityItem = (props) => {
+  const item = props.item;
   return (
-      <li className={'entity-item ' + (props.selected ? 'selected' : '')} id={props.id}>
-        <div class="entity-container">
-          <Link to={props.link}>
-            {props.cover &&
-              <div className='cover'>
-                {props.cover}
-              </div>
-            }
-            <div className='body'>
-              <span class='title'>{props.title}</span>
-              <span className='subtitle'>{props.subtitle}</span>
-            </div>
-          </Link>
-          { props.widget &&
-            <div class="widget">
-              <button class='button'>Agregar a mi lista</button>
+    <li className={'entity-item ' + (item.selected ? 'selected' : '')} id={item.id}>
+      <div class="entity-container">
+        <Link to={item.link}>
+          {item.cover &&
+            <div className='cover'>
+              {item.cover}
             </div>
           }
-        </div>
-      </li>
+          <div className='body'>
+            <span class='title'>{item.title}</span>
+            <span className='subtitle'>{item.subtitle}</span>
+          </div>
+        </Link>
+        { item.widget &&
+          <div class="widget">
+            <button class='button'>Agregar a mi lista</button>
+          </div>
+        }
+      </div>
+    </li>
   )
 }
 
@@ -52,10 +53,8 @@ export const EntityList = (props) => {
       entities.push(<EntityPlaceholder key={i} cover={props.cover}/>)
     }
   }else{
-    entities = props.items.map(item => <EntityItem id={item.id} cover={item.cover} link={item.link}
-                                                   title={item.title} subtitle={item.subtitle}
-                                                   selected={item.selected} widget={item.widget}/>);
- }
+    entities = props.list.items.map(item => <EntityItem item={item}/>);
+  }
 
   const className = props.grid ? "grid" : "column";
   return (
diff --git a/src/views/Artist.jsx b/src/views/Artist.jsx
index 6928b38..3720bd1 100644
--- a/src/views/Artist.jsx
+++ b/src/views/Artist.jsx
@@ -26,7 +26,10 @@ const Discs = (props) => {
         'title': disc.title,
         'subtitle': disc.artist.name
       }));
-      discsComponent = <EntityList items={items} grid={true}/>
+      const list = {
+        'items': items
+      }
+      discsComponent = <EntityList list={list} grid={true}/>
     }else{
       discsComponent = <p>El artista no tiene discos</p>
     }
diff --git a/src/views/Disc.jsx b/src/views/Disc.jsx
index 641d3b2..1b7d234 100644
--- a/src/views/Disc.jsx
+++ b/src/views/Disc.jsx
@@ -31,7 +31,10 @@ const Versions = (props) => {
                    </Fragment>
 
     }));
-    versionsComponent = <EntityList items={items}/>
+    const list = {
+      'items': items
+    }
+    versionsComponent = <EntityList list={list}/>
   }
 
   let paginateContent;
diff --git a/src/views/Release.jsx b/src/views/Release.jsx
index 0bce784..caba231 100644
--- a/src/views/Release.jsx
+++ b/src/views/Release.jsx
@@ -26,7 +26,10 @@ const Recordings = (props) => {
       'widget': <button className='button'>Agregar a mi lista</button>
 
     }));
-    recordingsComponent = <EntityList items={items}/>
+    const list = {
+      'items': items
+    }
+    recordingsComponent = <EntityList list={list}/>
   }
 
   return (
diff --git a/src/views/Search.jsx b/src/views/Search.jsx
index 47be901..0e72180 100644
--- a/src/views/Search.jsx
+++ b/src/views/Search.jsx
@@ -49,7 +49,11 @@ const SearchSongs = (props) => {
             'subtitle': song.artist.name
           };
         });
-        songsComponent = <EntityList items={items}/>
+        const list = {
+          'items': items
+        }
+        songsComponent = <EntityList list={list}/>
+
     }
 
     let paginateComponent;
@@ -107,7 +111,10 @@ const SearchDiscs = (props) => {
           'title': disc.title,
           'subtitle': disc.artist.name
         }));
-        discsComponent = <EntityList items={items}/>
+        const list = {
+          'items': items
+        }
+        discsComponent = <EntityList list={list}/>
     }
 
     let paginateComponent;
@@ -165,7 +172,10 @@ const SearchArtists = (props) => {
           'title': artist.name,
           'subtitle': [artist.type, artist.country].filter(Boolean).join(' - ')
         }));
-        artistsContent = <EntityList items={items}/>
+        const list = {
+          'items': items
+        }
+        artistsContent = <EntityList list={list}/>
     }
 
     let paginateContent;