group edit ui

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

@@ -0,0 +1,148 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import { changeValue, submit, setUp } from '../../../actions/group_editor';
+import IconButton from '../../../components/icon_button';
+import { defineMessages, injectIntl } from 'react-intl';
+import LoadingIndicator from '../../../components/loading_indicator';
+import Column from '../../../components/column';
+
+const messages = defineMessages({
+	heading: { id: 'groups.edit.heading', defaultMessage: 'Edit group' },
+	title: { id: 'groups.form.title', defaultMessage: 'Title' },
+	description: { id: 'groups.form.description', defaultMessage: 'Description' },
+	coverImage: { id: 'groups.form.coverImage', defaultMessage: 'Cover Image' },
+	update: { id: 'groups.form.update', defaultMessage: 'Update group' },
+});
+
+const mapStateToProps = (state, props) => ({
+    group: state.getIn(['groups', props.params.id]),
+	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)),
+	setUp: group => dispatch(setUp(group)),
+});
+
+export default @connect(mapStateToProps, mapDispatchToProps)
+@injectIntl
+class Edit extends React.PureComponent {
+
+	static contextTypes = {
+		router: PropTypes.object
+	}
+
+	static propTypes = {
+        group: ImmutablePropTypes.map,
+		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(nextProps) {
+        if (this.props.group) {
+            this.props.setUp(this.props.group);
+        }
+	}
+    
+	componentWillReceiveProps(nextProps) {
+        if (!this.props.group && nextProps.group) {
+            this.props.setUp(nextProps.group);
+        }
+	}
+
+	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 { group, title, description, coverImage, disabled, intl } = this.props;
+        
+        if (typeof group === 'undefined') {
+			return (
+				<Column>
+					<LoadingIndicator />
+				</Column>
+			);
+		} else if (group === false) {
+			return (
+				<Column>
+					<MissingIndicator />
+				</Column>
+			);
+		}
+
+		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>
+		);
+	}
+
+}

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

@@ -49,8 +49,8 @@ class Groups extends ImmutablePureComponent {
 		return (
 			<div>
 				<div className="group-column-header">
-					<div className="group-column-header__title">{intl.formatMessage(messages.heading)}</div>
 					<div className="group-column-header__cta"><Link to="/groups/create">{intl.formatMessage(messages.create)}</Link></div>
+					<div className="group-column-header__title">{intl.formatMessage(messages.heading)}</div>
 					
 					<div className="column-header__wrapper">
 						<h1 className="column-header">

app/javascript/gabsocial/features/groups/timeline/components/header.js

@@ -10,7 +10,8 @@ import DropdownMenuContainer from '../../../../containers/dropdown_menu_containe
 const messages = defineMessages({
 	join: { id: 'groups.join', defaultMessage: 'Join group' },
 	leave: { id: 'groups.leave', defaultMessage: 'Leave group' },
-	removed_accounts: { id: 'groups.removed_accounts', defaultMessage: 'Removed Accounts' }
+	removed_accounts: { id: 'groups.removed_accounts', defaultMessage: 'Removed Accounts' },
+	edit: { id: 'groups.edit', defaultMessage: 'Edit' }
 });
 
 export default @injectIntl
@@ -42,6 +43,7 @@ class Header extends ImmutablePureComponent {
 		const { group, intl } = this.props;
 
 		const menu = [
+			{ text: intl.formatMessage(messages.edit), to: `/groups/${group.get('id')}/edit` },
 			{ text: intl.formatMessage(messages.removed_accounts), to: `/groups/${group.get('id')}/removed_accounts` },
 		];