72 lines
2.3 KiB
JavaScript
72 lines
2.3 KiB
JavaScript
import React, {useEffect, useState} from 'react'
|
|
import {getArtist, getArtistDiscs} from "../services/entity_service";
|
|
import {CoverWithCaption} from './CoverArt';
|
|
import ReactJson from "react-json-view";
|
|
|
|
export const Discs = (props) => {
|
|
const discs = props.discs ? props.discs.discs : null;
|
|
const paginate = props.discs ? props.discs.paginate : null;
|
|
|
|
if (discs) {
|
|
return (
|
|
<div className='discs'>
|
|
<h2>Discos</h2>
|
|
<ul className={'discs-list'}>
|
|
{discs.map((disc, index) => {
|
|
return (
|
|
<div className='cover-container'>
|
|
<CoverWithCaption key={index} cover_art={disc.cover_art} alt={`Cover art del disco ${disc.title}`} caption={disc.title}/>
|
|
</div>
|
|
)
|
|
})}
|
|
</ul>
|
|
</div>
|
|
)
|
|
} else return <></>
|
|
}
|
|
|
|
export const Artist = (props) => {
|
|
const artist = props.artist;
|
|
if (artist) {
|
|
return (
|
|
<div className='artist'>
|
|
<div className='space-between'>
|
|
<div className='title'>
|
|
<h1>{artist.name}</h1>
|
|
<h4>{[artist.type, artist.country].filter(Boolean).join(' - ')}</h4>
|
|
</div>
|
|
<div>
|
|
<button className='button'>Agregar a mi Lista</button>
|
|
</div>
|
|
</div>
|
|
<ul className='tags'>
|
|
{artist.tags.map((tag, index) => (<li key={index}>{tag.name}</li>))}
|
|
</ul>
|
|
</div>
|
|
)
|
|
} else {
|
|
return <></>
|
|
}
|
|
}
|
|
|
|
export const ArtistView = (props) => {
|
|
const [artist, setArtist] = useState(null);
|
|
const [discs, setDiscs] = useState(null);
|
|
const mbid = props.match.params.mbid;
|
|
|
|
useEffect(() => {
|
|
if (mbid) {
|
|
getArtist(mbid).then((result) => setArtist(result));
|
|
getArtistDiscs(mbid, 15).then((result) => setDiscs(result));
|
|
}
|
|
}, [mbid])
|
|
|
|
return (
|
|
<div className='artist-view'>
|
|
<Artist artist={artist}/>
|
|
<Discs discs={discs}/>
|
|
{!mbid && <p>AHH</p>}
|
|
</div>
|
|
);
|
|
}
|