119 lines
3.5 KiB
JavaScript
119 lines
3.5 KiB
JavaScript
import React, {Fragment, useEffect, useState} from 'react'
|
|
import {getArtist, getArtistDiscs} from "../services/entity_service";
|
|
import {CoverArt} from './CoverArt';
|
|
import {Paginate} from "./Paginate";
|
|
import {EntityList} from "./EntityList";
|
|
import queryString from "query-string";
|
|
|
|
|
|
const Discs = (props) => {
|
|
const discs = props.discs ? props.discs : null;
|
|
const paginate = props.paginate ? props.paginate : null;
|
|
|
|
const handlePageChanged = (page) => {
|
|
props.onPageChanged(page);
|
|
}
|
|
|
|
let discsComponent = <Fragment/>;
|
|
if (discs) {
|
|
const items = discs.map((disc) => ({
|
|
'cover': <CoverArt disc={disc}/>,
|
|
'link': `/disc/${disc.id}`,
|
|
'title': disc.title,
|
|
'subtitle': disc.artist.name
|
|
}));
|
|
discsComponent = <EntityList items={items} grid={true}/>
|
|
}
|
|
|
|
let paginateContent;
|
|
if (paginate) {
|
|
const total = paginate.total;
|
|
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}/>
|
|
}
|
|
|
|
return (
|
|
<div className='discs'>
|
|
<h2>Discos</h2>
|
|
{discsComponent}
|
|
{paginateContent}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const Artist = (props) => {
|
|
const artist = props.artist;
|
|
if (artist) {
|
|
return (
|
|
<div className='artist'>
|
|
<div className='title'>
|
|
<h1>{artist.name}</h1>
|
|
<h4>{[artist.type, artist.country].filter(Boolean).join(' - ')}</h4>
|
|
</div>
|
|
<ul className='tags'>
|
|
{artist.tags.map((tag, index) => (<li key={index}>{tag.name}</li>))}
|
|
</ul>
|
|
|
|
<div>
|
|
<button className='button'>Agregar a mi Lista</button>
|
|
</div>
|
|
</div>
|
|
)
|
|
} else {
|
|
return <></>
|
|
}
|
|
}
|
|
|
|
export const ArtistView = (props) => {
|
|
const parsedParams = queryString.parse(props.location.search);
|
|
|
|
const [artist, setArtist] = useState(null);
|
|
const [discs, setDiscs] = useState(null);
|
|
const [discsPaginate, setDiscsPaginate] = useState(null);
|
|
const [page, setPage] = useState(!isNaN(+parsedParams.page) ? +parsedParams.page : 1)
|
|
|
|
const mbid = props.match.params.mbid;
|
|
|
|
useEffect(() => {
|
|
if (mbid) {
|
|
getArtist(mbid).then((result) => setArtist(result));
|
|
getArtistDiscs(mbid, page, 16).then((result) => {
|
|
setDiscs(result.discs);
|
|
setDiscsPaginate(result.paginate);
|
|
});
|
|
}
|
|
}, [mbid, page])
|
|
|
|
const makeLink = (page) => {
|
|
return `/artist/${mbid}?page=${page}`;
|
|
}
|
|
|
|
const handleDiscPageChanged = (page) => {
|
|
setDiscs(null);
|
|
setPage(page);
|
|
|
|
getArtistDiscs(mbid, page, 16).then((result) => {
|
|
setDiscs(result.discs);
|
|
setDiscsPaginate(result.paginate);
|
|
});
|
|
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} navigateToDisc={handleNavigateToDisc}/>}
|
|
</div>
|
|
);
|
|
}
|