Progress

2020-03-04 18:08:08 -05:00
parent d31d5fcd81
commit c7da9da84e
23 changed files with 97 additions and 181 deletions
--- a/app/javascript/gabsocial/features/group_create.js
+++ b/app/javascript/gabsocial/features/group_create.js
@@ -0,0 +1,114 @@
+import { defineMessages, injectIntl } from 'react-intl'
+import { changeValue, submit, reset } from '../../actions/group_editor'
+import Block from '../../components/block'
+import Button from '../../components/button'
+import Icon from '../../components/icon'
+import Input from '../../components/icon'
+
+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' },
+})
+
+const mapStateToProps = state => ({
+	title: state.getIn(['group_editor', 'title']),
+	description: state.getIn(['group_editor', 'description']),
+	coverImage: state.getIn(['group_editor', 'coverImage']),
+	disabled: state.getIn(['group_editor', 'isSubmitting']),
+})
+
+const mapDispatchToProps = dispatch => ({
+	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()),
+})
+
+export default
+@connect(mapStateToProps, mapDispatchToProps)
+@injectIntl
+class Create extends PureComponent {
+
+	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)
+	}
+
+	render() {
+		const { title, description, coverImage, disabled, intl } = this.props
+
+		return (
+			<Block>
+				<form className='group-form' onSubmit={this.handleSubmit}>
+					<div>
+						<Input
+							type='text'
+							value={title}
+							disabled={disabled}
+							onChange={this.handleTitleChange}
+							placeholder={intl.formatMessage(messages.title)}
+						/>
+					</div>
+					<div>
+						<textarea
+							className='standard'
+							type='text'
+							value={description}
+							disabled={disabled}
+							onChange={this.handleDescriptionChange}
+							placeholder={intl.formatMessage(messages.description)}
+						/>
+					</div>
+					<div>
+						<label htmlFor='group_cover_image' className='group-form__file-label--selected'>
+							{intl.formatMessage(coverImage === null ? messages.coverImage : messages.coverImageChange)}
+						</label>
+						<input
+							type='file'
+							className='group-form__file'
+							id='group_cover_image'
+							disabled={disabled}
+							onChange={this.handleCoverImageChange}
+						/>
+						<button className='button'>{intl.formatMessage(messages.create)}</button>
+					</div>
+				</form>
+			</Block>
+		)
+	}
+
+}