Updated GroupCreate to add new keys
This commit is contained in:
mgabdev
parent
19b86ccc8b
commit
e22afa8917
|
|
@ -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) {
|
||||
this.props.onResetEditor()
|
||||
const { groupId, group } = this.props
|
||||
|
||||
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} – </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 />
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue