{"size": 2464, "ext": "js", "max_stars_repo_path": "app/home-page/character-sheet/inventory/equipment-slots/EquipedModal.js", "max_stars_repo_name": "d-baranowski/dnd-character-shee", "max_stars_repo_stars_event_min_datetime": "2020-03-11T01:43:26.000Z", "max_stars_repo_stars_event_max_datetime": "2021-09-03T21:36:16.000Z", "max_issues_repo_path": "app/home-page/character-sheet/inventory/equipment-slots/EquipedModal.js", "max_issues_repo_name": "d-baranowski/dnd-character-shee", "max_issues_repo_issues_event_min_datetime": "2018-12-09T18:50:42.000Z", "max_issues_repo_issues_event_max_datetime": "2019-01-20T17:42:51.000Z", "max_forks_repo_path": "app/home-page/character-sheet/inventory/equipment-slots/EquipedModal.js", "max_forks_repo_name": "d-baranowski/dnd-character-sheet", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 6, "max_issues_count": 3, "max_forks_count": null, "avg_line_length": 25.1428571429, "max_line_length": 75, "alphanum_fraction": 0.5819805195}
import React from 'react';
import _ from 'lodash';
import { connect } from 'react-redux';
import { Modal, Search } from 'semantic-ui-react';
import { closeModal, selectItem } from '../state/equipedActions';

const findResults = (value, source) => {
  const re = new RegExp(_.escapeRegExp(value), 'i');
  const isMatch = result => re.test(result.name);

  return _.filter(source, isMatch);
};

const resultRenderer = value => value.name;

class EquipedModal extends React.PureComponent {
  state = {
    searchTerm: ''
  };

  constructor() {
    super();
  }

  updateSearch(value) {
    this.setState({
      searchTerm: value
    });
  }

  handleResultSelect = (e, { result }) => {
    this.props.selectItem(result, this.props.slot);
    this.props.closeModal();
  };

  render() {
    const { removeItem, modalOpen, closeModal, equipment } = this.props;
    const results = findResults(this.state.searchTerm, equipment);

    return (
      <Modal open={modalOpen} onClose={closeModal}>
        <svg
          onClick={() => {
            removeItem(item.id);
          }}
          width="1.28571429em"
          height="1.28571429em"
          style={{
            position: 'absolute',
            top: 21,
            right: 21
          }}
        >
          <use xlinkHref="#icon-delete" />
        </svg>
        <Modal.Header>Equip Item</Modal.Header>
        <Modal.Content>
          <div>
            <h3>Equip Item</h3>
            <Search
              loading={false}
              onResultSelect={this.handleResultSelect}
              onSearchChange={(e, { value }) => {
                this.updateSearch(value);
              }}
              results={results}
              resultRenderer={resultRenderer}
              value={this.state.searchTerm}
            />
          </div>
        </Modal.Content>
      </Modal>
    );
  }
}

const mapStateToProps = state => {
  const equipment = Object.values(state.equipmentReducer.inventory).reduce(
    (accumulator, value) => [...accumulator, ...Object.values(value)],
    []
  );

  const slot = state.equipedReducer.modalEditSlot;
  return {
    equipment,
    slot,
    modalOpen: state.equipedReducer.modalOpen,
    value: state.equipedReducer[slot]
  };
};

const mapDispatchToProps = dispatch => ({
  closeModal: () => dispatch(closeModal()),
  selectItem: (item, slot) => dispatch(selectItem(item, slot))
});

export default connect(mapStateToProps, mapDispatchToProps)(EquipedModal);
