gab-social/app/javascript/gabsocial/features/groups/create/index.js

122 lines
3.2 KiB
JavaScript
Raw Normal View History

2019-07-02 08:10:25 +01:00
import React from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
2019-07-17 19:22:19 +01:00
import { changeValue, submit, reset } from '../../../actions/group_editor';
2019-07-02 08:10:25 +01:00
import IconButton from '../../../components/icon_button';
import { defineMessages, injectIntl } from 'react-intl';
const messages = defineMessages({
2019-07-17 19:22:19 +01:00
heading: { id: 'groups.create.heading', defaultMessage: 'New group' },
title: { id: 'groups.form.title', defaultMessage: 'Title' },
description: { id: 'groups.form.description', defaultMessage: 'Description' },
coverImage: { id: 'groups.form.coverImage', defaultMessage: 'Cover Image' },
create: { id: 'groups.form.create', defaultMessage: 'Create group' },
2019-07-02 08:10:25 +01:00
});
const mapStateToProps = state => ({
2019-07-17 19:22:19 +01:00
title: state.getIn(['group_editor', 'title']),
description: state.getIn(['group_editor', 'description']),
coverImage: state.getIn(['group_editor', 'coverImage']),
disabled: state.getIn(['group_editor', 'isSubmitting']),
2019-07-02 08:10:25 +01:00
});
const mapDispatchToProps = dispatch => ({
2019-07-17 19:22:19 +01:00
onTitleChange: value => dispatch(changeValue('title', value)),
onDescriptionChange: value => dispatch(changeValue('description', value)),
onCoverImageChange: value => dispatch(changeValue('coverImage', value)),
onSubmit: routerHistory => dispatch(submit(routerHistory)),
reset: () => dispatch(reset()),
2019-07-02 08:10:25 +01:00
});
export default @connect(mapStateToProps, mapDispatchToProps)
@injectIntl
class Create extends React.PureComponent {
2019-07-17 19:22:19 +01:00
static contextTypes = {
router: PropTypes.object
}
static propTypes = {
title: PropTypes.string.isRequired,
description: PropTypes.string.isRequired,
coverImage: PropTypes.object,
disabled: PropTypes.bool,
intl: PropTypes.object.isRequired,
onTitleChange: PropTypes.func.isRequired,
onSubmit: PropTypes.func.isRequired,
};
componentWillMount() {
this.props.reset();
}
handleTitleChange = e => {
this.props.onTitleChange(e.target.value);
}
handleDescriptionChange = e => {
this.props.onDescriptionChange(e.target.value);
}
handleCoverImageChange = e => {
this.props.onCoverImageChange(e.target.files[0]);
}
handleSubmit = e => {
e.preventDefault();
this.props.onSubmit(this.context.router.history);
}
handleClick = () => {
this.props.onSubmit(this.context.router.history);
}
render () {
const { title, description, coverImage, disabled, intl } = this.props;
return (
<form className='column-inline-form' onSubmit={this.handleSubmit}>
<h2>{intl.formatMessage(messages.heading)}</h2>
<label>
<input
className='setting-text'
value={title}
disabled={disabled}
onChange={this.handleTitleChange}
placeholder={intl.formatMessage(messages.title)}
/>
</label>
<label>
<input
className='setting-text'
value={description}
disabled={disabled}
onChange={this.handleDescriptionChange}
placeholder={intl.formatMessage(messages.description)}
/>
</label>
<label>
<input
type='file'
className='setting-text'
disabled={disabled}
onChange={this.handleCoverImageChange}
placeholder={intl.formatMessage(messages.coverImage)}
/>
</label>
<IconButton
disabled={disabled}
icon='plus'
title={title}
onClick={this.handleClick}
/>
</form>
);
}
2019-07-02 08:10:25 +01:00
}