{"size": 1122, "ext": "js", "max_stars_repo_path": "src/components/Item.js", "max_stars_repo_name": "prin-r/SaleOrder-React", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/Item.js", "max_issues_repo_name": "prin-r/SaleOrder-React", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/Item.js", "max_forks_repo_name": "prin-r/SaleOrder-React", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 29.5263157895, "max_line_length": 105, "alphanum_fraction": 0.5534759358}
import React from 'react';
import Loadable from 'react-loadable';
import { connect } from 'react-redux';
import { compose , withHandlers } from 'recompose';

const ModalItem = Loadable({
    loader: () => import('./ModalItem'),
    loading: () => <div> ...loading </div>
});

const Item = ({ itemID ,productID , unitPrice , unit , quantity , index , remove , isActive = true}) => (
    <div>
        <span> {itemID} </span>
        <span> {productID} </span>
        <span> {unitPrice} </span>
        <span> {unit} </span>
        <span> {quantity} </span>
        {isActive && <ModalItem title={'Edit Item Properties'} index={index} item={{
            itemID: itemID,
            productID: productID,
            unitPrice: unitPrice,
            unit: unit,
            quantity:quantity
        }}/>}
        {isActive && <button onClick={remove}>remove</button>}
    </div>
);

const addHandlers = withHandlers({
    remove: ({ dispatch , index }) => event => {
        dispatch({
            type: 'REMOVE_ITEM',
            index: index
        });
    }
});

export default compose(connect(), addHandlers)(Item);