gistfile1.txt

import React from 'react'
import { connect } from 'react-redux'
import { reduxForm } from 'redux-form'
import { loadInterests, saveInterests } from 'containers/UserDetail/Interests/actions'
import List from 'components/List'
import Panel from 'components/Panel'

function loadData (props) {
  const { userId } = props.params
  props.loadInterests(userId)
}

class Interests extends React.Component {
  componentWillMount() {
    loadData(this.props)
  }

  render() {
    const {
      fields: {
        interests
      }, guest, handleSubmit, save
    } = this.props

    function handleInterestChange (e) {
      const vals = e.target.checked
        ? [...interests.value, e.target.value]
        : interests.value.filter(val => val !== e.target.value)
      interests.onChange(vals)
    }

    function submit(values, dispatch) {
      save(values.interests)
    }

    const renderInterest = (interest, i) => {
      return <label key={i}>
        <input
          type="checkbox"
          name="interests"
          defaultChecked={true}
          onChange={handleInterestChange}
          value={interest}
        />
        {interest}
      </label>
    }

    return (
      <form className="interests-form" onSubmit={handleSubmit(submit)}>
        <h2>Interests</h2>
        <Panel>
          <List
            items={guest.interests}
            renderItem={renderInterest}
            onLoadMoreClick={() => {}}
          />
          <button className="primary primary-large">Save Changes</button>
        </Panel>
      </form>
    )
  }
}

const formConfig = {
  form: 'marketing',
  fields: ['interests']
}

const mapStateToProps = (state, props) => {
  const guest = state.guests[props.params.userId]
  return {
    form: state.form,
    guest,
    initialValues: guest
  }
}

function mapDispatchToProps (dispatch, props) {
  const { userId } = props.params
  return {
    loadInterests: id => dispatch(loadInterests(id)),
    save: interests => dispatch(saveInterests(userId, interests))
  }
}

export default reduxForm(formConfig, mapStateToProps, mapDispatchToProps)(Interests)