diff --git a/src/components/Artist.jsx b/src/components/Artist.jsx index 982328a..ab2b516 100644 --- a/src/components/Artist.jsx +++ b/src/components/Artist.jsx @@ -25,7 +25,7 @@ const Discs = (props) => { {discs.map((disc, index) => { return (
- +
) })} diff --git a/src/components/CoverArt.jsx b/src/components/CoverArt.jsx index 9585773..9ee3ccb 100644 --- a/src/components/CoverArt.jsx +++ b/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 ( - {props.alt} + {props.alt}
) } else { - return {props.alt}/ + return {props.alt}/ } } else { return @@ -26,7 +37,7 @@ export const CoverArt = (props) => { export const CoverWithCaption = (props) => { return(
- +
{props.caption}
); diff --git a/src/components/Disc.jsx b/src/components/Disc.jsx index c31f074..84d75af 100644 --- a/src/components/Disc.jsx +++ b/src/components/Disc.jsx @@ -12,11 +12,11 @@ const Disc = (props) => {

{disc.title}

-

{disc.artist[0].name}

+ {/*

{disc.artist[0].name}

*/}
- +
diff --git a/src/components/Search.jsx b/src/components/Search.jsx index 52efd88..96dfb6c 100644 --- a/src/components/Search.jsx +++ b/src/components/Search.jsx @@ -85,15 +85,16 @@ const SearchSongs = (props) => { const SearchDisc = (props) => { const disc = props.disc; + return (
  • - +
    {disc.title} - {disc.artist[0].name} + {/*{disc.artist[0].name}*/}
  • diff --git a/src/services/entity_service.js b/src/services/entity_service.js index 3e3ea04..4cfa1e2 100644 --- a/src/services/entity_service.js +++ b/src/services/entity_service.js @@ -14,7 +14,6 @@ export async function getArtistDiscs(mbid, page = 1, per_page = 10) { return response.data } - export async function getDisc(mbid) { const url = `${baseUrl}/disc/${mbid}`; const response = await axios.get(url); @@ -32,3 +31,9 @@ export async function getReleaseSongs(mbid, page = 1, per_page = 50) { const response = await axios.get(url); return response.data } + +export async function getDiscCoverArt(mbid) { + const url = `${baseUrl}/disc/${mbid}/coverart`; + const response = await axios.get(url); + return response.data +}