Merge pull request #1733 from hmhealey/plt1437

PLT-1437 PreferenceStore api changes and fixing CreatePost warning

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'});
+        const tutorialStep = PreferenceStore.getInt(Preferences.TUTORIAL_STEP, UserStore.getCurrentId(), 999);
-        this.setState({showTutorialScreens: parseInt(tutorialPref.value, 10) <= TutorialSteps.INTRO_SCREENS});
+        this.setState({showTutorialScreens: tutorialStep <= TutorialSteps.INTRO_SCREENS});
     }
     onChannelChange() {
         this.setState({showPostFocus: ChannelStore.getPostMode() === ChannelStore.POST_MODE_FOCUS});

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) {

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;
         }

web/react/components/create_post.jsx

@@ -52,7 +52,6 @@ export default class CreatePost extends React.Component {
         PostStore.clearDraftUploads();
 
         const draft = this.getCurrentDraft();
-        const tutorialPref = PreferenceStore.getPreference(Preferences.TUTORIAL_STEP, UserStore.getCurrentId(), {value: '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.getPreference(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, 'send_on_ctrl_enter', {value: 'false'}).value,
+            ctrlSend: false,
-            showTutorialTip: parseInt(tutorialPref.value, 10) === TutorialSteps.POST_POPOVER
+            showTutorialTip: false
         };
-
-        PreferenceStore.addChangeListener(this.onPreferenceChange);
     }
     handleResize() {
         this.setState({
@@ -211,7 +208,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();
@@ -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);
@@ -333,10 +339,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,
+            showTutorialTip: tutorialStep === TutorialSteps.POST_POPOVER,
-            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')
         });
     }
     getFileCount(channelId) {
@@ -348,7 +354,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;
         }

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() {

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);

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
         };
     }
 

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());

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,

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);
 }

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));
     }
 

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;
+    const useMilitaryTime = PreferenceStore.getBool(Constants.Preferences.CATEGORY_DISPLAY_SETTINGS, 'use_military_time');
-    if (useMilitaryTime === 'false') {
+    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) {