Updated GroupCreate to add new keys

app/javascript/gabsocial/features/group_create.js

@@ -1,3 +1,4 @@
+import { Fragment } from 'react'
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import { defineMessages, injectIntl } from 'react-intl'
@@ -6,65 +7,119 @@ import {
 	changeGroupTitle,
 	changeGroupDescription,
 	changeGroupCoverImage,
+	changeGroupId,
+	changeGroupTags,
+	changeGroupCategory,
+	changeGroupIsPrivate,
+	changeGroupIsVisible,
 	submit,
 	setGroup,
 	resetEditor,
 } from '../actions/group_editor'
 import { closeModal } from '../actions/modal'
+import { fetchGroup } from '../actions/groups'
+import { fetchGroupCategories } from '../actions/group_categories'
 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 Switch from '../components/switch'
+import Select from '../components/select'
 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' },
+	title: { id: 'groups.form.title', defaultMessage: 'Title' },
+	idTitle: { id: 'groups.form.id_title', defaultMessage: 'Unique id' },
+	idDescription: { id: 'groups.form.id_description', defaultMessage: 'A unique id that links to this group. (Cannot be changed)' },
+	tagsTitle: { id: 'groups.form.tags_title', defaultMessage: 'Tags' },
+	tagsDescription: { id: 'groups.form.tags_description', defaultMessage: 'Add tags seperated by commas to increase group visibility' },
+	categoryTitle: { id: 'groups.form.category_title', defaultMessage: 'Category' },
+	categoryDescription: { id: 'groups.form.category_description', defaultMessage: 'Add a general category for your group' },
 	description: { id: 'groups.form.description', defaultMessage: 'Enter the group description' },
 	coverImage: { id: 'groups.form.coverImage', defaultMessage: 'Upload a banner image' },
+	coverImageDescription: { id: 'groups.form.coverImage_description', defaultMessage: 'Accepted image types: .jpg, .png' },
 	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...' },
