refactor client side

src/client/js/components/Admin/App/PluginSetting.jsx

@@ -7,6 +7,8 @@ import { createSubscribedElement } from '../../UnstatedUtils';
 import { toastSuccess, toastError } from '../../../util/apiNotification';
 
 import AppContainer from '../../../services/AppContainer';
+import AdminAppContainer from '../../../services/AdminAppContainer';
+import AdminUpdateButtonRow from '../Common/AdminUpdateButtonRow';
 
 // eslint-disable-next-line no-unused-vars
 const logger = loggerFactory('growi:app:pluginSetting');
@@ -16,21 +18,15 @@ class PluginSetting extends React.Component {
   constructor(props) {
     super(props);
 
-    this.state = {
-      // TODO GW-690 fetch from db
-      isEnabledPlugins: true,
-    };
-
-    this.onClickSubmit = this.onClickSubmit.bind(this);
-    this.switchIsEnabledPlugins = this.switchIsEnabledPlugins.bind(this);
+    this.submitHandler = this.submitHandler.bind(this);
   }
 
-  async onClickSubmit() {
-    const { t } = this.props;
+  async submitHandler() {
+    const { t, adminAppContainer } = this.props;
 
     try {
-      // TODO GW-690 post apiV3
-      toastSuccess(t('app_setting.update', { target: 'Plugin Setting' }));
+      await adminAppContainer.updatePluginSettingHandler();
+      toastSuccess(t('app_setting.updated_plugin_setting'));
     }
     catch (err) {
       toastError(err);
@@ -38,18 +34,12 @@ class PluginSetting extends React.Component {
     }
   }
 
-  switchIsEnabledPlugins() {
-    this.setState({ isEnabledPlugins: !this.state.isEnabledPlugins });
-  }
-
-
   render() {
-    const { t } = this.props;
+    const { t, adminAppContainer } = this.props;
 
     return (
       <React.Fragment>
-
-        <p className="well">{ t('app_setting.Enable plugin loading') }</p>
+        <p className="well">{t('app_setting.Enable plugin loading')}</p>
 
         <div className="row mb-5">
           <div className="col-xs-offset-3 col-xs-6 text-left">
@@ -57,22 +47,17 @@ class PluginSetting extends React.Component {
               <input
                 id="isEnabledPlugins"
                 type="checkbox"
-                checked={this.state.isEnabledPlugins}
-                onChange={this.switchIsEnabledPlugins}
+                checked={adminAppContainer.isEnabledPlugins}
+                onChange={(e) => {
+                  adminAppContainer.changeIsEnabledPlugins(e.target.checked);
+                }}
               />
-              <label htmlFor="isEnabledPlugins">
-                { t('app_setting.Load plugins') }
-              </label>
+              <label htmlFor="isEnabledPlugins">{t('app_setting.Load plugins')}</label>
             </div>
           </div>
         </div>
 
-        <div className="row my-3">
-          <div className="col-xs-offset-4 col-xs-5">
-            <div className="btn btn-primary" onClick={this.onClickSubmit}>{ t('Update') }</div>
-          </div>
-        </div>
-
+        <AdminUpdateButtonRow onClick={this.submitHandler} disabled={adminAppContainer.state.retrieveError != null} />
       </React.Fragment>
     );
   }
@@ -83,12 +68,13 @@ class PluginSetting extends React.Component {
  * Wrapper component for using unstated
  */
 const PluginSettingWrapper = (props) => {
-  return createSubscribedElement(PluginSetting, props, [AppContainer]);
+  return createSubscribedElement(PluginSetting, props, [AppContainer, AdminAppContainer]);
 };
 
 PluginSetting.propTypes = {
   t: PropTypes.func.isRequired, // i18next
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+  adminAppContainer: PropTypes.instanceOf(AdminAppContainer).isRequired,
 };
 
 export default withTranslation()(PluginSettingWrapper);

src/client/js/services/AdminAppContainer.js

@@ -36,6 +36,7 @@ export default class AdminAppContainer extends Container {
       bucket: '',
       accessKeyId: '',
       secretKey: '',
+      isEnabledPlugins: true,
     };
 
     this.changeTitle = this.changeTitle.bind(this);
@@ -53,10 +54,12 @@ export default class AdminAppContainer extends Container {
     this.changeBucket = this.changeBucket.bind(this);
     this.changeAccessKeyId = this.changeAccessKeyId.bind(this);
     this.changeSecretKey = this.changeSecretKey.bind(this);
+    this.changeIsEnabledPlugins = this.changeIsEnabledPlugins.bind(this);
     this.updateAppSettingHandler = this.updateAppSettingHandler.bind(this);
     this.updateSiteUrlSettingHandler = this.updateSiteUrlSettingHandler.bind(this);
     this.updateMailSettingHandler = this.updateMailSettingHandler.bind(this);
     this.updateAwsSettingHandler = this.updateAwsSettingHandler.bind(this);
+    this.updatePluginSettingHandler = this.updatePluginSettingHandler.bind(this);
   }
 
   /**
@@ -92,6 +95,7 @@ export default class AdminAppContainer extends Container {
         bucket: appSettingsParams.bucket,
         accessKeyId: appSettingsParams.accessKeyId,
         secretKey: appSettingsParams.secretKey,
+        isEnabledPlugins: appSettingsParams.isEnabledPlugins,
       });
 
     }
@@ -207,6 +211,13 @@ export default class AdminAppContainer extends Container {
     this.setState({ secretKey });
   }
 
+  /**
+   * Change secret key
+   */
+  changeIsEnabledPlugins(isEnabledPlugins) {
+    this.setState({ isEnabledPlugins });
+  }
+
   /**
    * Update app setting
    * @memberOf AdminAppContainer
@@ -271,4 +282,18 @@ export default class AdminAppContainer extends Container {
     return awsSettingParams;
   }
 
+  /**
+   * Update plugin setting
+   * @memberOf AdminAppContainer
+   * @return {Array} Appearance
+   */
+  async updatePluginSettingHandler() {
+    const response = await this.appContainer.apiv3.put('/app-settings/plugin-setting', {
+      isEnabledPlugins: this.state.isEnabledPlugins,
+    });
+    const { pluginSettingParams } = response.data;
+    return pluginSettingParams;
+  }
+
+
 }