refactor CustomizeScriptSetting

src/client/js/components/Admin/CustomScriptEditor.jsx

@@ -21,6 +21,7 @@ export default class CustomScriptEditor extends React.Component {
       <CodeMirror
         value={this.props.value}
         autoFocus
+        detach
         options={{
           mode: 'javascript',
           lineNumbers: true,

src/client/js/components/Admin/Customize/CustomizeCssSetting.jsx

@@ -44,7 +44,7 @@ class CustomizeCssSetting extends React.Component {
         <div className="form-group">
           <div className="col-xs-12">
             <CustomCssEditor
-              value={adminCustomizeContainer.state.currentCustomizeCss}
+              value={adminCustomizeContainer.state.currentCustomizeCss || ''}
               onChange={(inputValue) => { adminCustomizeContainer.changeCustomizeCss(inputValue) }}
             />
           </div>

src/client/js/components/Admin/Customize/CustomizeHeaderSetting.jsx

@@ -54,7 +54,7 @@ class CustomizeHeaderSetting extends React.Component {
 
         <div className="col-xs-12">
           <CustomHeaderEditor
-            value={adminCustomizeContainer.state.currentCustomizeHeader}
+            value={adminCustomizeContainer.state.currentCustomizeHeader || ''}
             onChange={(inputValue) => { adminCustomizeContainer.changeCustomizeHeader(inputValue) }}
           />
         </div>

src/client/js/components/Admin/Customize/CustomizeScriptSetting.jsx

@@ -2,8 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
-import loggerFactory from '@alias/logger';
-
 import { createSubscribedElement } from '../../UnstatedUtils';
 import { toastSuccess, toastError } from '../../../util/apiNotification';
 
@@ -13,25 +11,14 @@ import AdminCustomizeContainer from '../../../services/AdminCustomizeContainer';
 import AdminUpdateButtonRow from '../Common/AdminUpdateButtonRow';
 import CustomScriptEditor from '../CustomScriptEditor';
 
-const logger = loggerFactory('growi:customizeScript');
-
 class CustomizeScriptSetting extends React.Component {
 
   constructor(props) {
     super(props);
 
-    this.state = {
-      editorInputValue: '',
-    };
-
     this.onClickSubmit = this.onClickSubmit.bind(this);
   }
 
-  componentDidMount() {
-    const { customizeScript } = this.props.appContainer.getConfig();
-    this.setState({ editorInputValue: customizeScript || '' });
-  }
-
   async onClickSubmit() {
     const { t, adminCustomizeContainer } = this.props;
 
@@ -41,7 +28,6 @@ class CustomizeScriptSetting extends React.Component {
     }
     catch (err) {
       toastError(err);
-      logger.error(err);
     }
   }
 
@@ -89,8 +75,7 @@ class CustomizeScriptSetting extends React.Component {
         <div className="form-group">
           <div className="col-xs-12">
             <CustomScriptEditor
-              // The value passed must be immutable
-              value={this.state.editorInputValue}
+              value={adminCustomizeContainer.state.currentCustomizeScript || ''}
               onChange={(inputValue) => { adminCustomizeContainer.changeCustomizeScript(inputValue) }}
             />
           </div>

src/client/js/services/AdminCustomizeContainer.js

@@ -357,7 +357,7 @@ export default class AdminCustomizeContainer extends Container {
       });
       const { customizedParams } = response.data;
       this.setState({
-        customizeHeader: customizedParams.customizeHeader,
+        currentCustomizeHeader: customizedParams.customizeHeader,
       });
     }
     catch (err) {
@@ -377,7 +377,7 @@ export default class AdminCustomizeContainer extends Container {
       });
       const { customizedParams } = response.data;
       this.setState({
-        customizeCss: customizedParams.customizeCss,
+        currentCustomizeCss: customizedParams.customizeCss,
       });
     }
     catch (err) {
@@ -392,11 +392,19 @@ export default class AdminCustomizeContainer extends Container {
    * @return {string} Customize scripts
    */
   async updateCustomizeScript() {
-    const response = await this.appContainer.apiv3.put('/customize-setting/customize-script', {
-      customizeScript: this.state.currentCustomizeScript,
-    });
-    const { customizedParams } = response.data;
-    return customizedParams;
+    try {
+      const response = await this.appContainer.apiv3.put('/customize-setting/customize-script', {
+        customizeScript: this.state.currentCustomizeScript,
+      });
+      const { customizedParams } = response.data;
+      this.setState({
+        currentCustomizeScript: customizedParams.customizeScript,
+      });
+    }
+    catch (err) {
+      logger.error(err);
+      throw new Error('Failed to update data');
+    }
   }
 
 }