120 lines
3.3 KiB
JavaScript
120 lines
3.3 KiB
JavaScript
import React, {Fragment, useEffect, useState} from 'react'
|
|
import queryString from "query-string";
|
|
|
|
import {getArtist, getArtistDiscs} from "../services/entity_service";
|
|
|
|
import {CoverArt} from '../components/CoverArt';
|
|
import {Paginate} from "../components/Paginate";
|
|
import {EntityList} from "../components/EntityList";
|
|
import {Entity} from "../components/Entity";
|
|
import {Comments} from "../components/Comments";
|
|
|
|
|
|
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 = <EntityList placeholder={true} size={16} cover={true} grid={true}/>;
|
|
if (discs) {
|
|
if(discs.length > 0){
|
|
const items = discs.map((disc) => ({
|
|
'cover': <CoverArt disc={disc}/>,
|
|
'link': `/disc/${disc.id}`,
|
|
'title': disc.title,
|
|
'subtitle': disc.artist.name
|
|
}));
|
|
const list = [{
|
|
'items': items
|
|
}]
|
|
discsComponent = <EntityList list={list} grid={true}/>
|
|
}else{
|
|
discsComponent = <p>El artista no tiene discos</p>
|
|
}
|
|
}
|
|
|
|
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 <Entity title={artist.name}
|
|
subtitle={[artist.type, artist.country].filter(Boolean).join(' - ')}
|
|
tags={artist.tags.map((tag) => (tag.name))}
|
|
buttonText='Agregar a mi lista'/>
|
|
}else {
|
|
return <Fragment/>
|
|
}
|
|
}
|
|
|
|
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}/>}
|
|
<Comments/>
|
|
</div>
|
|
);
|
|
}
|