<commit_before>import React, { Component } from 'react';
import { PropTypes } from 'prop-types';
import autobind from 'autobind-decorator';
import classNames from 'classnames';
import { connect } from 'react-redux';

import { Cart } from 'apps/cart/models';
import { addItem, subtractItem } from 'apps/cart/actions';

@connect(state => ({
  cart: state.cart.cart,
}))
export default class CartControls extends Component {
  static propTypes = {
    product: PropTypes.object.isRequired,  // eslint-disable-line
    cart: PropTypes.instanceOf(Cart).isRequired,
    size: PropTypes.string,
  };

  static defaultProps = {
    size: 'large',
  };

  @autobind
  handleAddItem(product) {
    return () => {
      this.props.dispatch(addItem(product.id));
    };
  }

  @autobind
  handleSubtractItem(product) {
    return () => {
      this.props.dispatch(subtractItem(product.id));
    };
  }

  render() {
    const { product } = this.props;
    const groupAriaLabel = `Add or remove the product ${product.name} from the cart`;
    const addAriaLabel = `Add the product ${product.name} to the cart`;
    const removeAriaLabel = `Remove the product ${product.name} from the cart`;
    const quantity = this.props.cart.getProductQuantity(product.id);
    const groupClassNames = classNames('btn-group', {
      'btn-group-sm': this.props.size === 'small',
    });

    return (
      <div className={groupClassNames} role="group" ariaLabel={groupAriaLabel}>
        <button type="button" className="btn btn-secondary" ariaLabel={addAriaLabel} onClick={this.handleAddItem(product)}>+</button>
        <span className="btn btn-secondary">{quantity}</span>
        <button type="button" className="btn btn-secondary" ariaLabel={removeAriaLabel} onClick={this.handleSubtractItem(product)}>-</button>
      </div>
    );
  }
}<commit_msg>Restyled the cart control, made the + button stand out<commit_after>import React, { Component } from 'react';
import { PropTypes } from 'prop-types';
import autobind from 'autobind-decorator';
import classNames from 'classnames';
import { connect } from 'react-redux';

import { Cart } from 'apps/cart/models';
import { addItem, subtractItem } from 'apps/cart/actions';

@connect(state => ({
  cart: state.cart.cart,
}))
export default class CartControls extends Component {
  static propTypes = {
    product: PropTypes.object.isRequired,  // eslint-disable-line
    cart: PropTypes.instanceOf(Cart).isRequired,
    size: PropTypes.string,
  };

  static defaultProps = {
    size: 'large',
  };

  @autobind
  handleAddItem(product) {
    return () => {
      this.props.dispatch(addItem(product.id));
    };
  }

  @autobind
  handleSubtractItem(product) {
    return () => {
      this.props.dispatch(subtractItem(product.id));
    };
  }

  renderNotInCart() {
    const { product } = this.props;
    const addLabel = `Add the product ${product.name} to the cart`;
    const buttonClassName = classNames('btn btn-primary', {
      'btn-sm': this.props.size === 'small',
    });
    return (
      <button type="button" className={buttonClassName} title={addLabel} ariaLabel={addLabel} onClick={this.handleAddItem(product)}>+</button>
    );
  }

  renderInCart(quantity) {
    const { product } = this.props;
    const groupLabel = `Add or remove the product ${product.name} from the cart`;
    const addLabel = `Add the product ${product.name} to the cart`;
    const removeLabel = `Remove the product ${product.name} from the cart`;
    const groupClassNames = classNames('btn-group', {
      'btn-group-sm': this.props.size === 'small',
    });

    return (
      <div className={groupClassNames} role="group" ariaLabel={groupLabel}>
        <button type="button" className="btn btn-primary" title={addLabel} ariaLabel={addLabel} onClick={this.handleAddItem(product)}>+</button>
        <span className="btn btn-secondary">{quantity}</span>
        <button type="button" className="btn btn-secondary" title={removeLabel} ariaLabel={removeLabel} onClick={this.handleSubtractItem(product)}>-</button>
      </div>
    );
  }

  render() {
    const quantity = this.props.cart.getProductQuantity(this.props.product.id);
    return quantity === 0
      ? this.renderNotInCart()
      : this.renderInCart(quantity);
  }
}
{'fraction_non_alphanumeric': 0.14527503526093088, 'fraction_numerical': 0.00023507287259050304, 'mean_word_length': 3.813348416289593, 'pattern_counts': {'":': 0, '<': 21, '<?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': '7390880', 'n_tokens_mistral': 1295, 'n_tokens_neox': 1278, 'n_words': 289}