import React, { Component } from 'react' import { connect } from 'react-redux' import { postData, fetchData } from '../actions' import HostForm from '../components/HostForm' import Wrapper from '../components/Wrapper' class HostFormContainer extends Component { componentDidMount() { const { dispatch } = this.props dispatch(fetchData('owners', '/api/v1/dashboard/user/')) } genSelectOptions() { const { owners } = this.props.data if (owners === undefined) { return [] } return owners.map(owner => ({ key: owner.url, text: `${owner.full_name} (${owner.email})`, value: owner.url })) } render() { const { handleSubmit } = this.props return ( <Wrapper title='Host'> <HostForm onSubmit={handleSubmit} ownerOptions={() => this.genSelectOptions()} /> </Wrapper> ) } } const mapStateToProps = ({ data }) => ({ data }) const mapDispatchToProps = dispatch => ({ handleSubmit: data => dispatch(postData('/api/v1/network/domains/', data)), dispatch, }) // TODO: Add id parameter for handleSubmit export default connect(mapStateToProps, mapDispatchToProps)(HostFormContainer)