// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See License.txt for license information. import $ from 'jquery'; import SettingItemMin from '../setting_item_min.jsx'; import SettingItemMax from '../setting_item_max.jsx'; import ManageLanguages from './manage_languages.jsx'; import ThemeSetting from './user_settings_theme.jsx'; import PreferenceStore from 'stores/preference_store.jsx'; import UserStore from 'stores/user_store.jsx'; import * as Utils from 'utils/utils.jsx'; import * as I18n from 'i18n/i18n.jsx'; import {savePreferences} from 'actions/user_actions.jsx'; import Constants from 'utils/constants.jsx'; const Preferences = Constants.Preferences; import {FormattedMessage} from 'react-intl'; function getDisplayStateFromStores() { return { militaryTime: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, 'use_military_time', 'false'), nameFormat: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, 'name_format', 'username'), selectedFont: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, 'selected_font', Constants.DEFAULT_FONT), channelDisplayMode: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.CHANNEL_DISPLAY_MODE, Preferences.CHANNEL_DISPLAY_MODE_DEFAULT), messageDisplay: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.MESSAGE_DISPLAY, Preferences.MESSAGE_DISPLAY_DEFAULT), collapseDisplay: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.COLLAPSE_DISPLAY, Preferences.COLLAPSE_DISPLAY_DEFAULT) }; } import React from 'react'; import PropTypes from 'prop-types'; export default class UserSettingsDisplay extends React.Component { constructor(props) { super(props); this.handleSubmit = this.handleSubmit.bind(this); this.handleClockRadio = this.handleClockRadio.bind(this); this.handleNameRadio = this.handleNameRadio.bind(this); this.handleFont = this.handleFont.bind(this); this.updateSection = this.updateSection.bind(this); this.updateState = this.updateState.bind(this); this.createCollapseSection = this.createCollapseSection.bind(this); this.state = getDisplayStateFromStores(); } componentWillUnmount() { Utils.applyFont(PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, 'selected_font', Constants.DEFAULT_FONT)); } handleSubmit() { const userId = UserStore.getCurrentId(); const timePreference = { user_id: userId, category: Preferences.CATEGORY_DISPLAY_SETTINGS, name: 'use_military_time', value: this.state.militaryTime }; const namePreference = { user_id: userId, category: Preferences.CATEGORY_DISPLAY_SETTINGS, name: 'name_format', value: this.state.nameFormat }; const fontPreference = { user_id: userId, category: Preferences.CATEGORY_DISPLAY_SETTINGS, name: 'selected_font', value: this.state.selectedFont }; const channelDisplayModePreference = { user_id: userId, category: Preferences.CATEGORY_DISPLAY_SETTINGS, name: Preferences.CHANNEL_DISPLAY_MODE, value: this.state.channelDisplayMode }; const messageDisplayPreference = { user_id: userId, category: Preferences.CATEGORY_DISPLAY_SETTINGS, name: Preferences.MESSAGE_DISPLAY, value: this.state.messageDisplay }; const collapseDisplayPreference = { user_id: userId, category: Preferences.CATEGORY_DISPLAY_SETTINGS, name: Preferences.COLLAPSE_DISPLAY, value: this.state.collapseDisplay }; savePreferences([timePreference, namePreference, fontPreference, channelDisplayModePreference, messageDisplayPreference, collapseDisplayPreference], () => { this.updateSection(''); } ); } handleClockRadio(militaryTime) { this.setState({militaryTime}); } handleNameRadio(nameFormat) { this.setState({nameFormat}); } handleChannelDisplayModeRadio(channelDisplayMode) { this.setState({channelDisplayMode}); } handlemessageDisplayRadio(messageDisplay) { this.setState({messageDisplay}); } handleFont(selectedFont) { Utils.applyFont(selectedFont); this.setState({selectedFont}); } handleCollapseRadio(collapseDisplay) { this.setState({collapseDisplay}); } updateSection(section) { if ($('.section-max').length) { $('.settings-modal .modal-body').scrollTop(0).perfectScrollbar('update'); } this.updateState(); this.props.updateSection(section); } updateState() { const newState = getDisplayStateFromStores(); if (!Utils.areObjectsEqual(newState, this.state)) { this.handleFont(newState.selectedFont); this.setState(newState); } } createCollapseSection() { if (this.props.activeSection === 'collapse') { const collapseFormat = [false, false]; if (this.state.collapseDisplay === 'false') { collapseFormat[0] = true; } else { collapseFormat[1] = true; } const handleUpdateCollapseSection = (e) => { this.updateSection(''); e.preventDefault(); }; const inputs = [



]; return ( } inputs={inputs} submit={this.handleSubmit} server_error={this.state.serverError} updateSection={handleUpdateCollapseSection} /> ); } let describe; if (this.state.collapseDisplay === 'false') { describe = ( ); } else { describe = ( ); } const handleUpdateCollapseSection = () => { this.props.updateSection('collapse'); }; return ( } describe={describe} updateSection={handleUpdateCollapseSection} /> ); } render() { const serverError = this.state.serverError || null; let clockSection; let nameFormatSection; let channelDisplayModeSection; let fontSection; let languagesSection; let messageDisplaySection; const collapseSection = this.createCollapseSection(); if (this.props.activeSection === 'clock') { const clockFormat = [false, false]; if (this.state.militaryTime === 'true') { clockFormat[1] = true; } else { clockFormat[0] = true; } const handleUpdateClockSection = (e) => { this.updateSection(''); e.preventDefault(); }; const inputs = [



]; clockSection = ( } inputs={inputs} submit={this.handleSubmit} server_error={serverError} updateSection={handleUpdateClockSection} /> ); } else { let describe; if (this.state.militaryTime === 'true') { describe = ( ); } else { describe = ( ); } const handleUpdateClockSection = () => { this.props.updateSection('clock'); }; clockSection = ( } describe={describe} updateSection={handleUpdateClockSection} /> ); } const showUsername = ( ); const showNickname = ( ); const showFullName = ( ); if (this.props.activeSection === 'name_format') { const nameFormat = [false, false, false]; if (this.state.nameFormat === 'nickname_full_name') { nameFormat[0] = true; } else if (this.state.nameFormat === 'full_name') { nameFormat[2] = true; } else { nameFormat[1] = true; } const inputs = [




]; nameFormatSection = ( } inputs={inputs} submit={this.handleSubmit} server_error={serverError} updateSection={(e) => { this.updateSection(''); e.preventDefault(); }} /> ); } else { let describe; if (this.state.nameFormat === 'username') { describe = ( ); } else if (this.state.nameFormat === 'full_name') { describe = ( ); } else { describe = ( ); } nameFormatSection = ( } describe={describe} updateSection={() => { this.props.updateSection('name_format'); }} /> ); } if (this.props.activeSection === Preferences.MESSAGE_DISPLAY) { const messageDisplay = [false, false]; if (this.state.messageDisplay === Preferences.MESSAGE_DISPLAY_CLEAN) { messageDisplay[0] = true; } else { messageDisplay[1] = true; } const inputs = [



]; messageDisplaySection = ( } inputs={inputs} submit={this.handleSubmit} server_error={serverError} updateSection={(e) => { this.updateSection(''); e.preventDefault(); }} /> ); } else { let describe; if (this.state.messageDisplay === Preferences.MESSAGE_DISPLAY_CLEAN) { describe = ( ); } else { describe = ( ); } messageDisplaySection = ( } describe={describe} updateSection={() => { this.props.updateSection(Preferences.MESSAGE_DISPLAY); }} /> ); } if (this.props.activeSection === Preferences.CHANNEL_DISPLAY_MODE) { const channelDisplayMode = [false, false]; if (this.state.channelDisplayMode === Preferences.CHANNEL_DISPLAY_MODE_FULL_SCREEN) { channelDisplayMode[0] = true; } else { channelDisplayMode[1] = true; } const inputs = [



]; channelDisplayModeSection = ( } inputs={inputs} submit={this.handleSubmit} server_error={serverError} updateSection={(e) => { this.updateSection(''); e.preventDefault(); }} /> ); } else { let describe; if (this.state.channelDisplayMode === Preferences.CHANNEL_DISPLAY_MODE_FULL_SCREEN) { describe = ( ); } else { describe = ( ); } channelDisplayModeSection = ( } describe={describe} updateSection={() => { this.props.updateSection(Preferences.CHANNEL_DISPLAY_MODE); }} /> ); } if (this.props.activeSection === 'font') { const options = []; Object.keys(Constants.FONTS).forEach((fontName, idx) => { const className = Constants.FONTS[fontName]; options.push( ); }); const inputs = [

]; fontSection = ( } inputs={inputs} submit={this.handleSubmit} server_error={serverError} updateSection={(e) => { this.updateSection(''); e.preventDefault(); }} /> ); } else { fontSection = ( } describe={this.state.selectedFont} updateSection={() => { this.props.updateSection('font'); }} /> ); } const userLocale = this.props.user.locale; if (this.props.activeSection === 'languages') { if (!I18n.isLanguageAvailable(userLocale)) { this.props.user.locale = global.window.mm_config.DefaultClientLocale; } languagesSection = ( { this.updateSection(''); e.preventDefault(); }} /> ); } else { let locale; if (I18n.isLanguageAvailable(userLocale)) { locale = I18n.getLanguageInfo(userLocale).name; } else { locale = I18n.getLanguageInfo(global.window.mm_config.DefaultClientLocale).name; } languagesSection = ( } width='medium' describe={locale} updateSection={() => { this.updateSection('languages'); }} /> ); } return (

{fontSection}
{clockSection}
{nameFormatSection}
{collapseSection}
{messageDisplaySection}
{channelDisplayModeSection}
{languagesSection}
); } } UserSettingsDisplay.propTypes = { user: PropTypes.object, updateSection: PropTypes.func, updateTab: PropTypes.func, activeSection: PropTypes.string, closeModal: PropTypes.func.isRequired, collapseModal: PropTypes.func.isRequired, setRequireConfirm: PropTypes.func.isRequired, setEnforceFocus: PropTypes.func.isRequired };