<commit_before>import React, { Component } from 'react';
import { Image, Button, FormGroup, Form, FormControl, Glyphicon } from 'react-bootstrap';
import { Row, Col } from 'react-flexbox-grid';

// <Col xs={6} md={4} lg={4}>
//     <ProductItem name="dog1" width={256} height={256} image={dog} alt={'dog'} heading={heading} body={body}/>
// </Col>

class ProductItem extends Component {
    constructor(props) {
        super(props);
        // props
        this.id = this.props.product.id;
        this.image = this.props.product.image;
        this.inventory = this.props.product.inventory;
        this.alt = this.props.product.alt;
        this.width = this.props.product.width;
        this.height = this.props.product.height;
        this.heading = this.props.product.heading;
        this.body = this.props.product.body;
        this.onAddToCartClick = this.props.onAddToCartClick;
        // component state
        this.state = {
            value: 0,
            name: this.props.name
        }
        // bindings
        this.incrementValue = this.incrementValue.bind(this);
        this.decreseValue = this.decreseValue.bind(this);
    }
    incrementValue() {
        const currrentValue = this.state.value;
        const nextValue = currrentValue + 1;
        this.setState({
            value: nextValue
        })
    }
    decreseValue() {
        const currrentValue = this.state.value;
        const nextValue = currrentValue > 0 ? currrentValue - 1 : 0;
        this.setState({
            value: nextValue
        })
    }
    addToCart(quantity){
        this.onAddToCartClick(quantity);
        this.setState({
            value: 0
        });
    }
    render() {
        return (
            <div style={{marginTop: 50, marginBottom: 50}}>
                <Row center="lg">
                    <Col xs={3} md={3} lg={12}>
                        <Image width={this.width} height={this.height} src={this.image} alt={this.alt} rounded />
                    </Col>
                </Row>
                <Row center="lg">
                    <Col style={{padding: "0 60px"}} xs={3} md={3} lg={12}>
                        <h3>{this.heading}</h3>
                        <p style={{"textAlign": "justify"}}>{this.body}</p>
                    </Col>
                </Row>
                <Row center="lg">
                    <Form inline>
                        <FormGroup><commit_msg>Styled Products<commit_after>import React, { Component } from 'react';
import { Image, Button, FormGroup, Form, FormControl, Glyphicon } from 'react-bootstrap';
import { Row, Col } from 'react-flexbox-grid';

// <Col xs={6} md={4} lg={4}>
//     <ProductItem name="dog1" width={256} height={256} image={dog} alt={'dog'} heading={heading} body={body}/>
// </Col>

class ProductItem extends Component {
    constructor(props) {
        super(props);
        // props
        this.id = this.props.product.id;
        this.image = this.props.product.image;
        this.inventory = this.props.product.inventory;
        this.alt = this.props.product.alt;
        this.width = this.props.product.width;
        this.height = this.props.product.height;
        this.heading = this.props.product.heading;
        this.body = this.props.product.body;
        this.onAddToCartClick = this.props.onAddToCartClick;
        // component state
        this.state = {
            value: 0,
            name: this.props.name
        }
        // bindings
        this.incrementValue = this.incrementValue.bind(this);
        this.decreseValue = this.decreseValue.bind(this);
    }
    incrementValue() {
        const currrentValue = this.state.value;
        const nextValue = currrentValue + 1;
        this.setState({
            value: nextValue
        })
    }
    decreseValue() {
        const currrentValue = this.state.value;
        const nextValue = currrentValue > 0 ? currrentValue - 1 : 0;
        this.setState({
            value: nextValue
        })
    }
    addToCart(quantity){
        this.onAddToCartClick(quantity);
        this.setState({
            value: 0
        });
    }
    render() {
        return (
            <div style={{marginTop: 50, marginBottom: 50, padding:"0 10px"}}>
                <Row center="lg" style={{justifyContent: "center", alignItems: "center"}}>
                    <Image width={this.width} height={this.height} src={this.image} alt={this.alt} rounded />
                </Row>
                <Row center="lg">
                    <h3>{this.heading}</h3>
                    <p style={{"textAlign": "justify", padding: "5px"}}>{this.body}</p>
                </Row>
                <Row center="lg" style={{justifyContent: "center", alignItems: "center"}}>
                    <Form inline>
                        <FormGroup>
{'fraction_non_alphanumeric': 0.13963210702341136, 'fraction_numerical': 0.012332775919732442, 'mean_word_length': 1.8263437684583579, 'pattern_counts': {'":': 2, '<': 39, '<?xml version=': 0, '>': 41, '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': '4617844', 'n_tokens_mistral': 1438, 'n_tokens_neox': 1391, 'n_words': 279}