From e4899fa551d53ec07718659eed97178052982552 Mon Sep 17 00:00:00 2001 From: hmhealey Date: Tue, 15 Dec 2015 11:36:14 -0500 Subject: Improved PreferenceStore api when getting values --- web/react/components/center_panel.jsx | 8 ++-- web/react/components/channel_loader.jsx | 2 +- web/react/components/create_comment.jsx | 8 ++-- web/react/components/create_post.jsx | 16 +++---- web/react/components/edit_post_modal.jsx | 6 +-- web/react/components/posts_view.jsx | 4 +- web/react/components/sidebar.jsx | 6 +-- web/react/components/sidebar_header.jsx | 4 +- .../user_settings/user_settings_advanced.jsx | 2 +- web/react/pages/channel.jsx | 2 +- web/react/stores/preference_store.jsx | 49 ++++++++++++++++++++-- web/react/utils/utils.jsx | 8 ++-- 12 files changed, 79 insertions(+), 36 deletions(-) (limited to 'web') diff --git a/web/react/components/center_panel.jsx b/web/react/components/center_panel.jsx index a1043431d..7eef329c3 100644 --- a/web/react/components/center_panel.jsx +++ b/web/react/components/center_panel.jsx @@ -26,9 +26,9 @@ export default class CenterPanel extends React.Component { this.onPreferenceChange = this.onPreferenceChange.bind(this); this.onChannelChange = this.onChannelChange.bind(this); - const tutorialPref = PreferenceStore.getPreference(Preferences.TUTORIAL_STEP, UserStore.getCurrentId(), {value: '999'}); + const tutorialStep = PreferenceStore.getInt(Preferences.TUTORIAL_STEP, UserStore.getCurrentId(), 999); this.state = { - showTutorialScreens: parseInt(tutorialPref.value, 10) === TutorialSteps.INTRO_SCREENS, + showTutorialScreens: tutorialStep === TutorialSteps.INTRO_SCREENS, showPostFocus: ChannelStore.getPostMode() === ChannelStore.POST_MODE_FOCUS }; } @@ -41,8 +41,8 @@ export default class CenterPanel extends React.Component { ChannelStore.removeChangeListener(this.onChannelChange); } onPreferenceChange() { - const tutorialPref = PreferenceStore.getPreference(Preferences.TUTORIAL_STEP, UserStore.getCurrentId(), {value: '999'}); - this.setState({showTutorialScreens: parseInt(tutorialPref.value, 10) <= TutorialSteps.INTRO_SCREENS}); + const tutorialStep = PreferenceStore.getInt(Preferences.TUTORIAL_STEP, UserStore.getCurrentId(), 999); + this.setState({showTutorialScreens: tutorialStep <= TutorialSteps.INTRO_SCREENS}); } onChannelChange() { this.setState({showPostFocus: ChannelStore.getPostMode() === ChannelStore.POST_MODE_FOCUS}); diff --git a/web/react/components/channel_loader.jsx b/web/react/components/channel_loader.jsx index 0d1d9efd7..712d6885f 100644 --- a/web/react/components/channel_loader.jsx +++ b/web/react/components/channel_loader.jsx @@ -71,7 +71,7 @@ export default class ChannelLoader extends React.Component { } // if preferences have already been stored in local storage do not wait until preference store change is fired and handled in channel.jsx - const selectedFont = PreferenceStore.getPreference(Constants.Preferences.CATEGORY_DISPLAY_SETTINGS, 'selected_font', {value: Constants.DEFAULT_FONT}).value; + const selectedFont = PreferenceStore.get(Constants.Preferences.CATEGORY_DISPLAY_SETTINGS, 'selected_font', Constants.DEFAULT_FONT); Utils.applyFont(selectedFont); $('body').on('mouseenter mouseleave', '.post', function mouseOver(ev) { diff --git a/web/react/components/create_comment.jsx b/web/react/components/create_comment.jsx index b0f33eda1..c190b4dd8 100644 --- a/web/react/components/create_comment.jsx +++ b/web/react/components/create_comment.jsx @@ -47,7 +47,7 @@ export default class CreateComment extends React.Component { previews: draft.previews, submitting: false, windowWidth: Utils.windowWidth(), - ctrlSend: PreferenceStore.getPreference(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, 'send_on_ctrl_enter', {value: 'false'}).value + ctrlSend: PreferenceStore.getBool(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, 'send_on_ctrl_enter') }; } componentDidMount() { @@ -60,7 +60,7 @@ export default class CreateComment extends React.Component { } onPreferenceChange() { this.setState({ - ctrlSend: PreferenceStore.getPreference(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, 'send_on_ctrl_enter', {value: 'false'}).value + ctrlSend: PreferenceStore.getBool(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, 'send_on_ctrl_enter') }); } handleResize() { @@ -149,7 +149,7 @@ export default class CreateComment extends React.Component { this.setState({messageText: '', submitting: false, postError: null, previews: [], serverError: null}); } commentMsgKeyPress(e) { - if (this.state.ctrlSend === 'true' && e.ctrlKey || this.state.ctrlSend === 'false') { + if (this.state.ctrlSend && e.ctrlKey || !this.state.ctrlSend) { if (e.which === KeyCodes.ENTER && !e.shiftKey && !e.altKey) { e.preventDefault(); ReactDOM.findDOMNode(this.refs.textbox).blur(); @@ -173,7 +173,7 @@ export default class CreateComment extends React.Component { this.setState({messageText: messageText}); } handleKeyDown(e) { - if (this.state.ctrlSend === 'true' && e.keyCode === KeyCodes.ENTER && e.ctrlKey === true) { + if (this.state.ctrlSend && e.keyCode === KeyCodes.ENTER && e.ctrlKey === true) { this.commentMsgKeyPress(e); return; } diff --git a/web/react/components/create_post.jsx b/web/react/components/create_post.jsx index 89e984e27..e54f1016d 100644 --- a/web/react/components/create_post.jsx +++ b/web/react/components/create_post.jsx @@ -52,7 +52,7 @@ export default class CreatePost extends React.Component { PostStore.clearDraftUploads(); const draft = this.getCurrentDraft(); - const tutorialPref = PreferenceStore.getPreference(Preferences.TUTORIAL_STEP, UserStore.getCurrentId(), {value: '999'}); + const tutorialStep = PreferenceStore.getInt(Preferences.TUTORIAL_STEP, UserStore.getCurrentId(), 999); this.state = { channelId: ChannelStore.getCurrentId(), @@ -63,8 +63,8 @@ export default class CreatePost extends React.Component { initialText: draft.messageText, windowWidth: Utils.windowWidth(), windowHeight: Utils.windowHeight(), - ctrlSend: PreferenceStore.getPreference(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, 'send_on_ctrl_enter', {value: 'false'}).value, - showTutorialTip: parseInt(tutorialPref.value, 10) === TutorialSteps.POST_POPOVER + ctrlSend: PreferenceStore.getBool(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, 'send_on_ctrl_enter'), + showTutorialTip: tutorialStep === TutorialSteps.POST_POPOVER }; PreferenceStore.addChangeListener(this.onPreferenceChange); @@ -211,7 +211,7 @@ export default class CreatePost extends React.Component { ); } postMsgKeyPress(e) { - if (this.state.ctrlSend === 'true' && e.ctrlKey || this.state.ctrlSend === 'false') { + if (this.state.ctrlSend && e.ctrlKey || !this.state.ctrlSend) { if (e.which === KeyCodes.ENTER && !e.shiftKey && !e.altKey) { e.preventDefault(); ReactDOM.findDOMNode(this.refs.textbox).blur(); @@ -333,10 +333,10 @@ export default class CreatePost extends React.Component { } } onPreferenceChange() { - const tutorialPref = PreferenceStore.getPreference(Preferences.TUTORIAL_STEP, UserStore.getCurrentId(), {value: '999'}); + const tutorialStep = PreferenceStore.getInt(Preferences.TUTORIAL_STEP, UserStore.getCurrentId(), 999); this.setState({ - showTutorialTip: parseInt(tutorialPref.value, 10) === TutorialSteps.POST_POPOVER, - ctrlSend: PreferenceStore.getPreference(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, 'send_on_ctrl_enter', {value: 'false'}).value + showTutorialTip: tutorialStep === TutorialSteps.POST_POPOVER, + ctrlSend: PreferenceStore.getBool(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, 'send_on_ctrl_enter') }); } getFileCount(channelId) { @@ -348,7 +348,7 @@ export default class CreatePost extends React.Component { return draft.previews.length + draft.uploadsInProgress.length; } handleKeyDown(e) { - if (this.state.ctrlSend === 'true' && e.keyCode === KeyCodes.ENTER && e.ctrlKey === true) { + if (this.state.ctrlSend && e.keyCode === KeyCodes.ENTER && e.ctrlKey === true) { this.postMsgKeyPress(e); return; } diff --git a/web/react/components/edit_post_modal.jsx b/web/react/components/edit_post_modal.jsx index be57fe7c3..e4e77a943 100644 --- a/web/react/components/edit_post_modal.jsx +++ b/web/react/components/edit_post_modal.jsx @@ -58,7 +58,7 @@ export default class EditPostModal extends React.Component { this.setState({editText: editMessage}); } handleEditKeyPress(e) { - if (this.state.ctrlSend === 'false' && e.which === KeyCodes.ENTER && !e.shiftKey && !e.altKey) { + if (!this.state.ctrlSend && e.which === KeyCodes.ENTER && !e.shiftKey && !e.altKey) { e.preventDefault(); ReactDOM.findDOMNode(this.refs.editbox).blur(); this.handleEdit(e); @@ -80,13 +80,13 @@ export default class EditPostModal extends React.Component { $(ReactDOM.findDOMNode(this.refs.modal)).modal('show'); } handleKeyDown(e) { - if (this.state.ctrlSend === 'true' && e.keyCode === KeyCodes.ENTER && e.ctrlKey === true) { + if (this.state.ctrlSend && e.keyCode === KeyCodes.ENTER && e.ctrlKey === true) { this.handleEdit(e); } } onPreferenceChange() { this.setState({ - ctrlSend: PreferenceStore.getPreference(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, 'send_on_ctrl_enter', {value: 'false'}).value + ctrlSend: PreferenceStore.getBool(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, 'send_on_ctrl_enter') }); } componentDidMount() { diff --git a/web/react/components/posts_view.jsx b/web/react/components/posts_view.jsx index cc4f5e138..e116fdeea 100644 --- a/web/react/components/posts_view.jsx +++ b/web/react/components/posts_view.jsx @@ -26,7 +26,7 @@ export default class PostsView extends React.Component { this.wasAtBottom = true; this.scrollHeight = 0; - this.state = {displayNameType: PreferenceStore.getPreference(Preferences.CATEGORY_DISPLAY_SETTINGS, 'name_format', {value: 'false'}).value}; + this.state = {displayNameType: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, 'name_format', 'false')}; } static get SCROLL_TYPE_FREE() { return 1; @@ -44,7 +44,7 @@ export default class PostsView extends React.Component { return 5; } updateState() { - this.setState({displayNameType: PreferenceStore.getPreference(Preferences.CATEGORY_DISPLAY_SETTINGS, 'name_format', {value: 'false'}).value}); + this.setState({displayNameType: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, 'name_format', 'false')}); } isAtBottom() { return ((this.refs.postlist.scrollHeight - this.refs.postlist.scrollTop) === this.refs.postlist.clientHeight); diff --git a/web/react/components/sidebar.jsx b/web/react/components/sidebar.jsx index 8393440cb..22056bf29 100644 --- a/web/react/components/sidebar.jsx +++ b/web/react/components/sidebar.jsx @@ -79,7 +79,7 @@ export default class Sidebar extends React.Component { const publicChannels = channels.filter((channel) => channel.type === Constants.OPEN_CHANNEL); const privateChannels = channels.filter((channel) => channel.type === Constants.PRIVATE_CHANNEL); - const preferences = PreferenceStore.getPreferences(Constants.Preferences.CATEGORY_DIRECT_CHANNEL_SHOW); + const preferences = PreferenceStore.getCategory(Constants.Preferences.CATEGORY_DIRECT_CHANNEL_SHOW); const directChannels = []; for (const preference of preferences) { @@ -113,7 +113,7 @@ export default class Sidebar extends React.Component { const hiddenDirectChannelCount = UserStore.getActiveOnlyProfileList(true).length - directChannels.length; - const tutorialPref = PreferenceStore.getPreference(Preferences.TUTORIAL_STEP, UserStore.getCurrentId(), {value: '999'}); + const tutorialStep = PreferenceStore.getInt(Preferences.TUTORIAL_STEP, UserStore.getCurrentId(), 999); return { activeId: currentChannelId, @@ -123,7 +123,7 @@ export default class Sidebar extends React.Component { directChannels, hiddenDirectChannelCount, unreadCounts: JSON.parse(JSON.stringify(ChannelStore.getUnreadCounts())), - showTutorialTip: parseInt(tutorialPref.value, 10) === TutorialSteps.CHANNEL_POPOVER + showTutorialTip: tutorialStep === TutorialSteps.CHANNEL_POPOVER }; } diff --git a/web/react/components/sidebar_header.jsx b/web/react/components/sidebar_header.jsx index 20f4fd511..a9616cfc3 100644 --- a/web/react/components/sidebar_header.jsx +++ b/web/react/components/sidebar_header.jsx @@ -31,9 +31,9 @@ export default class SidebarHeader extends React.Component { PreferenceStore.removeChangeListener(this.onPreferenceChange); } getStateFromStores() { - const tutorialPref = PreferenceStore.getPreference(Preferences.TUTORIAL_STEP, UserStore.getCurrentId(), {value: '999'}); + const tutorialStep = PreferenceStore.getInt(Preferences.TUTORIAL_STEP, UserStore.getCurrentId(), 999); - return {showTutorialTip: parseInt(tutorialPref.value, 10) === TutorialSteps.MENU_POPOVER}; + return {showTutorialTip: tutorialStep === TutorialSteps.MENU_POPOVER}; } onPreferenceChange() { this.setState(this.getStateFromStores()); diff --git a/web/react/components/user_settings/user_settings_advanced.jsx b/web/react/components/user_settings/user_settings_advanced.jsx index c15936ccd..d4bd00bb5 100644 --- a/web/react/components/user_settings/user_settings_advanced.jsx +++ b/web/react/components/user_settings/user_settings_advanced.jsx @@ -18,7 +18,7 @@ export default class AdvancedSettingsDisplay extends React.Component { this.saveEnabledFeatures = this.saveEnabledFeatures.bind(this); const preReleaseFeaturesKeys = Object.keys(PreReleaseFeatures); - const advancedSettings = PreferenceStore.getPreferences(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS); + const advancedSettings = PreferenceStore.getCategory(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS); const settings = { send_on_ctrl_enter: PreferenceStore.getPreference( Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, diff --git a/web/react/pages/channel.jsx b/web/react/pages/channel.jsx index 2122c729e..ffe232ab6 100644 --- a/web/react/pages/channel.jsx +++ b/web/react/pages/channel.jsx @@ -27,7 +27,7 @@ import * as EventHelpers from '../dispatcher/event_helpers.jsx'; import Constants from '../utils/constants.jsx'; function onPreferenceChange() { - const selectedFont = PreferenceStore.getPreference(Constants.Preferences.CATEGORY_DISPLAY_SETTINGS, 'selected_font', {value: Constants.DEFAULT_FONT}).value; + const selectedFont = PreferenceStore.get(Constants.Preferences.CATEGORY_DISPLAY_SETTINGS, 'selected_font', Constants.DEFAULT_FONT); Utils.applyFont(selectedFont); PreferenceStore.removeChangeListener(onPreferenceChange); } diff --git a/web/react/stores/preference_store.jsx b/web/react/stores/preference_store.jsx index 543129aca..79eab4fe1 100644 --- a/web/react/stores/preference_store.jsx +++ b/web/react/stores/preference_store.jsx @@ -23,8 +23,11 @@ class PreferenceStoreClass extends EventEmitter { super(); this.getAllPreferences = this.getAllPreferences.bind(this); + this.get = this.get.bind(this); + this.getBool = this.getBool.bind(this); + this.getInt = this.getInt.bind(this); this.getPreference = this.getPreference.bind(this); - this.getPreferences = this.getPreferences.bind(this); + this.getCategory = this.getCategory.bind(this); this.getPreferencesWhere = this.getPreferencesWhere.bind(this); this.setAllPreferences = this.setAllPreferences.bind(this); this.setPreference = this.setPreference.bind(this); @@ -41,11 +44,51 @@ class PreferenceStoreClass extends EventEmitter { return new Map(BrowserStore.getItem('preferences', [])); } - getPreference(category, name, defaultValue = '') { + get(category, name, defaultValue = '') { + const preference = this.getAllPreferences().get(getPreferenceKey(category, name)); + + if (!preference) { + return defaultValue; + } + + return preference.value || defaultValue; + } + + getBool(category, name, defaultValue = false) { + const preference = this.getAllPreferences().get(getPreferenceKey(category, name)); + + if (!preference) { + return defaultValue; + } + + // prevent a non-false default value from being returned instead of an actual false value + if (preference.value === 'false') { + return false; + } + + return (preference.value !== 'false') || defaultValue; + } + + getInt(category, name, defaultValue = 0) { + const preference = this.getAllPreferences().get(getPreferenceKey(category, name)); + + if (!preference) { + return defaultValue; + } + + // prevent a non-zero default value from being returned instead of an actual 0 value + if (preference.value === '0') { + return 0; + } + + return parseInt(preference.value, 10) || defaultValue; + } + + getPreference(category, name, defaultValue = {}) { return this.getAllPreferences().get(getPreferenceKey(category, name)) || defaultValue; } - getPreferences(category) { + getCategory(category) { return this.getPreferencesWhere((preference) => (preference.category === category)); } diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx index fb8b89252..b12ce5881 100644 --- a/web/react/utils/utils.jsx +++ b/web/react/utils/utils.jsx @@ -196,8 +196,8 @@ export function displayTime(ticks) { minutes = '0' + minutes; } - const useMilitaryTime = PreferenceStore.getPreference(Constants.Preferences.CATEGORY_DISPLAY_SETTINGS, 'use_military_time', {value: 'false'}).value; - if (useMilitaryTime === 'false') { + const useMilitaryTime = PreferenceStore.getBool(Constants.Preferences.CATEGORY_DISPLAY_SETTINGS, 'use_military_time'); + if (!useMilitaryTime) { ampm = ' AM'; if (hours >= 12) { ampm = ' PM'; @@ -1001,7 +1001,7 @@ export function getDisplayName(user) { export function displayUsername(userId) { const user = UserStore.getProfile(userId); - const nameFormat = PreferenceStore.getPreference(Constants.Preferences.CATEGORY_DISPLAY_SETTINGS, 'name_format', {value: 'false'}).value; + const nameFormat = PreferenceStore.get(Constants.Preferences.CATEGORY_DISPLAY_SETTINGS, 'name_format', 'false'); let username = ''; if (user) { @@ -1253,7 +1253,7 @@ export function getPostTerm(post) { } export function isFeatureEnabled(feature) { - return PreferenceStore.getPreference(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, Constants.FeatureTogglePrefix + feature.label, {value: 'false'}).value === 'true'; + return PreferenceStore.getBool(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, Constants.FeatureTogglePrefix + feature.label); } export function isSystemMessage(post) { -- cgit v1.2.3-1-g7c22 From 23af326af20cffef59ac8859e7def38f744a452b Mon Sep 17 00:00:00 2001 From: hmhealey Date: Tue, 15 Dec 2015 11:47:52 -0500 Subject: Stopped CreatePost from responding to PreferenceStore changes before it gets mounted --- web/react/components/create_post.jsx | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) (limited to 'web') diff --git a/web/react/components/create_post.jsx b/web/react/components/create_post.jsx index e54f1016d..e901b272a 100644 --- a/web/react/components/create_post.jsx +++ b/web/react/components/create_post.jsx @@ -52,7 +52,6 @@ export default class CreatePost extends React.Component { PostStore.clearDraftUploads(); const draft = this.getCurrentDraft(); - const tutorialStep = PreferenceStore.getInt(Preferences.TUTORIAL_STEP, UserStore.getCurrentId(), 999); this.state = { channelId: ChannelStore.getCurrentId(), @@ -63,11 +62,9 @@ export default class CreatePost extends React.Component { initialText: draft.messageText, windowWidth: Utils.windowWidth(), windowHeight: Utils.windowHeight(), - ctrlSend: PreferenceStore.getBool(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, 'send_on_ctrl_enter'), - showTutorialTip: tutorialStep === TutorialSteps.POST_POPOVER + ctrlSend: false, + showTutorialTip: false }; - - PreferenceStore.addChangeListener(this.onPreferenceChange); } handleResize() { this.setState({ @@ -313,6 +310,15 @@ export default class CreatePost extends React.Component { this.setState({previews, uploadsInProgress}); } + componentWillMount() { + const tutorialStep = PreferenceStore.getInt(Preferences.TUTORIAL_STEP, UserStore.getCurrentId(), 999); + + // wait to load these since they may have changed since the component was constructed (particularly in the case of skipping the tutorial) + this.setState({ + ctrlSend: PreferenceStore.getBool(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, 'send_on_ctrl_enter'), + showTutorialTip: tutorialStep === TutorialSteps.POST_POPOVER + }); + } componentDidMount() { ChannelStore.addChangeListener(this.onChange); PreferenceStore.addChangeListener(this.onPreferenceChange); -- cgit v1.2.3-1-g7c22