gab-social/app/javascript/gabsocial/features/group_create.js

197 lines
5.2 KiB
JavaScript
Raw Normal View History

2020-03-06 15:38:22 +00:00
import ImmutablePropTypes from 'react-immutable-proptypes'
import ImmutablePureComponent from 'react-immutable-pure-component'
2020-02-29 15:42:47 +00:00
import { defineMessages, injectIntl } from 'react-intl'
2020-03-06 15:38:22 +00:00
import isObject from 'lodash.isobject'
2020-04-28 06:33:58 +01:00
import {
changeGroupTitle,
changeGroupDescription,
changeGroupCoverImage,
submit,
setGroup,
resetEditor,
} from '../actions/group_editor'
import { closeModal } from '../actions/modal'
2020-04-28 06:33:58 +01:00
import ColumnIndicator from '../components/column_indicator'
2020-03-05 15:44:17 +00:00
import Button from '../components/button'
import Divider from '../components/divider'
import Input from '../components/input'
import Text from '../components/text'
2020-04-28 06:33:58 +01:00
import Form from '../components/form'
2020-03-05 15:44:17 +00:00
import Textarea from '../components/textarea'
import FileInput from '../components/file_input'
2019-07-02 08:10:25 +01:00
const messages = defineMessages({
2019-07-18 20:37:53 +01:00
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' },
2019-07-17 19:22:19 +01:00
create: { id: 'groups.form.create', defaultMessage: 'Create group' },
2020-03-06 15:38:22 +00:00
update: { id: 'groups.form.update', defaultMessage: 'Update group' },
2020-04-28 06:33:58 +01:00
titlePlaceholder: { id: 'groups.form.title_placeholder', defaultMessage: 'New group title...' },
descriptionPlaceholder: { id: 'groups.form.description_placeholder', defaultMessage: 'Some group description...' },
2020-02-29 15:42:47 +00:00
})
2019-07-02 08:10:25 +01:00
2020-03-06 15:38:22 +00:00
const mapStateToProps = (state, { params }) => {
const groupId = isObject(params) ? params['id'] : null
const group = state.getIn(['groups', groupId])
return {
group,
error: groupId && !group,
2020-04-28 06:33:58 +01:00
titleValue: state.getIn(['group_editor', 'title']),
descriptionValue: state.getIn(['group_editor', 'description']),
2020-03-06 15:38:22 +00:00
coverImage: state.getIn(['group_editor', 'coverImage']),
2020-04-28 06:33:58 +01:00
isSubmitting: state.getIn(['group_editor', 'isSubmitting']),
2020-03-06 15:38:22 +00:00
}
}
2019-07-02 08:10:25 +01:00
2020-04-11 23:29:19 +01:00
const mapDispatchToProps = (dispatch) => ({
2020-04-28 06:33:58 +01:00
onTitleChange: (value) => {
dispatch(changeGroupTitle(value))
},
onDescriptionChange: (value) => {
dispatch(changeGroupDescription(value))
},
onCoverImageChange: (imageData) => {
dispatch(changeGroupCoverImage(imageData))
},
onResetEditor: () => {
dispatch(resetEditor())
},
onSetGroup: (group) => {
dispatch(setGroup(group))
},
onSubmit: (routerHistory) => {
dispatch(submit(routerHistory))
dispatch(closeModal())
},
2020-02-29 15:42:47 +00:00
})
2019-07-02 08:10:25 +01:00
2020-02-25 16:04:44 +00:00
export default
2019-07-02 08:10:25 +01:00
@injectIntl
2020-04-28 06:33:58 +01:00
@connect(mapStateToProps, mapDispatchToProps)
class GroupCreate extends ImmutablePureComponent {
2019-07-02 08:10:25 +01:00
2019-07-17 19:22:19 +01:00
static contextTypes = {
router: PropTypes.object
}
static propTypes = {
2020-03-06 15:38:22 +00:00
group: ImmutablePropTypes.map,
2020-04-28 06:33:58 +01:00
titleValue: PropTypes.string.isRequired,
descriptionValue: PropTypes.string.isRequired,
2019-07-17 19:22:19 +01:00
coverImage: PropTypes.object,
intl: PropTypes.object.isRequired,
onTitleChange: PropTypes.func.isRequired,
2020-04-28 06:33:58 +01:00
onDescriptionChange: PropTypes.func.isRequired,
onResetEditor: PropTypes.func.isRequired,
onSetGroup: PropTypes.func.isRequired,
2019-07-17 19:22:19 +01:00
onSubmit: PropTypes.func.isRequired,
2020-04-28 06:33:58 +01:00
isSubmitting: PropTypes.bool,
2020-05-14 21:45:39 +01:00
onClose: PropTypes.func,
2020-02-29 15:42:47 +00:00
}
2019-07-17 19:22:19 +01:00
2020-04-28 06:33:58 +01:00
updateOnProps = [
'group',
'titleValue',
'descriptionValue',
'coverImage',
'isSubmitting',
]
componentDidMount() {
2020-03-06 15:38:22 +00:00
if (!this.props.group) {
2020-04-28 06:33:58 +01:00
this.props.onResetEditor()
2020-03-06 15:38:22 +00:00
} else {
2020-04-28 06:33:58 +01:00
this.props.onSetGroup(this.props.group)
2020-03-06 15:38:22 +00:00
}
}
componentWillReceiveProps(nextProps) {
if (this.props.group !== nextProps.group && !!nextProps.group) {
2020-04-28 06:33:58 +01:00
this.props.onSetGroup(nextProps.group)
2020-03-06 15:38:22 +00:00
}
2019-07-17 19:22:19 +01:00
}
2020-04-28 06:33:58 +01:00
handleCoverImageChange = (e) => {
try {
this.props.onCoverImageChange(e.target.files[0])
} catch (error) {
//
}
2019-07-17 19:22:19 +01:00
}
2020-04-28 06:33:58 +01:00
handleSubmit = (e) => {
2020-02-29 15:42:47 +00:00
e.preventDefault()
2020-05-14 21:45:39 +01:00
if (this.props.onClose) this.props.onClose()
2020-02-29 15:42:47 +00:00
this.props.onSubmit(this.context.router.history)
2019-07-17 19:22:19 +01:00
}
2020-02-29 15:42:47 +00:00
render() {
2020-03-05 15:44:17 +00:00
const {
2020-03-06 15:38:22 +00:00
group,
error,
2020-04-28 06:33:58 +01:00
titleValue,
descriptionValue,
2020-03-05 15:44:17 +00:00
coverImage,
2020-04-28 06:33:58 +01:00
intl,
onTitleChange,
onDescriptionChange,
isSubmitting,
onSubmit,
2020-03-05 15:44:17 +00:00
} = this.props
2019-07-17 19:22:19 +01:00
2020-03-06 15:38:22 +00:00
if (!group && error) {
return <ColumnIndicator type='missing' />
}
2019-07-17 19:22:19 +01:00
return (
2020-04-28 06:33:58 +01:00
<Form onSubmit={onSubmit}>
2020-03-05 15:44:17 +00:00
<Input
title={intl.formatMessage(messages.title)}
2020-04-28 06:33:58 +01:00
value={titleValue}
onChange={onTitleChange}
disabled={isSubmitting}
placeholder={intl.formatMessage(messages.titlePlaceholder)}
2020-03-05 15:44:17 +00:00
/>
2020-04-23 07:13:29 +01:00
<Divider isInvisible />
2020-03-05 15:44:17 +00:00
<Textarea
title={intl.formatMessage(messages.description)}
2020-04-28 06:33:58 +01:00
value={descriptionValue}
onChange={onDescriptionChange}
placeholder={intl.formatMessage(messages.descriptionPlaceholder)}
disabled={isSubmitting}
2020-03-05 15:44:17 +00:00
/>
2020-04-23 07:13:29 +01:00
<Divider isInvisible />
2020-03-05 15:44:17 +00:00
<FileInput
2020-04-28 06:33:58 +01:00
disabled={isSubmitting}
id='group-cover-photo'
2020-03-05 15:44:17 +00:00
title={intl.formatMessage(coverImage === null ? messages.coverImage : messages.coverImageChange)}
onChange={this.handleCoverImageChange}
file={group ? group.get('cover_image_url') : undefined}
2020-03-05 15:44:17 +00:00
width='340px'
height='145px'
isBordered
2020-03-05 15:44:17 +00:00
/>
2020-04-23 07:13:29 +01:00
<Divider isInvisible />
2020-03-05 15:44:17 +00:00
2020-04-28 06:33:58 +01:00
<Button
isDisabled={!titleValue || !descriptionValue && !isSubmitting}
onClick={this.handleSubmit}
>
<Text color='inherit' align='center'>
2020-03-06 15:38:22 +00:00
{intl.formatMessage(!!group ? messages.update : messages.create)}
2020-03-05 15:44:17 +00:00
</Text>
</Button>
2020-04-28 06:33:58 +01:00
</Form>
2020-02-29 15:42:47 +00:00
)
2019-07-17 19:22:19 +01:00
}
2019-07-02 08:10:25 +01:00
}