Agregados headers a las entitylist

src/views/Artist.jsx

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

src/views/Disc.jsx

@@ -31,9 +31,9 @@ const Versions = (props) => {
                    </Fragment>
 
     }));
-    const list = {
+    const list = [{
       'items': items
-    }
+    }];
     versionsComponent = <EntityList list={list}/>
   }
 

src/views/Release.jsx

@@ -10,32 +10,34 @@ import {EntityList} from "../components/EntityList";
 
 
 const Recordings = (props) => {
-  const recordings = props.recordings ? props.recordings : null;
-
-  let recordingsComponent = <EntityList placeholder={true} size={25}/>;
-  if(recordings) {
-    const items = recordings.map((recording) => ({
-      'id': recording.id,
-      'link': props.makeLink(recording.id),
-      'title': recording.title,
-      'subtitle': (<Fragment>
-                    {recording.length && <div>[{toDuration(recording.length)}]</div>}
-                    {recording.disambiguation && <div>{capitalize(recording.disambiguation)}</div>}
-                  </Fragment>),
-      'selected': props.selected === recording.id,
-      'widget': <button className='button'>Agregar a mi lista</button>
+  const medias = props.medias ? props.medias: null;
 
+  let mediasComponent = <EntityList placeholder={true} size={25}/>;
+  if(medias) {
+    const list= medias.map((media) => ({
+      'header': media.format + ' ' + media.position,
+      'items': media.recordings.map((recording) => ({
+        'id': recording.id,
+        'link': props.makeLink(recording.id),
+        'title': recording.title,
+        'subtitle': (<Fragment>
+                      {recording.length &&
+                        <div>[{toDuration(recording.length)}]</div>}
+                      {recording.disambiguation &&
+                        <div>{capitalize(recording.disambiguation)}</div>}
+                    </Fragment>),
+        'selected': props.selected === recording.id,
+        'widget': <button className='button'>Agregar a mi lista</button>
+      }))
     }));
-    const list = {
-      'items': items
-    }
-    recordingsComponent = <EntityList list={list}/>
+
+    mediasComponent = <EntityList list={list}/>
   }
 
   return (
     <Fragment>
       <h2>Canciones</h2>
-      {recordingsComponent}
+      {mediasComponent}
     </Fragment>
   )
 }
@@ -61,14 +63,14 @@ export const ReleaseView = (props) => {
   const mbid = props.match.params.mbid;
 
   const [release, setRelease] = useState(null);
-  const [recordings, setRecordings] = useState(null);
+  const [medias, setMedias] = useState(null);
   const currentRecording = props.location.hash ? props.location.hash.slice(1) : null
 
   useEffect(() => {
     if (mbid) {
       getRelease(mbid).then((result) => setRelease(result));
       getReleaseSongs(mbid).then((result) => {
-        setRecordings(result.medias[0].recordings);
+        setMedias(result.medias);
       });
     }
   }, [mbid])
@@ -85,7 +87,7 @@ export const ReleaseView = (props) => {
     <Fragment>
       <Release release={release}/>
       {release &&
-        <Recordings recordings={recordings}
+        <Recordings medias={medias}
                     selected={currentRecording}
                     makeLink={makeLink}
                     navigateToRecording={handleNavigateToRecording}/>

src/views/Search.jsx

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