import ImmutablePropTypes from 'react-immutable-proptypes' import ImmutablePureComponent from 'react-immutable-pure-component' import { defineMessages, injectIntl } from 'react-intl' import isObject from 'lodash.isobject' import { changeGroupTitle, changeGroupDescription, changeGroupCoverImage, submit, setGroup, resetEditor, } from '../actions/group_editor' import { closeModal } from '../actions/modal' import ColumnIndicator from '../components/column_indicator' import Button from '../components/button' import Divider from '../components/divider' import Input from '../components/input' import Text from '../components/text' import Form from '../components/form' import Textarea from '../components/textarea' import FileInput from '../components/file_input' const messages = defineMessages({ title: { id: 'groups.form.title', defaultMessage: 'Enter a new group title' }, description: { id: 'groups.form.description', defaultMessage: 'Enter the group description' }, coverImage: { id: 'groups.form.coverImage', defaultMessage: 'Upload a banner image' }, coverImageChange: { id: 'groups.form.coverImageChange', defaultMessage: 'Banner image selected' }, create: { id: 'groups.form.create', defaultMessage: 'Create group' }, update: { id: 'groups.form.update', defaultMessage: 'Update group' }, titlePlaceholder: { id: 'groups.form.title_placeholder', defaultMessage: 'New group title...' }, descriptionPlaceholder: { id: 'groups.form.description_placeholder', defaultMessage: 'Some group description...' }, }) const mapStateToProps = (state, { params }) => { const groupId = isObject(params) ? params['id'] : null const group = state.getIn(['groups', groupId]) return { group, error: groupId && !group, titleValue: state.getIn(['group_editor', 'title']), descriptionValue: state.getIn(['group_editor', 'description']), coverImage: state.getIn(['group_editor', 'coverImage']), isSubmitting: state.getIn(['group_editor', 'isSubmitting']), } } const mapDispatchToProps = (dispatch) => ({ onTitleChange: (value) => { dispatch(changeGroupTitle(value)) }, onDescriptionChange: (value) => { dispatch(changeGroupDescription(value)) }, onCoverImageChange: (imageData) => { dispatch(changeGroupCoverImage(imageData)) }, onResetEditor: () => { dispatch(resetEditor()) }, onSetGroup: (group) => { dispatch(setGroup(group)) }, onSubmit: (routerHistory) => { dispatch(submit(routerHistory)) dispatch(closeModal()) }, }) export default @injectIntl @connect(mapStateToProps, mapDispatchToProps) class GroupCreate extends ImmutablePureComponent { static contextTypes = { router: PropTypes.object } static propTypes = { group: ImmutablePropTypes.map, titleValue: PropTypes.string.isRequired, descriptionValue: PropTypes.string.isRequired, coverImage: PropTypes.object, intl: PropTypes.object.isRequired, onTitleChange: PropTypes.func.isRequired, onDescriptionChange: PropTypes.func.isRequired, onResetEditor: PropTypes.func.isRequired, onSetGroup: PropTypes.func.isRequired, onSubmit: PropTypes.func.isRequired, isSubmitting: PropTypes.bool, onClose: PropTypes.func, } updateOnProps = [ 'group', 'titleValue', 'descriptionValue', 'coverImage', 'isSubmitting', ] componentDidMount() { if (!this.props.group) { this.props.onResetEditor() } else { this.props.onSetGroup(this.props.group) } } componentWillReceiveProps(nextProps) { if (this.props.group !== nextProps.group && !!nextProps.group) { this.props.onSetGroup(nextProps.group) } } handleCoverImageChange = (e) => { try { this.props.onCoverImageChange(e.target.files[0]) } catch (error) { // } } handleSubmit = (e) => { e.preventDefault() if (this.props.onClose) this.props.onClose() this.props.onSubmit(this.context.router.history) } render() { const { group, error, titleValue, descriptionValue, coverImage, intl, onTitleChange, onDescriptionChange, isSubmitting, onSubmit, } = this.props if (!group && error) { return } return (