<commit_before>import React from 'react';
import {Container, Row, Col, Image, Button} from 'react-bootstrap';
import blackDemo from '../../images/black.png';

/**
 * @return {!JSX} Page component for where a user can view
 *     details about a single product.
 */
export function ProductScreen() {
  return (
    <Container>
      <Row>
        <Col/>
        <Col xs={5}>
          <div>
            <Image src={blackDemo} width="100%"/>
            <Container>
              <Row>
                <Col>
                    Name: Poe
                </Col>
                <Col xs="8"/>
                <Col>
                    Price: $$$
                </Col>
              </Row>
            </Container>
            <br/>
            <p>
              {`very good description of KJ's beatiful cat Poe.`}
            </p>
            <Container>
              <Row>
                <Col>
                  <Button>Add to Cart</Button>
                </Col>
                <Col xs="3"/>
                <Col>
                  <Button variant="success">Buy Now</Button>
                </Col>
              </Row>
            </Container>
          </div>
        </Col>
        <Col/>
      </Row>
    </Container>
  );
}<commit_msg>functional product screen<commit_after>import React from 'react';
import {Container, Row, Col, Image, Button} from 'react-bootstrap';
import {useParams} from 'react-router-dom';
import {connect} from 'react-redux';
import PropTypes from 'prop-types';
import {Link} from 'react-router-dom';
import {addOneToCart} from '../../store/StoreHelpers.js';


/**
 * @return {!JSX} Page component for where a user can view
 *     details about a single product.
 */
const ProductScreenBase = function({items, addToCart}) {
  const {id} = useParams();

  const currProduct = items[id];

  const buttonText = currProduct.inCart ? 'In Cart' : 'Add to Cart';

  const addOnClick = () => {
    addToCart(id);
  };

  const buyOnClick = () => {
    if (!currProduct.inCart) {
      addToCart(id);
    }
  };

  return (
    <Container>
      <Row>
        <Col/>
        <Col xs={5}>
          <div>
            <Image src={currProduct.image} width="100%"/>
            <Container>
              <Row>
                <Col>
                    Name: {currProduct.name}
                </Col>
                <Col xs="8"/>
                <Col>
                    Price: ${currProduct.cost}
                </Col>
              </Row>
            </Container>
            <br/>
            <p>
              {currProduct.description}
            </p>
            <Container>
              <Row>
                <Col>
                  <Button onClick={addOnClick} disabled = {currProduct.inCart}>{buttonText}</Button>
                </Col>
                <Col xs="3"/>
                <Col>
                  <Button variant="success" onClick={buyOnClick} as={Link} to='/cart'>Buy Now</Button>
                </Col>
              </Row>
            </Container>
          </div>
        </Col>
        <Col/>
      </Row>
    </Container>
  );
};

ProductScreenBase.propTypes = {
  items: PropTypes.object,
  addToCart: PropTypes.func,
};

const mapStateToProps = (state) => ({
  items: state.items,
});

const mapDispatchToProps = (dispatch) => {
  return {
    addToCart: (id) => {
      dispatch(addOneToCart(id));
    },
  };
};

export const ProductScreen = connect(mapStateToProps,
    mapDispatchToProps)(ProductScreenBase);
{'fraction_non_alphanumeric': 0.1422376409366869, 'fraction_numerical': 0.003469210754553339, 'mean_word_length': 1.4400564174894217, 'pattern_counts': {'":': 0, '<': 75, '<?xml version=': 0, '>': 80, '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': '126646', 'n_tokens_mistral': 1016, 'n_tokens_neox': 971, 'n_words': 239}