EntityList en pagina de artista

src/components/Artist.jsx

@@ -1,7 +1,8 @@
-import React, {useEffect, useState} from 'react'
+import React, {Fragment, useEffect, useState} from 'react'
 import {getArtist, getArtistDiscs} from "../services/entity_service";
-import {CoverWithCaption} from './CoverArt';
+import {CoverArt} from './CoverArt';
 import {Paginate} from "./Paginate";
+import {EntityList} from "./EntityList";
 import queryString from "query-string";
 
 
@@ -13,30 +14,15 @@ const Discs = (props) => {
         props.onPageChanged(page);
     }
 
-    const handleClick = (disc) => (evt) => {
+    let discsComponent = <Fragment/>;
-        evt.preventDefault();
-        props.navigateToDisc(disc);
-    }
-
-    let discContent;
     if (discs) {
-        discContent = (
+        const items = discs.map((disc) => ({
-            <ul className="discs-list">
+          'cover': <CoverArt disc={disc}/>,
-                {discs.map((disc, index) => {
+          'link': `/disc/${disc.id}`,
-                    return (
+          'title': disc.title,
-                        <div key={index} className='cover-container' onClick={handleClick(disc)}>
+          'subtitle': disc.artist.name
-                            <CoverWithCaption disc={disc} alt={`Cover art del disco ${disc.title}`} caption={disc.title}/>
+        }));
-                        </div>
+        discsComponent = <EntityList items={items} grid={true}/>
-                    )
-                })}
-            </ul>
-        );
-    } else {
-        discContent = (
-            <ul className="discs-list">
-                {[...Array(16)].map((p, index) => (<div key={index} className='cover-container pulsating'/>))}
-            </ul>
-        );
     }
 
     let paginateContent;
@@ -45,13 +31,15 @@ const Discs = (props) => {
         const currentPage = paginate.current_page;
         const pageLimit = paginate.per_page;
 
-        paginateContent = <Paginate totalRecords={total} pageLimit={pageLimit} currentPage={currentPage} pageNeighbours={2} onPageChanged={handlePageChanged} makeLink={props.makeLink}/>
+        paginateContent = <Paginate totalRecords={total} pageLimit={pageLimit}
+                                    currentPage={currentPage} pageNeighbours={2}
+                                    onPageChanged={handlePageChanged} makeLink={props.makeLink}/>
     }
 
     return (
         <div className='discs'>
             <h2>Discos</h2>
-            {discContent}
+            {discsComponent}
             {paginateContent}
         </div>
     )