fix JS error when saving a custom theme vector (#6734)

3 files changed, 38 insertions, 23 deletions

diff --git a/webapp/actions/user_actions.jsx b/webapp/actions/user_actions.jsx
index 015c933bf..8814d5286 100644
--- a/webapp/actions/user_actions.jsx
+++ b/webapp/actions/user_actions.jsx
@@ -383,21 +383,18 @@ export function loadProfilesForDM() {
     }
 }
 
-export function saveTheme(teamId, theme, onSuccess, onError) {
+export function saveTheme(teamId, theme, cb) {
     const currentUserId = UserStore.getCurrentId();
-    savePreferences(currentUserId, [{
+    const preference = [{
         user_id: currentUserId,
         category: Preferences.CATEGORY_THEME,
         name: teamId,
         value: JSON.stringify(theme)
-    }])(dispatch, getState).then(
-        (data) => {
-            if (data && onSuccess) {
-                onThemeSaved(teamId, theme, onSuccess);
-            } else if (data == null && onError) {
-                const serverError = getState().requests.users.savePreferences.error;
-                onError({id: serverError.server_error_id, ...serverError});
-            }
+    }];
+
+    savePreferences(currentUserId, preference)(dispatch, getState).then(
+        () => {
+            onThemeSaved(teamId, theme, cb);
         }
     );
 }
diff --git a/webapp/components/user_settings/custom_theme_chooser.jsx b/webapp/components/user_settings/custom_theme_chooser.jsx
index a4e5f8937..7a90cc7df 100644
--- a/webapp/components/user_settings/custom_theme_chooser.jsx
+++ b/webapp/components/user_settings/custom_theme_chooser.jsx
@@ -106,6 +106,19 @@ const messages = defineMessages({
 const HEX_CODE_LENGTH = 7;
 
 class CustomThemeChooser extends React.Component {
+    constructor(props) {
+        super(props);
+        this.selectTheme = this.selectTheme.bind(this);
+
+        const copyTheme = Object.assign({}, this.props.theme);
+        delete copyTheme.type;
+        delete copyTheme.image;
+
+        this.state = {
+            copyTheme: JSON.stringify(copyTheme)
+        };
+    }
+
     componentDidMount() {
         $('.color-picker').colorpicker({
             format: 'hex'
@@ -144,9 +157,11 @@ class CustomThemeChooser extends React.Component {
         }
 
         const theme = this.props.theme;
-        theme[e.target.id] = e.color.toHex();
-        theme.type = 'custom';
-        this.props.updateTheme(theme);
+        if (theme[e.target.id] !== e.color.toHex()) {
+            theme[e.target.id] = e.color.toHex();
+            theme.type = 'custom';
+            this.props.updateTheme(theme);
+        }
     }
 
     pasteBoxChange = (e) => {
@@ -169,6 +184,10 @@ class CustomThemeChooser extends React.Component {
             return;
         }
 
+        this.setState({
+            copyTheme: JSON.stringify(theme)
+        });
+
         theme.type = 'custom';
         this.props.updateTheme(theme);
     }
@@ -177,6 +196,12 @@ class CustomThemeChooser extends React.Component {
         e.stopPropagation();
     }
 
+    selectTheme() {
+        const textarea = this.refs.textarea;
+        textarea.focus();
+        textarea.setSelectionRange(0, this.state.copyTheme.length);
+    }
+
     toggleSidebarStyles = (e) => {
         e.preventDefault();
 
@@ -346,10 +371,6 @@ class CustomThemeChooser extends React.Component {
             }
         });
 
-        const copyTheme = Object.assign({}, theme);
-        delete copyTheme.type;
-        delete copyTheme.image;
-
         const pasteBox = (
             <div className='col-sm-12'>
                 <label className='custom-label'>
@@ -359,10 +380,12 @@ class CustomThemeChooser extends React.Component {
                     />
                 </label>
                 <textarea
+                    ref='textarea'
                     className='form-control'
-                    value={JSON.stringify(copyTheme)}
+                    value={this.state.copyTheme}
                     onPaste={this.pasteBoxChange}
                     onChange={this.onChangeHandle}
+                    onClick={this.selectTheme}
                 />
             </div>
         );
diff --git a/webapp/components/user_settings/user_settings_theme.jsx b/webapp/components/user_settings/user_settings_theme.jsx
index 5730fe171..4f39cffa9 100644
--- a/webapp/components/user_settings/user_settings_theme.jsx
+++ b/webapp/components/user_settings/user_settings_theme.jsx
@@ -125,11 +125,6 @@ export default class ThemeSetting extends React.Component {
                 this.originalTheme = Object.assign({}, this.state.theme);
                 this.scrollToTop();
                 this.props.updateSection('');
-            },
-            (err) => {
-                var state = this.getStateFromStores();
-                state.serverError = err;
-                this.setState(state);
             }
         );
     }