Utilizando entity list en search

src/components/EntityList.jsx

@@ -1,19 +1,14 @@
-import React, {Fragment, useEffect, useState} from "react";
+import React from "react";
 import {Link} from "react-router-dom";
-
-import {CoverArt} from "./CoverArt";
 import "./EntityList.scss"
 
-const EntityItem = (props) => {
+const Entity = (props) => {
-  const disc = {
-    'id': '061f572e-7660-3c6b-b4cd-cf66d46da93c',
-  }
   return (
       <li className='entity'>
           <Link to={props.link}>
             {props.cover &&
               <div className='cover'>
-                <CoverArt disc={disc} alt='Testing :3'/>
+                {props.cover}
               </div>
             }
             <div className='body'>
@@ -26,18 +21,13 @@ const EntityItem = (props) => {
 }
 
 export const EntityList = (props) => {
+  const entities = props.items.map(item => <Entity cover={item.cover} link={item.link}
+                                                   title={item.title} subtitle={item.subtitle}/>);
+
+  const className = props.grid ? "grid" : "column";
   return (
-    <ul className="entity_list grid">
+    <ul className={'entity_list ' + className}>
-      <EntityItem link='a' title='Freaking long title with too many words' subtitle='Subtitle' cover={true}/>
+      {entities}
-      <EntityItem link='a' title='Title' subtitle='Subtitle' cover={true}/>
-      <EntityItem link='a' title='Title' subtitle='Subtitle' cover={true}/>
-      <EntityItem link='a' title='Title' subtitle='Subtitle' cover={true}/>
-      <EntityItem link='a' title='Title' subtitle='Subtitle' cover={true}/>
-      <EntityItem link='a' title='Title' subtitle='Subtitle' cover={true}/>
-      <EntityItem link='a' title='Title' subtitle='Subtitle' cover={true}/>
-      <EntityItem link='a' title='Title' subtitle='Subtitle' cover={true}/>
-      <EntityItem link='a' title='Title' subtitle='Subtitle' cover={true}/>
-      <EntityItem link='a' title='Title' subtitle='Subtitle' cover={true}/>
     </ul>
   )
 }

src/components/EntityList.scss

@@ -18,6 +18,9 @@
         }
         .subtitle {
           font-size: .8em;
+          &:empty:before {
+            content: "\200b";
+          }
         }
       }
     }
@@ -33,7 +36,7 @@
     display: flex;
     flex-direction: row;
     align-items: center;
-    padding: 1em 2em;
+    padding: 1em 1em;
     .body {
       display: flex;
       flex-direction: column;

src/components/Search.jsx

@@ -5,32 +5,9 @@ import {searchArtist, searchDisc, searchSong} from "../services/search_service";
 import {SearchBar} from "./SearchBar";
 import {Paginate} from "./Paginate";
 import {CoverArt} from "./CoverArt";
-import {Link} from "react-router-dom";
+import {EntityList} from "./EntityList";
 import {Tab, TabList, TabPanel, Tabs} from "react-tabs";
 
-
-const SearchPlaceholder = (props) => {
-    return (
-        <Fragment>
-            {[...Array(10)].map((e, i) => <li key={i} className={props.className + ' pulsating'}/>)}
-        </Fragment>
-    )
-}
-
-const SearchSong = (props) => {
-    const song = props.song;
-    return (
-        <li className='song'>
-            <Link to={`/song/${song.id}`}>
-                <div className='description'>
-                    <span>{song.title}</span>
-                    <span className='small'>{song.artist.name}</span>
-                </div>
-            </Link>
-        </li>
-    )
-}
-
 const SearchSongs = (props) => {
     const [songs, setSongs] = useState(null);
     const [paginate, setPaginate] = useState(null);
@@ -59,9 +36,18 @@ const SearchSongs = (props) => {
         })
     };
 
-    let songsComponent = <SearchPlaceholder className='song'/>;
+
+    let songsComponent = <Fragment/>;
     if (songs) {
-        songsComponent = songs.map((song) => <SearchSong key={song.id} song={song}/>);
+        const items = songs.map((song) => {
+          return {
+            'cover': null,
+            'link': `/song/${song.id}`,
+            'title': song.title,
+            'subtitle': song.artist.name
+          };
+        });
+        songsComponent = <EntityList items={items}/>
     }
 
     let paginateComponent;
@@ -83,24 +69,6 @@ const SearchSongs = (props) => {
     )
 }
 
-const SearchDisc = (props) => {
-    const disc = props.disc;
-
-    return (
-        <li className='disc'>
-            <Link to={`/disc/${disc.id}`}>
-                <div className={'cover-container'}>
-                    <CoverArt disc={disc} alt={`Cover del disco: ${disc.title}`}/>
-                </div>
-                <div className='description'>
-                    <span>{disc.title}</span>
-                    {/*<span className='small'>{disc.artist[0].name}</span>*/}
-                </div>
-            </Link>
-        </li>
-    )
-}
-
 const SearchDiscs = (props) => {
     const [discs, setDiscs] = useState(null);
     const [paginate, setPaginate] = useState(null);
@@ -129,9 +97,15 @@ const SearchDiscs = (props) => {
         })
     };
 
-    let discsComponent = <SearchPlaceholder className='disc'/>;
+    let discsComponent = <Fragment/>;
     if (discs) {
-        discsComponent = discs.map((disc) => <SearchDisc key={disc.id} disc={disc}/>);
+        const items = discs.map((disc) => ({
+          'cover': <CoverArt disc={disc}/>,
+          'link': `/disc/${disc.id}`,
+          'title': disc.title,
+          'subtitle': disc.artist.name
+        }));
+        discsComponent = <EntityList items={items}/>
     }
 
     let paginateComponent;
@@ -153,20 +127,6 @@ const SearchDiscs = (props) => {
     )
 }
 
-const SearchArtist = (props) => {
-    const artist = props.artist;
-    return (
-        <li className='artist'>
-            <Link to={`/artist/${artist.id}`}>
-                <span className='description'>
-                    <span>{artist.name}</span>
-                    <span className='small'>{[artist.type, artist.country].filter(Boolean).join(' - ')}</span>
-                </span>
-            </Link>
-        </li>
-    )
-}
-
 const SearchArtists = (props) => {
     const [artists, setArtist] = useState(null);
     const [paginate, setPaginate] = useState(null);
@@ -195,9 +155,15 @@ const SearchArtists = (props) => {
         })
     };
 
-    let artistsContent = <SearchPlaceholder className='artist'/>;
+    let artistsContent = <Fragment/>;
     if (artists) {
-        artistsContent = artists.map((artist) => <SearchArtist key={artist.id} artist={artist}/>);
+        const items = artists.map((artist) => ({
+          'cover': null,
+          'link': `/artist/${artist.id}`,
+          'title': artist.name,
+          'subtitle': [artist.type, artist.country].filter(Boolean).join(' - ')
+        }));
+        artistsContent = <EntityList items={items}/>
     }
 
     let paginateContent;