Cambios en el servidor provocaron cambios en las vistas

Ya no entrega los coverart directamente, ni tampoco los artistas de los
discos, los cambios son temporales y para provar como funciona todo

src/components/Artist.jsx

@@ -25,7 +25,7 @@ const Discs = (props) => {
                 {discs.map((disc, index) => {
                     return (
                         <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}/>
+                            <CoverWithCaption disc={disc} alt={`Cover art del disco ${disc.title}`} caption={disc.title}/>
                         </div>
                     )
                 })}

src/components/CoverArt.jsx

@@ -1,21 +1,32 @@
-import React, {Fragment, useState} from "react";
+import React, {Fragment, useEffect, useState} from "react";
 import {ReactComponent as DiscSVG} from "../svg/disc.svg";
+import {getDiscCoverArt} from "../services/entity_service";
 
 export const CoverArt = (props) => {
+    const disc = props.disc
     const [loading, setLoading] = useState(true);
+    const [coverArt, setCoverArt] = useState(null)
+
+    useEffect(() => {
+        if(disc){
+            getDiscCoverArt(disc.id).then((result) => {
+                setCoverArt(result)
+            })
+        }
+    }, [disc])
 
     const handleLoad = () => setLoading(false)
 
-    if (props.cover_art) {
+    if (coverArt) {
         if (loading) {
             return (
                 <Fragment>
-                    <img src={props.cover_art.image} className={'coverart loading'} alt={props.alt} onLoad={handleLoad}/>
+                    <img src={coverArt.image} className={'coverart loading'} alt={props.alt} onLoad={handleLoad}/>
                     <div className={'coverart pulsating'}/>
                 </Fragment>
             )
         } else {
-            return <img src={props.cover_art.image} className={'coverart'} alt={props.alt}/>
+            return <img src={coverArt.image} className={'coverart'} alt={props.alt}/>
         }
     } else {
         return <DiscSVG className='coverart'/>
@@ -26,7 +37,7 @@ export const CoverArt = (props) => {
 export const CoverWithCaption = (props) => {
    return(
        <figure className='cover-caption'>
-           <CoverArt cover_art={props.cover_art} alt={props.alt}/>
+           <CoverArt disc={props.disc} alt={props.alt}/>
            <figcaption>{props.caption}</figcaption>
        </figure>
    );

src/components/Disc.jsx

@@ -12,11 +12,11 @@ const Disc = (props) => {
                 <div className='space-between'>
                     <div className='title'>
                         <h1>{disc.title}</h1>
-                        <h4>{disc.artist[0].name}</h4>
+                        {/*<h4>{disc.artist[0].name}</h4>*/}
                         <button className='button'>Agregar a mi Lista</button>
                     </div>
                     <div className='cover-container'>
-                        <CoverArt cover_art={disc.cover_art}/>
+                        <CoverArt disc={disc}/>
                     </div>
                 </div>
             </div>

src/components/Search.jsx

@@ -85,15 +85,16 @@ const SearchSongs = (props) => {
 
 const SearchDisc = (props) => {
     const disc = props.disc;
+
     return (
         <li className='disc'>
             <Link to={`/disc/${disc.id}`}>
                 <div className={'cover-container'}>
-                    <CoverArt cover_art={disc.cover_art} alt={`Cover del disco: ${disc.title}`}/>
+                    <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>
+                    {/*<span className='small'>{disc.artist[0].name}</span>*/}
                 </div>
             </Link>
         </li>