diff options
Diffstat (limited to 'webapp/components/reset_status_modal')
-rw-r--r-- | webapp/components/reset_status_modal/index.js | 34 | ||||
-rw-r--r-- | webapp/components/reset_status_modal/reset_status_modal.jsx | 142 |
2 files changed, 176 insertions, 0 deletions
diff --git a/webapp/components/reset_status_modal/index.js b/webapp/components/reset_status_modal/index.js new file mode 100644 index 000000000..34f08c7a5 --- /dev/null +++ b/webapp/components/reset_status_modal/index.js @@ -0,0 +1,34 @@ +// Copyright (c) 2017 Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import {connect} from 'react-redux'; +import {bindActionCreators} from 'redux'; + +import {Preferences} from 'mattermost-redux/constants'; +import {get} from 'mattermost-redux/selectors/entities/preferences'; + +import {savePreferences} from 'mattermost-redux/actions/preferences'; +import {setStatus} from 'mattermost-redux/actions/users'; +import {autoResetStatus} from 'actions/user_actions.jsx'; + +import ResetStatusModal from './reset_status_modal.jsx'; + +function mapStateToProps(state, ownProps) { + const {currentUserId} = state.entities.users; + return { + ...ownProps, + autoResetPref: get(state, Preferences.CATEGORY_AUTO_RESET_MANUAL_STATUS, currentUserId, '') + }; +} + +function mapDispatchToProps(dispatch) { + return { + actions: bindActionCreators({ + autoResetStatus, + setStatus, + savePreferences + }, dispatch) + }; +} + +export default connect(mapStateToProps, mapDispatchToProps)(ResetStatusModal); diff --git a/webapp/components/reset_status_modal/reset_status_modal.jsx b/webapp/components/reset_status_modal/reset_status_modal.jsx new file mode 100644 index 000000000..4a04d7561 --- /dev/null +++ b/webapp/components/reset_status_modal/reset_status_modal.jsx @@ -0,0 +1,142 @@ +// Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import ConfirmModal from 'components/confirm_modal.jsx'; + +import {toTitleCase} from 'utils/utils.jsx'; + +import React from 'react'; +import PropTypes from 'prop-types'; +import {FormattedMessage} from 'react-intl'; +import {Preferences} from 'mattermost-redux/constants'; + +export default class ResetStatusModal extends React.PureComponent { + static propTypes = { + + /* + * The user's preference for whether their status is automatically reset + */ + autoResetPref: PropTypes.string, + actions: PropTypes.shape({ + + /* + * Function to get and then reset the user's status if needed + */ + autoResetStatus: PropTypes.func.isRequired, + + /* + * Function to set the status for a user + */ + setStatus: PropTypes.func.isRequired, + + /* + * Function to save user preferences + */ + savePreferences: PropTypes.func.isRequired + }).isRequired + } + + constructor(props) { + super(props); + + this.state = { + show: false, + currentUserStatus: {} + }; + } + + componentDidMount() { + this.props.actions.autoResetStatus().then( + (status) => { + const statusIsManual = status.manual; + const autoResetPrefNotSet = this.props.autoResetPref === ''; + + this.setState({ + currentUserStatus: status, // Set in state until status refactor where we store 'manual' field in redux + show: Boolean(statusIsManual && autoResetPrefNotSet) + }); + } + ); + } + + onConfirm = (checked) => { + this.setState({show: false}); + + const newStatus = {...this.state.currentUserStatus}; + newStatus.status = 'online'; + this.props.actions.setStatus(newStatus); + + if (checked) { + const pref = {category: Preferences.CATEGORY_AUTO_RESET_MANUAL_STATUS, user_id: newStatus.user_id, name: newStatus.user_id, value: 'true'}; + this.props.actions.savePreferences(pref.user_id, [pref]); + } + } + + onCancel = (checked) => { + this.setState({show: false}); + + if (checked) { + const status = {...this.state.currentUserStatus}; + const pref = {category: Preferences.CATEGORY_AUTO_RESET_MANUAL_STATUS, user_id: status.user_id, name: status.user_id, value: 'false'}; + this.props.actions.savePreferences(pref.user_id, [pref]); + } + } + + render() { + const userStatus = toTitleCase(this.state.currentUserStatus.status || ''); + const manualStatusTitle = ( + <FormattedMessage + id='modal.manual_status.title' + defaultMessage='Your status is set to "{status}"' + values={{ + status: userStatus + }} + /> + ); + + const manualStatusMessage = ( + <FormattedMessage + id='modal.manual_status.message' + defaultMessage='Would you like to switch your status to "Online"?' + /> + ); + + const manualStatusButton = ( + <FormattedMessage + id='modal.manual_status.button' + defaultMessage='Yes, set my status to "Online"' + /> + ); + + const manualStatusCancel = ( + <FormattedMessage + id='modal.manual_status.cancel' + defaultMessage='No, keep it as "{status}"' + values={{ + status: userStatus + }} + /> + ); + + const manualStatusCheckbox = ( + <FormattedMessage + id='modal.manual_status.ask' + defaultMessage='Do not ask me again' + /> + ); + + return ( + <ConfirmModal + show={this.state.show} + title={manualStatusTitle} + message={manualStatusMessage} + confirmButtonText={manualStatusButton} + onConfirm={this.onConfirm} + cancelButtonText={manualStatusCancel} + onCancel={this.onCancel} + showCheckbox={true} + checkboxText={manualStatusCheckbox} + /> + ); + } +} |