manage state of adminAppContainer

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

@@ -16,35 +16,15 @@ class AppSetting extends React.Component {
   constructor(props) {
     super(props);
 
-    const { adminAppContainer } = this.props;
-
-    this.state = {
-      title: adminAppContainer.state.title,
-      confidential: adminAppContainer.state.confidential,
-      globalLang: adminAppContainer.state.globalLang,
-      fileUpload: adminAppContainer.state.fileUpload,
-    };
-
     this.submitHandler = this.submitHandler.bind(this);
-    this.inputTitleChangeHandler = this.inputTitleChangeHandler.bind(this);
-    this.inputConfidentialChangeHandler = this.inputConfidentialChangeHandler.bind(this);
-    this.inputGlobalLangChangeHandler = this.inputGlobalLangChangeHandler.bind(this);
-    this.inputFileUploadChangeHandler = this.inputFileUploadChangeHandler.bind(this);
   }
 
   async submitHandler() {
-    const { t } = this.props;
-
-    const params = {
-      title: this.state.title,
-      confidential: this.state.confidential,
-      globalLang: this.state.globalLang,
-      fileUpload: this.state.fileUpload,
-    };
+    const { t, adminAppContainer } = this.props;
 
     try {
-      await this.props.appContainer.apiv3.put('/app-settings/app-setting', params);
-      toastSuccess(t('Updated app setting'));
+      await adminAppContainer.updateAppSettingHandler();
+      toastSuccess(t('app_setting.updated_app_setting'));
     }
     catch (err) {
       toastError(err);
@@ -52,24 +32,8 @@ class AppSetting extends React.Component {
     }
   }
 
-  inputTitleChangeHandler(event) {
-    this.setState({ title: event.target.value });
-  }
-
-  inputConfidentialChangeHandler(event) {
-    this.setState({ confidential: event.target.value });
-  }
-
-  inputGlobalLangChangeHandler(event) {
-    this.setState({ globalLang: event.target.value });
-  }
-
-  inputFileUploadChangeHandler(event) {
-    this.setState({ fileUpload: event.target.checked });
-  }
-
   render() {
-    const { t } = this.props;
+    const { t, adminAppContainer } = this.props;
 
     return (
       <React.Fragment>
@@ -83,8 +47,8 @@ class AppSetting extends React.Component {
                   id="settingForm[app:title]"
                   type="text"
                   name="title"
-                  value={this.state.title}
-                  onChange={this.inputTitleChangeHandler}
+                  defaultValue={adminAppContainer.state.title}
+                  onChange={(e) => { adminAppContainer.changeTitle(e.target.value) }}
                   placeholder="GROWI"
                 />
                 <p className="help-block">{t('app_setting.sitename_change')}</p>
@@ -103,8 +67,8 @@ class AppSetting extends React.Component {
                   id="settingForm[app:confidential]"
                   type="text"
                   name="confidential"
-                  value={this.state.confidential}
-                  onChange={this.inputConfidentialChangeHandler}
+                  defaultValue={adminAppContainer.state.confidential}
+                  onChange={(e) => { adminAppContainer.changeConfidential(e.target.value) }}
                   placeholder={t('app_setting.ex) internal use only')}
                 />
                 <p className="help-block">{t('app_setting.header_content')}</p>
@@ -122,8 +86,8 @@ class AppSetting extends React.Component {
                 id="radioLangEn"
                 name="globalLang"
                 value="en-US"
-                checked={this.state.globalLang === 'en-US'}
-                onClick={this.inputGlobalLangChangeHandler}
+                checked={adminAppContainer.state.globalLang === 'en-US'}
+                onClick={(e) => { adminAppContainer.changeGlobalLang(e.target.value) }}
               />
               <label htmlFor="radioLangEn">{t('English')}</label>
             </div>
@@ -133,8 +97,8 @@ class AppSetting extends React.Component {
                 id="radioLangJa"
                 name="globalLang"
                 value="ja"
-                checked={this.state.globalLang === 'ja'}
-                onClick={this.inputGlobalLangChangeHandler}
+                checked={adminAppContainer.state.globalLang === 'ja'}
+                onClick={(e) => { adminAppContainer.changeGlobalLang(e.target.value) }}
               />
               <label htmlFor="radioLangJa">{t('Japanese')}</label>
             </div>
@@ -147,7 +111,13 @@ class AppSetting extends React.Component {
               <label className="col-xs-3 control-label">{t('app_setting.File Uploading')}</label>
               <div className="col-xs-6">
                 <div className="checkbox checkbox-info">
-                  <input type="checkbox" id="cbFileUpload" name="fileUpload" checked={this.state.fileUpload} onChange={this.inputFileUploadChangeHandler} />
+                  <input
+                    type="checkbox"
+                    id="cbFileUpload"
+                    name="fileUpload"
+                    checked={adminAppContainer.state.fileUpload}
+                    onChange={(e) => { adminAppContainer.changeFileUpload(e.target.checked) }}
+                  />
                   <label htmlFor="cbFileUpload">{t('app_setting.enable_files_except_image')}</label>
                 </div>
 

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

@@ -16,27 +16,14 @@ class SiteUrlSetting extends React.Component {
   constructor(props) {
     super(props);
 
-    const { adminAppContainer } = this.props;
-
-    this.state = {
-      siteUrl: adminAppContainer.state.siteUrl,
-      envSiteUrl: adminAppContainer.state.envSiteUrl,
-      isSetSiteUrl: adminAppContainer.state.isSetSiteUrl,
-    };
-
     this.submitHandler = this.submitHandler.bind(this);
-    this.inputSiteUrlChangeHandler = this.inputSiteUrlChangeHandler.bind(this);
   }
 
   async submitHandler() {
-    const { t } = this.props;
-
-    const params = {
-      siteUrl: this.state.siteUrl,
-    };
+    const { t, adminAppContainer } = this.props;
 
     try {
-      await this.props.appContainer.apiv3.put('/app-settings/site-url-setting', params);
+      await adminAppContainer.updateSiteUrlSettingHandler();
       toastSuccess(t('app_setting.updated_site_url'));
     }
     catch (err) {
@@ -45,17 +32,13 @@ class SiteUrlSetting extends React.Component {
     }
   }
 
-  inputSiteUrlChangeHandler(event) {
-    this.setState({ siteUrl: event.target.value });
-  }
-
   render() {
-    const { t } = this.props;
+    const { t, adminAppContainer } = this.props;
 
     return (
       <React.Fragment>
         <p className="well">{t('app_setting.Site URL desc')}</p>
-        {!this.state.isSetSiteUrl && (<p className="alert alert-danger"><i className="icon-exclamation"></i> {t('app_setting.Site URL warn')}</p>)}
+        {!adminAppContainer.state.isSetSiteUrl && (<p className="alert alert-danger"><i className="icon-exclamation"></i> {t('app_setting.Site URL warn')}</p>)}
 
         <div className="row">
           <div className="col-md-12">
@@ -78,8 +61,8 @@ class SiteUrlSetting extends React.Component {
                         className="form-control"
                         type="text"
                         name="settingForm[app:siteUrl]"
-                        value={this.state.siteUrl}
-                        onChange={this.inputSiteUrlChangeHandler}
+                        defaultValue={adminAppContainer.state.siteUrl}
+                        onChange={(e) => { adminAppContainer.changeSiteUrl(e.target.value) }}
                         placeholder="e.g. https://my.growi.org"
                       />
                       <p className="help-block">
@@ -88,7 +71,7 @@ class SiteUrlSetting extends React.Component {
                       </p>
                     </td>
                     <td>
-                      <input className="form-control" type="text" value={this.state.envSiteUrl} readOnly />
+                      <input className="form-control" type="text" value={adminAppContainer.state.envSiteUrl} readOnly />
                       <p className="help-block">
                         {/* eslint-disable-next-line react/no-danger */}
                         <div dangerouslySetInnerHTML={{ __html: t('app_setting.Use env var if empty', { variable: 'APP_SITE_URL' }) }} />

src/client/js/services/AdminAppContainer.js

@@ -27,6 +27,13 @@ export default class AdminAppContainer extends Container {
       isSetSiteUrl: true,
     };
 
+    this.changeTitle = this.changeTitle.bind(this);
+    this.changeConfidential = this.changeConfidential.bind(this);
+    this.changeGlobalLang = this.changeGlobalLang.bind(this);
+    this.changeFileUpload = this.changeFileUpload.bind(this);
+    this.changeSiteUrl = this.changeSiteUrl.bind(this);
+    this.updateAppSettingHandler = this.updateAppSettingHandler.bind(this);
+    this.updateSiteUrlSettingHandler = this.updateSiteUrlSettingHandler.bind(this);
   }
 
   /**
@@ -61,21 +68,69 @@ export default class AdminAppContainer extends Container {
     }
   }
 
+  /**
+   * Change title
+   */
+  changeTitle(title) {
+    this.setState({ title });
+  }
+
+  /**
+   * Change confidential
+   */
+  changeConfidential(confidential) {
+    this.setState({ confidential });
+  }
+
+  /**
+   * Change globalLang
+   */
+  changeGlobalLang(globalLang) {
+    this.setState({ globalLang });
+  }
 
-  inputTitleChangeHandler(event) {
-    this.setState({ title: event.target.value });
+  /**
+   * Change fileUpload
+   */
+  changeFileUpload(fileUpload) {
+    this.setState({ fileUpload });
   }
 
-  inputConfidentialChangeHandler(event) {
-    this.setState({ confidential: event.target.value });
+  /**
+   * Change site url
+   */
+  changeSiteUrl(siteUrl) {
+    this.setState({ siteUrl });
   }
 
-  inputGlobalLangChangeHandler(event) {
-    this.setState({ globalLang: event.target.value });
+  /**
+   * Update app setting
+   * @memberOf AdminAppContainer
+   * @return {Array} Appearance
+   */
+  async updateAppSettingHandler() {
+    const response = await this.appContainer.apiv3.put('/app-settings/app-setting', {
+      title: this.state.title,
+      confidential: this.state.confidential,
+      globalLang: this.state.globalLang,
+      fileUpload: this.state.fileUpload,
+    });
+    const { appSettingParams } = response.data;
+    return appSettingParams;
   }
 
-  inputFileUploadChangeHandler(event) {
-    this.setState({ fileUpload: event.target.checked });
+
+  /**
+   * Update site url setting
+   * @memberOf AdminAppContainer
+   * @return {Array} Appearance
+   */
+  async updateSiteUrlSettingHandler() {
+    const response = await this.appContainer.apiv3.put('/app-settings/site-url-setting', {
+      siteUrl: this.state.siteUrl,
+    });
+    const { appSettingParams } = response.data;
+    return appSettingParams;
   }
 
 }

src/server/routes/apiv3/app-settings.js

@@ -150,7 +150,6 @@ module.exports = (crowi) => {
    *                      $ref: '#/components/schemas/appSettingParams'
    */
   router.put('/app-setting', loginRequiredStrictly, adminRequired, csrf, validator.appSetting, ApiV3FormValidator, async(req, res) => {
-
     const requestAppSettingParams = {
       'app:title': req.body.title,
       'app:confidential': req.body.confidential,