Navegar al clickear un disco

TODO.md

@@ -1 +1,5 @@
 Transition para cosas a las que hago hover para hacer un efecto mas suave 
+
+Seria bueno generalizar un poco el css~ como por ejemplo en vez de tener la lista de discos que
+solo funciona en en las tabs y la lista de discos que solo funciona en artistas tener la definicion
+de discos en un grid y la definicion de discos en lista.

src/components/Artist.jsx

@@ -13,13 +13,18 @@ const Discs = (props) => {
         props.onPageChanged(page);
     }
 
+    const handleClick = (disc) => (evt) => {
+        evt.preventDefault();
+        props.navigateToDisc(disc);
+    }
+
     let discContent;
     if (discs) {
         discContent = (
             <ul className="discs-list">
                 {discs.map((disc, index) => {
                     return (
-                        <div key={index} className='cover-container'>
+                        <div key={index} className='cover-container' onClick={handleClick(disc)}>
                             <CoverWithCaption cover_art={disc.cover_art} alt={`Cover art del disco ${disc.title}`} caption={disc.title}/>
                         </div>
                     )
@@ -52,7 +57,7 @@ const Discs = (props) => {
     )
 }
 
-export const Artist = (props) => {
+const Artist = (props) => {
     const artist = props.artist;
     if (artist) {
         return (
@@ -111,10 +116,16 @@ export const ArtistView = (props) => {
         props.history.push(makeLink(page));
     }
 
+    const handleNavigateToDisc = (disc) => {
+        console.log(disc);
+        props.history.push(`/disc/${disc.id}`)
+    }
+
+
     return (
         <div className='artist-view'>
             <Artist artist={artist}/>
-            {artist && <Discs discs={discs} paginate={discsPaginate} onPageChanged={handleDiscPageChanged} makeLink={makeLink}/>}
+            {artist && <Discs discs={discs} paginate={discsPaginate} onPageChanged={handleDiscPageChanged} makeLink={makeLink} navigateToDisc={handleNavigateToDisc}/>}
         </div>
     );
 }