<commit_before>import React, { Component } from "react";
import { Field } from "simple-react-form";
import { Row, Col } from "reactstrap";
import Upload from "../Upload";
import authService from "../utils/AuthService";

class ImageListEditorField extends Component {
  constructor(props) {
    super(props);
    this.makeLead = this.makeLead.bind(this);
    this.handleNewImg = this.handleNewImg.bind(this);
    this.deleteImg = this.deleteImg.bind(this);
    this.deleteLead = this.deleteLead.bind(this);
    // console.log("in ImageListEditorField, props", props);
    this.state = {
      lead: "",
      newImg: false,
      delImg: false,
      images: props.value
    };
  }
  componentWillReceiveProps(props) {
    this.setState({
      images: props.value
    });
  }

  makeLead(src) {
    // this.setState({ lead: src });
  }

  handleNewImg(img) {
    let images = this.state.images;
    images.push({ url: img }); // or do we just want URLs?
    this.setState({ images });

    // console.log("img", img, "this.props", this.props);

    // if (this.props.thing.lead_image) {
    //   if (this.props.thing.other_images) {
    //     let currentImgs = this.props.thing.other_images.length;
    //     this.props.thing.other_images[currentImgs] = { url: img };
    //   }
    // } else {
    //   this.props.thing.lead_image = { url: img };
    // }
    // this.setState({ newImg: true });
    this.props.onChange(images);
    // this.setState({ lead_image: { src: img } });
  }

  deleteImg(photo) {
    this.setState({ delImg: true });
    let currentImgs = this.props.thing.other_images;
    let awsUrl = process.env.REACT_APP_ASSETS_URL;
    let index = Object.keys(currentImgs).find(
      key =>
        awsUrl + currentImgs[key]["url"] === photo ||
        currentImgs[key]["url"] === photo
    );
    if (index) {
      this.props.thing.other_images.splice(index, 1);
    }
  }

  deleteLead(photo) {
    this.setState({ delImg: true });
    let currentImgs = this.props.thing.other_images;
    this.props.thing.lead_image = null;
    if (currentImgs.length > 0) {
      this.setState({ lead: currentImgs[0]["url"] });
    }
  }

  render() {
    // don't use the CDN as it won't be there yet.
    const awsUrl = process.env.REACT_APP_UPLOADS_S3_BUCKET;
    let images = this.state.images;
    // let thing = this.props.thing;
    // console.log("this", this);
    let urls = images.map(function(img) {
      // console.log("IMG", img);
      let url;
      if (img.url) {
        url = img.url;
      } else {
        url = img.src;
      }
      if (url.substring(0, 4) === "blob") {
        return url;
      } else {
        return awsUrl + encodeURIComponent(url);
      }
    });
    // console.log("URLs", urls);
    let bits = urls.map((photo, id) =>
      <Col key={id} sm="6" md="3">
        <div className={id === 0 ? "box lead" : "box"}>
          <div className="checkbox" onClick={this.makeLead.bind(this, photo)} />
          <div className="trash" onClick={this.deleteImg.bind(this, photo)} />
          <img
            style={{ width: "100%", height: "100%", objectFit: "contain" }}
            key={id}
            alt=""
            className="img-fluid"
            src={photo}
          />
          {this.state.lead === photo ? <small>Lead Image</small> : undefined}
        </div>
      </Col>
    );
    return (
      <Row className="itemPics">
        {bits}
        <Col md="3">
          <Upload auth={authService} itemEdit addToList={this.handleNewImg} />
        </Col>
      </Row>
    );
  }
}

export default class ImageListEditor extends Component {
  render() {
    let { property } = this.props;<commit_msg>Fix making lead images, deleting images.  much simpler now.<commit_after>import React, { Component } from "react";
import { Field } from "simple-react-form";
import { Row, Col } from "reactstrap";
import Upload from "../Upload";
import authService from "../utils/AuthService";

class ImageListEditorField extends Component {
  constructor(props) {
    super(props);
    this.makeLead = this.makeLead.bind(this);
    this.handleNewImg = this.handleNewImg.bind(this);
    this.deleteImg = this.deleteImg.bind(this);
    this.state = {
      images: props.value
    };
  }
  componentWillReceiveProps(props) {
    this.setState({
      images: props.value
    });
  }

  makeLead(img) {
    let src = img.url;
    // our convention is that the first image is the lead image
    let images = this.state.images;
    images = images.filter(x => x.url !== src);
    images.unshift(img);
    this.setState({ images });
    this.props.onChange(images);
  }

  handleNewImg(img) {
    let images = this.state.images;
    images.push({ url: img });
    this.setState({ images });
    this.props.onChange(images);
  }

  deleteImg(img) {
    let images = this.state.images;
    images = images.filter(x => x.url !== img.url);
    this.setState({ images });
    this.props.onChange(images);
  }

  render() {
    // don't use the CDN as it won't be there yet.
    const awsUrl = process.env.REACT_APP_UPLOADS_S3_BUCKET;
    let images = this.state.images;
    let urls = images.map(function(img) {
      let url;
      if (img.url) {
        url = img.url;
      } else {
        url = img.src;
      }
      if (url.substring(0, 4) === "blob") {
        return url;
      } else {
        return awsUrl + encodeURIComponent(url);
      }
    });
    let bits = urls.map((photo, id) =>
      <Col key={id} sm="6" md="3">
        <div className={id === 0 ? "box lead" : "box"}>
          <div
            className="checkbox"
            onClick={this.makeLead.bind(this, images[id])}
          />
          <div
            className="trash"
            onClick={this.deleteImg.bind(this, images[id])}
          />
          <img
            style={{ width: "100%", height: "100%", objectFit: "contain" }}
            key={id}
            alt=""
            className="img-fluid"
            src={photo}
          />
          {this.state.lead === photo ? <small>Lead Image</small> : undefined}
        </div>
      </Col>
    );
    return (
      <Row className="itemPics">
        {bits}
        <Col md="3">
          <Upload auth={authService} itemEdit addToList={this.handleNewImg} />
        </Col>
      </Row>
    );
  }
}

export default class ImageListEditor extends Component {
  render() {
    let { property } = this.props;
{'fraction_non_alphanumeric': 0.15661707126076743, 'fraction_numerical': 0.0045418950665622555, 'mean_word_length': 2.244918699186992, 'pattern_counts': {'":': 0, '<': 31, '<?xml version=': 0, '>': 37, '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': '6519664', 'n_tokens_mistral': 2081, 'n_tokens_neox': 2065, 'n_words': 443}