<commit_before>// https://bootsnipp.com/snippets/featured/responsive-shopping-cart
// https://codereview.stackexchange.com/questions/106839/my-first-shopping-cart-with-react-js

var formatNumber = function (value) {
	return Number(value).toFixed(2);
};

var findValueByKey = function (product, columns, key) {
	var i, currentKey;

	for (i = 0; i < columns.length; i++) {
		currentKey = columns[i].key;
		if (currentKey === key) {
			return product[currentKey];
		}
	}
}

var HeaderRow = React.createClass({
	render: function() {
		var columnsHtml = [];

		for (var i = 0; i < this.props.columnKeys.length; i++) {
		  if (this.props.columnKeys[i].display !== false) {
			columnsHtml.push(
				<th key={i}>{this.props.columnKeys[i].title}</th>
			);
		  }
	    }

		return (
			<tr>
				{columnsHtml}
				<th className="text-center">Subtotal</th>
				<th></th>
			</tr>
		);
	}
});

var ProductRow = React.createClass({
	calculateSubtotal: function() {
		return formatNumber(this.props.productPrice * this.props.productQuantity);
	},
	render: function() {			
		return (
			<tr>
				<td data-th="Product">
					<div className="row">
						<div className="col-sm-2 hidden-xs"><img src={this.props.productImage} className="img-responsive"/></div>
						<div className="col-sm-10">
							<h4 className="nomargin">{this.props.productName}</h4>
							<p>{this.props.productDetails}</p>
						</div>
					</div>
				</td>
				<td data-th="Price">${formatNumber(this.props.productPrice)}</td>
				<td data-th="Quantity">
					<input type="number" 
						className="form-control text-center"
						defaultValue={this.props.productQuantity}
						min={this.props.min} 
						onChange={this.props.handleInputChange.bind(null, this.props.arrayIndex)} />
				</td>
				<td data-th="Subtotal" className="text-center">${this.calculateSubtotal()}</td>
				<td className="actions" data-th="">
					<button className="btn btn-danger btn-sm" onClick={this.props.handleProductRemove.bind(null, this.props.arrayIndex)}><i className="fa fa-trash-o"></i></button>								
				</td>
			</tr>
		);
	}
});

var Button = React.createClass({
	render: function() {
		var typeClassName = "btn btn-" + this.props.type, 
		directionClassName = "fa fa-angle-" + this.props.direction;

		if (this.props.direction === "right") {
			typeClassName  += " btn-block";

			return (
				<a href={this.props.url} className={typeClassName}>{this.props.text} <i className={directionClassName}></i></a>
			);
		} else {
			return (
				<a href={this.props.url} className={typeClassName}><i className={directionClassName}></i> {this.props.text}</a>
			);
		}
	}
});

var Total = React.createClass({
	calculateTotal: function () {
		var i, currentProduct,
			total = 0, 
			products = this.props.products,
			columns = this.props.columnKeys;

		for (i = 0; i < products.length; i++) {
			currentProduct = products[i];

			total += findValueByKey(currentProduct, columns, 'quantity') * findValueByKey(currentProduct, columns, 'price');
		}

		return formatNumber(total);
	},
	render: function() {
		return (
			<strong>Total ${this.calculateTotal()}</strong>
		);
	}
});

var AllProductRows = React.createClass({
	buildRows: function () {
		var i, currentProduct,<commit_msg>Extract delete to react element.<commit_after>// https://bootsnipp.com/snippets/featured/responsive-shopping-cart
// https://codereview.stackexchange.com/questions/106839/my-first-shopping-cart-with-react-js

var formatNumber = function (value) {
	return Number(value).toFixed(2);
};

var findValueByKey = function (product, columns, key) {
	var i, currentKey;

	for (i = 0; i < columns.length; i++) {
		currentKey = columns[i].key;
		if (currentKey === key) {
			return product[currentKey];
		}
	}
}

var HeaderRow = React.createClass({
	render: function() {
		var columnsHtml = [];

		for (var i = 0; i < this.props.columnKeys.length; i++) {
		  if (this.props.columnKeys[i].display !== false) {
			columnsHtml.push(
				<th key={i}>{this.props.columnKeys[i].title}</th>
			);
		  }
	    }

		return (
			<tr>
				{columnsHtml}
				<th className="text-center">Subtotal</th>
				<th></th>
			</tr>
		);
	}
});

var ProductRow = React.createClass({
	calculateSubtotal: function() {
		return formatNumber(this.props.productPrice * this.props.productQuantity);
	},
	render: function() {			
		return (
			<tr>
				<td data-th="Product">
					<div className="row">
						<div className="col-sm-2 hidden-xs"><img src={this.props.productImage} className="img-responsive"/></div>
						<div className="col-sm-10">
							<h4 className="nomargin">{this.props.productName}</h4>
							<p>{this.props.productDetails}</p>
						</div>
					</div>
				</td>
				<td data-th="Price">${formatNumber(this.props.productPrice)}</td>
				<td data-th="Quantity">
					<input type="number" 
						className="form-control text-center"
						defaultValue={this.props.productQuantity}
						min={this.props.min} 
						onChange={this.props.handleInputChange.bind(null, this.props.arrayIndex)} />
				</td>
				<td data-th="Subtotal" className="text-center">${this.calculateSubtotal()}</td>
				<td className="actions" data-th="">
					<DeleteButton handleProductRemove={this.props.handleProductRemove} arrayIndex={this.props.arrayIndex} />							
				</td>
			</tr>
		);
	}
});

var Button = React.createClass({
	render: function() {
		var typeClassName = "btn btn-" + this.props.type, 
		directionClassName = "fa fa-angle-" + this.props.direction;

		if (this.props.direction === "right") {
			typeClassName  += " btn-block";

			return (
				<a href={this.props.url} className={typeClassName}>{this.props.text} <i className={directionClassName}></i></a>
			);
		} else {
			return (
				<a href={this.props.url} className={typeClassName}><i className={directionClassName}></i> {this.props.text}</a>
			);
		}
	}
});

var DeleteButton = React.createClass({
	render: function() {
		return (
			<button className="btn btn-danger btn-sm" onClick={this.props.handleProductRemove.bind(null, this.props.arrayIndex)}><i className="fa fa-trash-o"></i></button>
		);
	}
});

var Total = React.createClass({
	calculateTotal: function () {
		var i, currentProduct,
			total = 0, 
			products = this.props.products,
			columns = this.props.columnKeys;

		for (i = 0; i < products.length; i++) {
			currentProduct = products[i];

			total += findValueByKey(currentProduct, columns, 'quantity') * findValueByKey(currentProduct, columns, 'price');
		}

		return formatNumber(total);
	},
	render: function() {
		return (
			<strong>Total ${this.calculateTotal()}</strong>
		);
	}
});

var AllProductRows = React.createClass({
	buildRows: function () {
		var i, currentProduct,
{'fraction_non_alphanumeric': 0.17749437359339834, 'fraction_numerical': 0.004801200300075019, 'mean_word_length': 3.6323835997220293, 'pattern_counts': {'":': 0, '<': 102, '<?xml version=': 0, '>': 96, 'https://': 4, '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': '2671059', 'n_tokens_mistral': 2638, 'n_tokens_neox': 2226, 'n_words': 396}