Agregados headers a las entitylist

src/components/EntityList.jsx

@@ -2,6 +2,14 @@ import React from "react";
 import {Link} from "react-router-dom";
 import "./EntityList.scss"
 
+const EntityHeader = (props) => {
+  return (
+    <div class='entity-header'>
+      {props.title}
+    </div>
+  )
+}
+
 const EntityPlaceholder = (props) => {
   return (
     <li className={'entity-item ' + (props.cover ? '' : 'pulsating')}>
@@ -50,10 +58,16 @@ export const EntityList = (props) => {
   if(props.placeholder){
     entities = [];
     for(const i of Array(props.size).keys()){
-      entities.push(<EntityPlaceholder key={i} cover={props.cover}/>)
+      entities.push(<EntityPlaceholder key={i} cover={props.cover}/>);
     }
   }else{
-    entities = props.list.items.map(item => <EntityItem item={item}/>);
+    let mapped = props.list.map(group => {
+      let header = group.header ? <EntityHeader title={group.header}/> : null;
+      let items = group.items.map(item => <EntityItem item={item}/>);
+      items.unshift(header);
+      return items;
+    });
+    entities = [].concat.apply([], mapped);
   }
 
   const className = props.grid ? "grid" : "column";

src/components/EntityList.scss

@@ -1,5 +1,11 @@
 // Base
 .entity-list {
+  .entity-header{
+    font-size: 1.2em;
+    font-weight: 500;
+    border-bottom: solid var(--line-width) var(--accent);
+  }
+
   .entity-item {
     a {
       text-decoration: none;
@@ -29,29 +35,31 @@
 
 // Column mode
 .entity-list.column {
-
+  .entity-item{
-  .entity-item .entity-container {
+    margin-bottom: 1em;
-    display: flex;
+    .entity-container {
-    justify-content: space-between;
-
-    a {
       display: flex;
-      flex-direction: row;
+      justify-content: space-between;
-      align-items: center;
 
-      padding: 1em 1em;
+      a {
-
-      flex-grow: 2;
-      .body {
         display: flex;
-        flex-direction: column;
+        flex-direction: row;
-      }
+        align-items: center;
-    }
 
-    .widget {
+        padding: 1em 1em;
-      display: flex;
+
-      align-items: center;
+        flex-grow: 2;
-      padding-right: 1em;
+        .body {
+          display: flex;
+          flex-direction: column;
+        }
+      }
+
+      .widget {
+        display: flex;
+        align-items: center;
+        padding-right: 1em;
+      }
     }
   }
 }

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;
+  const medias = props.medias ? props.medias: 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>
 
+  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
+    mediasComponent = <EntityList list={list}/>
-    }
-    recordingsComponent = <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}/>
     }