lbry-desktop/ui/js/page/channel/view.jsx

import React from "react";
import lbryuri from "lbryuri";
import { BusyMessage } from "component/common";
import FileTile from "component/fileTile";
import ReactPaginate from "react-paginate";

class ChannelPage extends React.PureComponent {
  componentDidMount() {
    const { uri, page, fetchClaims, fetchClaimCount } = this.props;

    fetchClaims(uri, page || 1);
    fetchClaimCount(uri);
  }

  componentWillReceiveProps(nextProps) {
    const { page, uri, fetching, fetchClaims, fetchClaimCount } = this.props;

    if (nextProps.page && page !== nextProps.page) {
      fetchClaims(nextProps.uri, nextProps.page);
    }
    if (nextProps.uri != uri) {
      fetchClaimCount(uri);
    }
  }

  changePage(pageNumber) {
    const { params } = this.props;
    const newParams = Object.assign({}, params, { page: pageNumber });

    this.props.navigate("/show", newParams);
  }

  render() {
    const {
      fetching,
      claimsInChannel,
      claim,
      uri,
      page,
      totalPages,
    } = this.props;

    let contentList;
    if (fetching) {
      contentList = <BusyMessage message={__("Fetching content")} />;
    } else {
      contentList = claimsInChannel && claimsInChannel.length
        ? claimsInChannel.map(claim =>
            <FileTile
              key={claim.claim_id}
              uri={lbryuri.build({
                name: claim.name,
                claimId: claim.claim_id,
              })}
            />
          )
        : <span className="empty">{__("No content found.")}</span>;
    }

    return (
      <div>
        <section className="card">
          <div className="card__inner">
            <div className="card__title-identity"><h1>{uri}</h1></div>
          </div>
          <div className="card__content">
            <p className="empty">
              {__(
                "Channel pages are empty for all publishers currently, but will be coming in a future update."
              )}
            </p>
          </div>
        </section>
        <h3 className="card-row__header">{__("Published Content")}</h3>
        {contentList}
        <div />
        {(!fetching || (claimsInChannel && claimsInChannel.length)) &&
          totalPages > 1 &&
          <ReactPaginate
            pageCount={totalPages}
            pageRangeDisplayed={2}
            previousLabel="‹"
            nextLabel="›"
            activeClassName="pagination__item--selected"
            pageClassName="pagination__item"
            previousClassName="pagination__item pagination__item--previous"
            nextClassName="pagination__item pagination__item--next"
            breakClassName="pagination__item pagination__item--break"
            marginPagesDisplayed={2}
            onPageChange={e => this.changePage(e.selected + 1)}
            initialPage={parseInt(page - 1)}
            containerClassName="pagination"
          />}
      </div>
    );
  }
}

export default ChannelPage;