<commit_before>import React, { Component } from 'react';
import isEqual from 'lodash/isEqual';

class ItemPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currentItem: {
        owner: {}
      },
      itemId: null
    };
  }

  componentDidMount() {
    this.setState({ itemId: this.props.params.itemId });
    this.props.getItem(this.props.params.itemId);
  }

  componentWillReceiveProps(newProps) {
    if (this.state.itemId !== newProps.params.itemId) {
      this.props.getItem(newProps.params.itemId);
    }

    this.setState({
      currentItem: newProps.currentItem,
      itemId: newProps.params.itemId
    });
  }

  userInfo(owner) {
    if (owner) {
      const email = owner.email === "" ? "" : (<li>Email: {owner.email}</li>);
      const phoneNumber = owner.phone_number === ""
        ? "" : (<li>Phone Number: {owner.phone_number}</li>);

      return (
        <ul className="user-info-list">
          {email}
          {phoneNumber}
        </ul>
      );
    }
  }

  render() {
    const item = this.state.currentItem;
    return (
      <div className="item-page">
        <div className="item-page-half">
          <div className="item-image-container">
            <img
              className="item-image-full"
              src={window.largeImg(item.photo_url)} />
          </div><commit_msg>Render nothing until picture is available This prevents unnecessary 404 errors from cloudinary<commit_after>import React, { Component } from 'react';
import isEqual from 'lodash/isEqual';

class ItemPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currentItem: {
        owner: {}
      },
      itemId: null
    };
  }

  componentDidMount() {
    this.setState({ itemId: this.props.params.itemId });
    this.props.getItem(this.props.params.itemId);
  }

  componentWillReceiveProps(newProps) {
    if (this.state.itemId !== newProps.params.itemId) {
      this.props.getItem(newProps.params.itemId);
    }

    this.setState({
      currentItem: newProps.currentItem,
      itemId: newProps.params.itemId
    });
  }

  userInfo(owner) {
    if (owner) {
      const email = owner.email === "" ? "" : (<li>Email: {owner.email}</li>);
      const phoneNumber = owner.phone_number === ""
        ? "" : (<li>Phone Number: {owner.phone_number}</li>);

      return (
        <ul className="user-info-list">
          {email}
          {phoneNumber}
        </ul>
      );
    }
  }

  render() {
    const item = this.state.currentItem;

    if (!item.photo_url) {
      return (
        <div>
          No such item
        </div>
      );
    }
    
    return (
      <div className="item-page">
        <div className="item-page-half">
          <div className="item-image-container">
            <img
              className="item-image-full"
              src={window.largeImg(item.photo_url)} />
          </div>
{'fraction_non_alphanumeric': 0.14627477785372522, 'fraction_numerical': 0.0010252904989747095, 'mean_word_length': 2.191930207197383, 'pattern_counts': {'":': 0, '<': 27, '<?xml version=': 0, '>': 27, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '353841', 'n_tokens_mistral': 915, 'n_tokens_neox': 898, 'n_words': 159}