Fetch Logic

fetch-logic.jsx

class ProductDetailPage extends React.Component {

  componentDidMount() {
    ...
    const hasRealestate = this.props.viewportWidth > 800;
    const hasData = this.props.relatedProductInfo === undefined;
    if (hasRealestate && !hasData) {
      this.props.fetchRelatedProductInfo(this.props.productId);
    }
  }

  render() {
    const hasRealestate = this.props.viewportWidth > 800;
    const hasData = this.props.relatedProductInfo !== undefined;
    return <div>
      ...
      { hasRealestate &&
        ( hasData
          ? <RelatedProducts products={this.props.relatedProductInfo}/>
          : <div>Loading...</div>
        )
      }
    </div>;
  }
}