+	descriptionPlaceholder: { id: 'groups.form.description_placeholder', defaultMessage: 'This group is about...' },
+	isPrivateDescription: { id: 'groups.form.is_private_description', defaultMessage: 'Only members can see group posts.' },
+	isVisibleDescription: { id: 'groups.form.is_visible_description', defaultMessage: 'Anyone can find a visible group in search and other places on Gab.' },
 })
 
 const mapStateToProps = (state, { params }) => {
 	const groupId = isObject(params) ? params['id'] : null
 	const group = state.getIn(['groups', groupId])
+	let isAdmin = false
+
+	if (groupId) {
+		const relationships = state.getIn(['group_relationships', groupId])
+		if (relationships) {
+			isAdmin = relationships.get('admin')
+		}
+	}
 
 	return {
 		group,
-		error: groupId && !group,
+		groupId,
+		error: (groupId && !group) || (group && !isAdmin),
 		titleValue: state.getIn(['group_editor', 'title']),
 		descriptionValue: state.getIn(['group_editor', 'description']),
 		coverImage: state.getIn(['group_editor', 'coverImage']),
 		isSubmitting: state.getIn(['group_editor', 'isSubmitting']),
+		idValue: state.getIn(['group_editor', 'id']),
+		tags: state.getIn(['group_editor', 'tags']),
+		category: state.getIn(['group_editor', 'category']),
+		isPrivate: state.getIn(['group_editor', 'isPrivate']),
+		isVisible: state.getIn(['group_editor', 'isVisible']),
+		categories: state.getIn(['group_categories', 'items']),
 	}
 }
 
 const mapDispatchToProps = (dispatch) => ({
-	onTitleChange: (value) => {
+	onTitleChange(value) {
 		dispatch(changeGroupTitle(value))
 	},
-	onDescriptionChange: (value) => {
+	onDescriptionChange(value) {
 		dispatch(changeGroupDescription(value))
 	},
-	onCoverImageChange: (imageData) => {
+	onCoverImageChange(imageData) {
 		dispatch(changeGroupCoverImage(imageData))
 	},
-	onResetEditor: () => {
+	onChangeGroupId(value) {
+		dispatch(changeGroupId(value))
+	},
+	onChangeGroupTags(value) {
+		dispatch(changeGroupTags(value))
+	},
+	onChangeGroupCategory(e) {
+		dispatch(changeGroupCategory(e.target.value))
+	},
+	onChangeGroupIsPrivate(value) {
+		dispatch(changeGroupIsPrivate(value))
+	},
+	onChangeGroupIsVisible(value) {
+		dispatch(changeGroupIsVisible(value))
+	},
+	onResetEditor() {
 		dispatch(resetEditor())
 	},
-	onSetGroup: (group) => {
+	onSetGroup(group) {
 		dispatch(setGroup(group))
 	},
-	onSubmit: (routerHistory) => {
+	onSubmit(routerHistory) {
 		dispatch(submit(routerHistory))
 		dispatch(closeModal())
 	},
+	onFetchGroup(groupId) {
+		dispatch(fetchGroup(groupId))
+	},
+	onFetchGroupCategories() {
+		dispatch(fetchGroupCategories())
+	}
 })
 
 export default
@@ -84,26 +139,39 @@ class GroupCreate extends ImmutablePureComponent {
 		intl: PropTypes.object.isRequired,
 		onTitleChange: PropTypes.func.isRequired,
 		onDescriptionChange: PropTypes.func.isRequired,
+		onChangeGroupId: PropTypes.func.isRequired,
+		onChangeGroupTags: PropTypes.func.isRequired,
+		onChangeGroupCategory: PropTypes.func.isRequired,
+		onChangeGroupIsPrivate: PropTypes.func.isRequired,
+		onChangeGroupIsVisible: PropTypes.func.isRequired,
+		onFetchGroup: PropTypes.func.isRequired,
+		onFetchGroupCategories: PropTypes.func.isRequired,
 		onResetEditor: PropTypes.func.isRequired,
 		onSetGroup: PropTypes.func.isRequired,
 		onSubmit: PropTypes.func.isRequired,
 		isSubmitting: PropTypes.bool,
 		onClose: PropTypes.func,
+		idValue: PropTypes.string.isRequired,
+		tags: PropTypes.string.isRequired,
+		category: PropTypes.string.isRequired,
+		isPrivate: PropTypes.bool.isRequired,
+		isVisible: PropTypes.bool.isRequired,
+		categories: ImmutablePropTypes.list.isRequired,
 	}
 
-	updateOnProps = [
-		'group',
-		'titleValue',
-		'descriptionValue',
-		'coverImage',
-		'isSubmitting',
-	]
-
 	componentDidMount() {
-		if (!this.props.group) {
+		const { groupId, group } = this.props
-			this.props.onResetEditor()
+
+		this.props.onFetchGroupCategories()
+
+		if (!group) {
+			if (groupId) {
+				this.props.onFetchGroup(groupId)
+			} else {
+				this.props.onResetEditor()
+			}
 		} else {
-			this.props.onSetGroup(this.props.group)
+			this.props.onSetGroup(group)
 		}
 	}
 
@@ -127,6 +195,7 @@ class GroupCreate extends ImmutablePureComponent {
 		this.props.onSubmit(this.context.router.history)
 	}
 
+	
 	render() {
 		const {
 			group,
@@ -137,17 +206,45 @@ class GroupCreate extends ImmutablePureComponent {
 			intl,
 			onTitleChange,
 			onDescriptionChange,
+			onChangeGroupId,
+			onChangeGroupTags,
+			onChangeGroupCategory,
+			onChangeGroupIsPrivate,
+			onChangeGroupIsVisible,
 			isSubmitting,
 			onSubmit,
+			idValue,
+			tags,
+			category,
+			isPrivate,
+			isVisible,
+			groupId,
+			categories,
 		} = this.props
 
-		if (!group && error) {
+		if (!group && groupId) {
+			return <ColumnIndicator type='loading' />
+		} else if (!group && error) {
 			return <ColumnIndicator type='missing' />
 		}
 
+		const memberCount = group ? group.get('member_count') : 0
+		const hasGroupId = group ? !!group.get('id') : false
+		let categoriesOptions = []
+		if (categories) {
+			for (let i = 0; i < categories.count(); i++) {
+				const c = categories.get(i)
+				categoriesOptions.push({
+					title: c.get('text'),
+					value: c.get('id'),
+				})
+			}
+		}
+
 		return (
 			<Form onSubmit={onSubmit}>
 				<Input
+					id='group-title'
 					title={intl.formatMessage(messages.title)}
 					value={titleValue}
 					onChange={onTitleChange}
@@ -157,6 +254,57 @@ class GroupCreate extends ImmutablePureComponent {
 
 				<Divider isInvisible />
 
+				{
+					memberCount >= 50 && !hasGroupId &&
+					<Fragment>
+						<Input
+							id='group-id'
+							title={intl.formatMessage(messages.idTitle)}
+							value={idValue}
+							onChange={onChangeGroupId}
+							disabled={isSubmitting}
+						/>
+						<Text className={[_s.mt5, _s.pl15]} size='small' color='secondary'>
+							{
+								!!idValue &&
+								<b>g/{idValue}&nbsp;–&nbsp;</b>
+							}
+							{intl.formatMessage(messages.idDescription)}
+						</Text>
+
+						<Divider isInvisible />
+					</Fragment>
+				}
+
+				<Input
+					id='group-tags'
+					title={intl.formatMessage(messages.tagsTitle)}
+					value={tags}
+					onChange={onChangeGroupTags}
+					disabled={isSubmitting}
+				/>
+				<Text className={[_s.mt5, _s.pl15]} size='small' color='secondary'>
+					{intl.formatMessage(messages.tagsDescription)}
+				</Text>
+
+				<Divider isInvisible />			
+
+				<div className={_s.default}>
+					<Text className={[_s.pl15, _s.mb10].join(' ')} size='small' weight='medium' color='secondary'>
+						{intl.formatMessage(messages.categoryTitle)}
+					</Text>
+					<Select
+						value={category}
+						onChange={onChangeGroupCategory}
+						options={categoriesOptions}
+					/>
+					<Text className={[_s.mt5, _s.pl15].join(' ')} size='small' color='secondary'>
+						{intl.formatMessage(messages.categoryDescription)}
+					</Text>
+
+					<Divider isInvisible />
+				</div>
+
 				<Textarea
 					title={intl.formatMessage(messages.description)}
 					value={descriptionValue}
@@ -177,6 +325,33 @@ class GroupCreate extends ImmutablePureComponent {
 					height='145px'
 					isBordered
 				/>
+				<Text className={[_s.mt5, _s.pl15].join(' ')} size='small' color='secondary'>
+					{intl.formatMessage(messages.coverImageDescription)}
+				</Text>
+
+				<Divider isInvisible />
+				
+				<Switch
+					label={'Private'}
+					id='group-isprivate'
+					checked={isPrivate}
+					onChange={onChangeGroupIsPrivate}
+				/>
+				<Text className={_s.mt5} size='small' color='secondary'>
+					{intl.formatMessage(messages.isPrivateDescription)}
+				</Text>
+
+				<Divider isInvisible />
+		
+				<Switch
+					label={'Visible'}
+					id='group-isvisible'
+					checked={isVisible}
+					onChange={onChangeGroupIsVisible}
+				/>
+				<Text className={_s.mt5} size='small' color='secondary'>
+					{intl.formatMessage(messages.isVisibleDescription)}
+				</Text>
 				
 				<Divider isInvisible />