Select User

/* eslint-disable array-callback-return */
/* eslint-disable react/sort-comp */
import React from 'react';
import { connect } from 'react-redux';
import { Field } from 'redux-form';
import MultiSelectInput from './MultiSelectInput';

class SelectUser extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      opt: []
    };
  }

  componentWillReceiveProps(nextProps) {
    const { data } = this.props;
    if (data !== nextProps.data) {
      const opt = nextProps.data.map(data => ({
        value: data.id,
        label: `${data.first_name} ${data.last_name}`
      }));
      this.setState({ opt });
    }
  }

  render() {
    const { opt } = this.state;
    const { validate, label, requiredStar } = this.props;
    return (
      <Field
        name="user_id"
        component={MultiSelectInput}
        label={label}
        requiredStar={requiredStar}
        options={opt}
        id="inputCountry"
        placeholder="Choose User"
        validate={validate}
      />
    );
  }
}

const mapStateToProps = state => ({
  data: state.user.dataUserSelect
});

export default connect(
  mapStateToProps,
  {}
)(SelectUser);