<commit_before>class MapPoint {
  constructor(x, y) {
    this.x = x || 0;
    this.y = y || 0;

  }
}

Fb.MapPointView = class extends React.Component {
  render() {
    var style = {
      position: 'absolute',
      left: (this.props.point.x - 20),
      top: (this.props.point.y - 40)
    };
    return  <img style={style}
                 src="/designer_icons/pin.png">
            </img>;
  }
};

Fb.CropInfoMenu = class extends React.Component {
  move() { Fb.renderInventory }
  render() {
   return <div>
            <div className="search-box-wrapper">
              <p>
                <a href="#" onClick={ this.move }>
                  <i className="fa fa-arrow-left"></i>
                </a>
                { this.props.crop.name }
              </p>
            </div>
          </div>
  }
};

Fb.CropInfoContent = class extends React.Component {

  drop (e) {
    this.setState({
      data: this.state.data.concat(new MapPoint(e.clientX, e.clientY))
    });
  }

  constructor() {
   super();
   this.render = this.render.bind(this);
   this.state = {data: []};
  }


  render() {
    var points = this.state.data.map(
      (p, k) => <Fb.MapPointView point={ p } key={k} />
    );
    return  <div className="designer-info">
              <div className="crop-drag-info-tile">
                <h6>Crop Image</h6>
                <img className="crop-drag-info-image"
                     src={this.props.crop.imgUrl}
                     onDragEnd={ this.drop.bind(this) }/>
                <div className="crop-info-overlay">
                  To plant, drag and drop into map
                </div>
              </div>
              <div>
                <h6>
                  Crop Info
                  <span><a href="#">Edit</a></span>
                </h6>
                <ul>
                  <li> Expected height: 28 inches </li>
                  <li> Expected diameter: 44 inches </li>
                  <li> Life Expectancy: 8 years </li>
                </ul>
              </div>
              <div>
                <h6>
                  Planting Tips
                  <span><a href="#">Edit</a></span>
                </h6>
                <ul>
                  <li> Plant in full sun </li>
                  <li> Fruits most in acidic soil </li>
                  <li> Plant near melons </li>
                </ul>
              </div>
              <div>
                <h6>
                  Default Regimens
                  <span><a href="#">Edit</a></span>
                </h6>
                <ul>
                  <li> Blueberries by OpenFarm</li>
                  <li> Soil Acidifier </li>
                </ul>
              </div>
              <div>
                <h6>
                  Delete This Crop
                </h6>
                <p>
                  Note: You will no longer be able to plant this crop.
                </p>
                <span>
                  <button className="red">
                    Delete
                  </button>
                </span>
                <div id="drop-area">
                  { points }
                </div>
              </div>
            </div>
  }
}

Fb.renderCropInfo = function(crop) {
  React.render(<Fb.CropInfoMenu crop={crop} />, Fb.leftMenu);
  React.render(<Fb.CropInfoContent crop={crop} />, Fb.leftMenuContent);
};<commit_msg>WIP Merged crop info components<commit_after>class MapPoint {
  constructor(x, y) {
    this.x = x || 0;
    this.y = y || 0;

  }
}

Fb.MapPointView = class extends React.Component {
  render() {
    var style = {
      position: 'absolute',
      left: (this.props.point.x - 20),
      top: (this.props.point.y - 40)
    };
    return  <img style={style}
                 src="/designer_icons/pin.png">
            </img>;
  }
};

Fb.CropInfoContent = class extends React.Component {
  move() { Fb.renderInventory() }

  drop (e) {
    this.setState({
      data: this.state.data.concat(new MapPoint(e.clientX, e.clientY))
    });
  }

  constructor() {
   super();
   this.render = this.render.bind(this);
   this.state = {data: []};
  }


  render() {
    var points = this.state.data.map(
      (p, k) => <Fb.MapPointView point={ p } key={k} />
    );
    return  <div>
              <div className="green-content">
                <div className="search-box-wrapper">
                  <p>
                    <a href="#" onClick={ this.move }>
                      <i className="fa fa-arrow-left"></i>
                    </a>
                    { this.props.crop.name }
                  </p>
                </div>
              </div>
              <div className="designer-info">
                <div className="crop-drag-info-tile">
                  <h6>Crop Image</h6>
                  <img className="crop-drag-info-image"
                       src={this.props.crop.imgUrl}
                       onDragEnd={ this.drop.bind(this) }/>
                  <div className="crop-info-overlay">
                    To plant, drag and drop into map
                  </div>
                </div>
                <div>
                  <h6>
                    Crop Info
                    <span><a href="#">Edit</a></span>
                  </h6>
                  <ul>
                    <li> Expected height: 28 inches </li>
                    <li> Expected diameter: 44 inches </li>
                    <li> Life Expectancy: 8 years </li>
                  </ul>
                </div>
                <div>
                  <h6>
                    Planting Tips
                    <span><a href="#">Edit</a></span>
                  </h6>
                  <ul>
                    <li> Plant in full sun </li>
                    <li> Fruits most in acidic soil </li>
                    <li> Plant near melons </li>
                  </ul>
                </div>
                <div>
                  <h6>
                    Default Regimens
                    <span><a href="#">Edit</a></span>
                  </h6>
                  <ul>
                    <li> Blueberries by OpenFarm</li>
                    <li> Soil Acidifier </li>
                  </ul>
                </div>
                <div>
                  <h6>
                    Delete This Crop
                  </h6>
                  <p>
                    Note: You will no longer be able to plant this crop.
                  </p>
                  <span>
                    <button className="red">
                      Delete
                    </button>
                  </span>
                  <div id="drop-area">
                    { points }
                  </div>
                </div>
              </div>
            </div>
  }
}

Fb.renderCropInfo = function(crop) {
  React.render(<Fb.CropInfoContent crop={crop} />, Fb.leftMenu);
};
{'fraction_non_alphanumeric': 0.13497291758161323, 'fraction_numerical': 0.006148440931049627, 'mean_word_length': 1.0076403173670292, 'pattern_counts': {'":': 0, '<': 168, '<?xml version=': 0, '>': 170, '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': '5106361', 'n_tokens_mistral': 2070, 'n_tokens_neox': 1914, 'n_words': 432}