Utilizando entity list en search

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;