group creation form

app/javascript/gabsocial/features/groups/create/index.js

@@ -1,78 +1,121 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
-import { changeListEditorTitle, submitListEditor } from '../../../actions/lists';
+import { changeValue, submit, reset } from '../../../actions/group_editor';
 import IconButton from '../../../components/icon_button';
 import { defineMessages, injectIntl } from 'react-intl';
 
 const messages = defineMessages({
-  label: { id: 'groups.new.title_placeholder', defaultMessage: 'New group title' },
-  title: { id: 'groups.new.create', defaultMessage: 'Add group' },
+	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' },
 });
 
 const mapStateToProps = state => ({
-  value: state.getIn(['groupEditor', 'title']),
-  disabled: state.getIn(['groupEditor', 'isSubmitting']),
+	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 => ({
-  onChange: value => dispatch(changeListEditorTitle(value)),
-  onSubmit: () => dispatch(submitListEditor(true)),
+	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 React.PureComponent {
 
-  static propTypes = {
-    value: PropTypes.string.isRequired,
-    disabled: PropTypes.bool,
-    intl: PropTypes.object.isRequired,
-    onChange: PropTypes.func.isRequired,
-    onSubmit: PropTypes.func.isRequired,
-  };
+	static contextTypes = {
+		router: PropTypes.object
+	}
 
-  handleChange = e => {
-    this.props.onChange(e.target.value);
-  }
+	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,
+	};
 
-  handleSubmit = e => {
-    e.preventDefault();
-    this.props.onSubmit();
-  }
+	componentWillMount() {
+		this.props.reset();
+	}
 
-  handleClick = () => {
-    this.props.onSubmit();
-  }
+	handleTitleChange = e => {
+		this.props.onTitleChange(e.target.value);
+	}
 
-  render () {
-    const { value, disabled, intl } = this.props;
+	handleDescriptionChange = e => {
+		this.props.onDescriptionChange(e.target.value);
+	}
 
-    const label = intl.formatMessage(messages.label);
-    const title = intl.formatMessage(messages.title);
+	handleCoverImageChange = e => {
+		this.props.onCoverImageChange(e.target.files[0]);
+	}
 
-    return (
-      <form className='column-inline-form' onSubmit={this.handleSubmit}>
-        <label>
-          <span style={{ display: 'none' }}>{label}</span>
+	handleSubmit = e => {
+		e.preventDefault();
+		this.props.onSubmit(this.context.router.history);
+	}
 
-          <input
-            className='setting-text'
-            value={value}
-            disabled={disabled}
-            onChange={this.handleChange}
-            placeholder={label}
-          />
-        </label>
+	handleClick = () => {
+		this.props.onSubmit(this.context.router.history);
+	}
 
-        <IconButton
-          disabled={disabled}
-          icon='plus'
-          title={title}
-          onClick={this.handleClick}
-        />
-      </form>
-    );
-  }
+	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>
+		);
+	}
 
 }