diff options
author | Christopher Speller <crspeller@gmail.com> | 2016-03-14 08:50:46 -0400 |
---|---|---|
committer | Christopher Speller <crspeller@gmail.com> | 2016-03-16 18:02:55 -0400 |
commit | 12896bd23eeba79884245c1c29fdc568cf21a7fa (patch) | |
tree | 4e7f83d3e2564b9b89d669e9f7905ff11768b11a /webapp/components/edit_channel_purpose_modal.jsx | |
parent | 29fe6a3d13c9c7aa490fffebbe5d1b5fdf1e3090 (diff) | |
download | chat-12896bd23eeba79884245c1c29fdc568cf21a7fa.tar.gz chat-12896bd23eeba79884245c1c29fdc568cf21a7fa.tar.bz2 chat-12896bd23eeba79884245c1c29fdc568cf21a7fa.zip |
Converting to Webpack. Stage 1.
Diffstat (limited to 'webapp/components/edit_channel_purpose_modal.jsx')
-rw-r--r-- | webapp/components/edit_channel_purpose_modal.jsx | 188 |
1 files changed, 188 insertions, 0 deletions
diff --git a/webapp/components/edit_channel_purpose_modal.jsx b/webapp/components/edit_channel_purpose_modal.jsx new file mode 100644 index 000000000..31cbdd240 --- /dev/null +++ b/webapp/components/edit_channel_purpose_modal.jsx @@ -0,0 +1,188 @@ +// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import $ from 'jquery'; +import ReactDOM from 'react-dom'; +import * as AsyncClient from 'utils/async_client.jsx'; +import * as Client from 'utils/client.jsx'; +import Constants from 'utils/constants.jsx'; + +import {intlShape, injectIntl, defineMessages, FormattedMessage} from 'react-intl'; + +import {Modal} from 'react-bootstrap'; + +const holders = defineMessages({ + error: { + id: 'edit_channel_purpose_modal.error', + defaultMessage: 'This channel purpose is too long, please enter a shorter one' + } +}); + +import React from 'react'; + +export default class EditChannelPurposeModal extends React.Component { + constructor(props) { + super(props); + + this.handleHide = this.handleHide.bind(this); + this.handleSave = this.handleSave.bind(this); + + this.state = {serverError: ''}; + } + + componentDidUpdate() { + if (this.props.show) { + $(ReactDOM.findDOMNode(this.refs.purpose)).focus(); + } + } + + handleHide() { + this.setState({serverError: ''}); + + if (this.props.onModalDismissed) { + this.props.onModalDismissed(); + } + } + + handleSave() { + if (!this.props.channel) { + return; + } + + const data = { + channel_id: this.props.channel.id, + channel_purpose: ReactDOM.findDOMNode(this.refs.purpose).value.trim() + }; + + Client.updateChannelPurpose(data, + () => { + AsyncClient.getChannel(this.props.channel.id); + + this.handleHide(); + }, + (err) => { + if (err.id === 'api.context.invalid_param.app_error') { + this.setState({serverError: this.props.intl.formatMessage(holders.error)}); + } else { + this.setState({serverError: err.message}); + } + } + ); + } + + render() { + if (!this.props.show) { + return null; + } + + let serverError = null; + if (this.state.serverError) { + serverError = ( + <div className='form-group has-error'> + <br/> + <label className='control-label'>{this.state.serverError}</label> + </div> + ); + } + + let title = ( + <span> + <FormattedMessage + id='edit_channel_purpose_modal.title1' + defaultMessage='Edit Purpose' + /> + </span> + ); + if (this.props.channel.display_name) { + title = ( + <span> + <FormattedMessage + id='edit_channel_purpose_modal.title2' + defaultMessage='Edit Purpose for ' + /> + <span className='name'>{this.props.channel.display_name}</span> + </span> + ); + } + + let channelType = ( + <FormattedMessage + id='edit_channel_purpose_modal.channel' + defaultMessage='Channel' + /> + ); + if (this.props.channel.type === Constants.PRIVATE_CHANNEL) { + channelType = ( + <FormattedMessage + id='edit_channel_purpose_modal.group' + defaultMessage='Group' + /> + ); + } + + return ( + <Modal + className='modal-edit-channel-purpose' + ref='modal' + show={this.props.show} + onHide={this.handleHide} + > + <Modal.Header closeButton={true}> + <Modal.Title> + {title} + </Modal.Title> + </Modal.Header> + <Modal.Body> + <p> + <FormattedMessage + id='edit_channel_purpose_modal.body' + defaultMessage='Describe how this {type} should be used. This text appears in the channel list in the "More..." menu and helps others decide whether to join.' + values={{ + type: (channelType) + }} + /> + </p> + <textarea + ref='purpose' + className='form-control no-resize' + rows='6' + maxLength='128' + defaultValue={this.props.channel.purpose} + /> + {serverError} + </Modal.Body> + <Modal.Footer> + <button + type='button' + className='btn btn-default' + onClick={this.handleHide} + > + <FormattedMessage + id='edit_channel_purpose_modal.cancel' + defaultMessage='Cancel' + /> + </button> + <button + type='button' + className='btn btn-primary' + onClick={this.handleSave} + > + <FormattedMessage + id='edit_channel_purpose_modal.save' + defaultMessage='Save' + /> + </button> + </Modal.Footer> + </Modal> + ); + } +} + +EditChannelPurposeModal.propTypes = { + intl: intlShape.isRequired, + show: React.PropTypes.bool.isRequired, + channel: React.PropTypes.object, + onModalDismissed: React.PropTypes.func.isRequired +}; + +export default injectIntl(EditChannelPurposeModal);
\ No newline at end of file |