musiclist-client/src/views/Disc.jsx

import React, {Fragment, useEffect, useState} from 'react';
import queryString from "query-string";

import {getDisc, getDiscVersions} from "../services/entity_service";

import {CoverArt} from "../components/CoverArt";
import {Entity} from "../components/Entity";
import {EntityList} from "../components/EntityList";
import {Paginate} from "../components/Paginate";

const capitalize = (string) => {
  return string.charAt(0).toUpperCase() + string.slice(1);
}


const Versions = (props) => {
  const versions = props.versions ? props.versions : null;
  const paginate = props.paginate ? props.paginate : null;

  const handlePageChanged = (page) => {
    props.onPageChanged(page);
  }

  let versionsComponent = <Fragment/>;
  if(versions) {
    const items = versions.map((version) => ({
      'cover': <CoverArt release={version}/>,
      'link': `/release/${version.id}`,
      'title': version.title,
      'subtitle': <Fragment>
                   <div>{version.date}</div>
                   <div>{version.country}</div>
                   <div>{capitalize(version.disambiguation)}</div>
                   </Fragment>

    }));
    versionsComponent = <EntityList items={items}/>
  }

  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 (
    <Fragment>
      <h2>Versiones</h2>
      {versionsComponent}
      {paginateContent}
    </Fragment>
  )
}

const Disc = (props) => {
  const disc = props.disc;
  if (disc){
    return <Entity title={disc.title}
      subtitle={`${disc.artist.name} - [${disc.first_release_date}]`}
      buttonText='Agregar a mi lista'
      cover={<CoverArt disc={disc}/>}/>
  }else {
    return <Fragment></Fragment>
  }
}

export const DiscView = (props) => {
  const mbid = props.match.params.mbid;
  const parsedParams = queryString.parse(props.location.search);

  const [disc, setDisc] = useState(null);
  const [versions, setVersions] = useState(null);
  const [versionsPaginate, setVersionsPaginate] = useState(null);
  const [page, setPage] = useState(!isNaN(+parsedParams.page) ? +parsedParams.page : 1)

  useEffect(() => {
    if (mbid) {
      getDisc(mbid).then((result) => setDisc(result));
      getDiscVersions(mbid, page).then((result) => {
        setVersions(result.releases);
        setVersionsPaginate(result.paginate);
      });
    }
  }, [mbid, page])

  const makeLink = (page) => {
    return `/disc/${mbid}?page=${page}`;
  }

  const handleVersionPageChanged = (page) => {
    setVersions(null);
    setPage(page);
    props.history.push(makeLink(page));
  }

  const handleNavigateToVersion= (disc) => {
    props.history.push(`/release/${disc.id}`)
  }

  return (
    <Fragment>
      <Disc disc={disc}/>
      <Versions versions={versions} paginate={versionsPaginate}
                onPageChanged={handleVersionPageChanged} makeLink={makeLink}
                navigateToVersion={handleNavigateToVersion}/>
    </Fragment>
  )
}