content: import React from 'react';
  import { connect } from 'react-redux';
  import shortid from 'shortid';
  
  import * as attributesActions from '../../actions/attributes';
  import { selectors as attributesSelectors } from '../../reducers/attributes';
  
  import AttributeForm from '../AttributeForm';
  import { defaultValues as attributeFormDefaultValue } from '../AttributeForm/formSchema';
  
  import './styles.css';
  
  class AttributesList extends React.Component {
    state = { open: true };
  
    handleClick = () => {
      this.setState({ open: !this.state.open });
    };
  
    handleAddAttributeClick = e => {
      e.preventDefault();
      const { category, addAttribute } = this.props;
      addAttribute({
        category,
        id: shortid.generate(),
        valid: false,
        value: attributeFormDefaultValue
      });
    };
  
    render() {
      const { attributes } = this.props;
      return (
        <div>
          <div className="list">
            <div className="list-wrapper">
              {attributes.length > 0 ? (
                attributes.map(a => (
                  <AttributeForm key={a.id} attributeId={a.id} />
                ))
              ) : (
                <h3>Empty list</h3>
              )}
            </div>
            <div className="add-attribute">
              <div
                className="add-attribute-link"
                onClick={this.handleAddAttributeClick}
              >
                <i className="material-icons">add_circle</i>
                <span>Add attribute</span>
              </div>
            </div>
          </div>
        </div>
      );
    }
  }
  
  const mapStateToProps = (state, ownProps) => {
    const { category } = ownProps;
    const attributes = attributesSelectors(state);
    return {
      attributes: attributes.getAttributesByCategory(category)
    };
  };
  
  export default connect(mapStateToProps, {
    addAttribute: attributesActions.addAttribute
  })(AttributesList);
  