lbry-desktop/ui/component/filePrice/view.jsx

// @flow
import React from 'react';
import CreditAmount from 'component/common/credit-amount';

type Props = {
  showFullPrice: boolean,
  costInfo: ?{ includesData: boolean, cost: number },
  fetchCostInfo: string => void,
  uri: string,
  fetching: boolean,
  claim: ?{},
  // below props are just passed to <CreditAmount />
  badge?: boolean,
  inheritStyle?: boolean,
  showLBC?: boolean,
  hideFree?: boolean, // hide the file price if it's free
  className?: string,
};

class FilePrice extends React.PureComponent<Props> {
  static defaultProps = {
    showFullPrice: false,
  };

  componentDidMount() {
    this.fetchCost(this.props);
  }

  componentDidUpdate() {
    this.fetchCost(this.props);
  }

  fetchCost = (props: Props) => {
    const { costInfo, fetchCostInfo, uri, fetching, claim } = props;

    if (costInfo === undefined && !fetching && claim) {
      fetchCostInfo(uri);
    }
  };

  render() {
    const { costInfo, showFullPrice, badge, inheritStyle, showLBC, hideFree, className } = this.props;
    if (costInfo && (!costInfo.cost || (!costInfo.cost && hideFree))) {
      return null;
    }

    return costInfo ? (
      <CreditAmount
        showFree
        badge={badge}
        inheritStyle={inheritStyle}
        showLBC={showLBC}
        amount={costInfo.cost}
        isEstimate={!costInfo.includesData}
        showFullPrice={showFullPrice}
        className={className}
      />
    ) : null;
  }
}

export default FilePrice;