text: /* eslint react/prop-types: 0 */
  import React from 'react';
  
  import BootstrapTable from 'react-bootstrap-table-next';
  import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
  import { productsGenerator } from 'utils/common';
  
  const { SearchBar } = Search;
  const ProductList = (props) => {
    const columns = [
      {
        dataField: 'id',
        text: 'Product ID'
      },
      {
        dataField: 'name',
        text: 'Product Name'
      },
      {
        dataField: 'price',
        text: 'Product Price'
      }
    ];
  
    return (
      <div style={ { paddingTop: '20px' } }>
        <h1 className="h2">Products</h1>
        <ToolkitProvider
          keyField="id"
          data={ props.products }
          columns={ columns }
          search
        >
          {
            toolkitprops => (
              <div>
                <SearchBar { ...toolkitprops.searchProps } />
                <BootstrapTable
                  striped
                  hover
                  { ...toolkitprops.baseProps }
                />
              </div>
            )
          }
        </ToolkitProvider>
      </div>
    );
  };
  
  export default class DataContainer extends React.Component {
    state = {
      products: []
    };
  
    loadData = () => {
      this.setState({
        products: productsGenerator()
      });
    }
  
    render() {
      return (
        <div>
          <button
            onClick={ this.loadData }
            style={ {
              fontSize: '20px',
              position: 'absolute',
              left: '200px',
              top: '40px'
            } }
          >
            Load Data
          </button>
          <ProductList products={ this.state.products } />
        </div>
      );
    }
  }
  