PLT-3201 Code Theme Saves Upon Update (#3414)

* Ensured code theme saves properly

1 files changed, 19 insertions, 0 deletions

diff --git a/webapp/components/user_settings/custom_theme_chooser.jsx b/webapp/components/user_settings/custom_theme_chooser.jsx
index 560335379..b080c879d 100644
--- a/webapp/components/user_settings/custom_theme_chooser.jsx
+++ b/webapp/components/user_settings/custom_theme_chooser.jsx
@@ -108,15 +108,24 @@ class CustomThemeChooser extends React.Component {
         this.onPickerChange = this.onPickerChange.bind(this);
         this.pasteBoxChange = this.pasteBoxChange.bind(this);
         this.toggleContent = this.toggleContent.bind(this);
+        this.onCodeThemeChange = this.onCodeThemeChange.bind(this);
 
         this.state = {};
     }
+
     componentDidMount() {
         $('.color-picker').colorpicker({
             format: 'hex'
         });
         $('.color-picker').on('changeColor', this.onPickerChange);
+        $('.group--code').on('change', this.onCodeThemeChange);
+    }
+
+    componentWillUnmount() {
+        $('.color-picker').off('changeColor', this.onPickerChange);
+        $('.group--code').off('change', this.onCodeThemeChange);
     }
+
     componentDidUpdate() {
         const theme = this.props.theme;
         Constants.THEME_ELEMENTS.forEach((element) => {
@@ -126,6 +135,7 @@ class CustomThemeChooser extends React.Component {
             }
         });
     }
+
     onPickerChange(e) {
         const inputBox = e.target.childNodes[0];
         if (document.activeElement === inputBox && inputBox.value.length !== HEX_CODE_LENGTH) {
@@ -137,6 +147,7 @@ class CustomThemeChooser extends React.Component {
         theme.type = 'custom';
         this.props.updateTheme(theme);
     }
+
     pasteBoxChange(e) {
         const text = e.target.value;
 
@@ -162,6 +173,7 @@ class CustomThemeChooser extends React.Component {
 
         this.props.updateTheme(theme);
     }
+
     toggleContent(e) {
         e.stopPropagation();
         if ($(e.target).hasClass('theme-elements__header')) {
@@ -172,6 +184,13 @@ class CustomThemeChooser extends React.Component {
             $(e.target).closest('.theme-elements__header').toggleClass('open');
         }
     }
+
+    onCodeThemeChange(e) {
+        const theme = this.props.theme;
+        theme.codeTheme = e.target.value;
+        this.props.updateTheme(theme);
+    }
+
     render() {
         const {formatMessage} = this.props.intl;
         const theme = this.props.theme;