Merge pull request #1440 from weseek/reactify-admin/handling-fetch-customize-data

Reactify admin/handling err for fetch customize data

src/client/js/components/Admin/Common/AdminUpdateButtonRow.jsx

@@ -10,7 +10,7 @@ class AdminUpdateButtonRow extends React.PureComponent {
     return (
       <div className="row my-3">
         <div className="col-xs-offset-4 col-xs-5">
-          <button type="button" className="btn btn-primary" onClick={this.props.onClick}>{ t('Update') }</button>
+          <button type="button" className="btn btn-primary" onClick={this.props.onClick} disabled={this.props.disabled}>{ t('Update') }</button>
         </div>
       </div>
     );
@@ -22,6 +22,7 @@ AdminUpdateButtonRow.propTypes = {
   t: PropTypes.func.isRequired, // i18next
 
   onClick: PropTypes.func.isRequired,
+  disabled: PropTypes.bool.isRequired,
 };
 
 export default withTranslation()(AdminUpdateButtonRow);

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

@@ -3,9 +3,14 @@ import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
+import loggerFactory from '@alias/logger';
+
 import AppContainer from '../../../services/AppContainer';
+import AdminCustomizeContainer from '../../../services/AdminCustomizeContainer';
 
 import { createSubscribedElement } from '../../UnstatedUtils';
+import { toastError } from '../../../util/apiNotification';
+
 import CustomizeLayoutSetting from './CustomizeLayoutSetting';
 import CustomizeBehaviorSetting from './CustomizeBehaviorSetting';
 import CustomizeFunctionSetting from './CustomizeFunctionSetting';
@@ -15,8 +20,24 @@ import CustomizeScriptSetting from './CustomizeScriptSetting';
 import CustomizeHeaderSetting from './CustomizeHeaderSetting';
 import CustomizeTitle from './CustomizeTitle';
 
+const logger = loggerFactory('growi:Customize');
+
 class Customize extends React.Component {
 
+  async componentDidMount() {
+    const { adminCustomizeContainer } = this.props;
+
+    try {
+      await adminCustomizeContainer.retrieveCustomizeData();
+    }
+    catch (err) {
+      toastError(err);
+      adminCustomizeContainer.setState({ retrieveError: err });
+      logger.error(err);
+    }
+
+  }
+
   render() {
 
     return (
@@ -52,12 +73,13 @@ class Customize extends React.Component {
 }
 
 const CustomizeWrapper = (props) => {
-  return createSubscribedElement(Customize, props, [AppContainer]);
+  return createSubscribedElement(Customize, props, [AppContainer, AdminCustomizeContainer]);
 };
 
 Customize.propTypes = {
   t: PropTypes.func.isRequired, // i18next
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+  adminCustomizeContainer: PropTypes.instanceOf(AdminCustomizeContainer).isRequired,
 };
 
 export default withTranslation()(CustomizeWrapper);

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

@@ -79,7 +79,7 @@ class CustomizeBehaviorSetting extends React.Component {
           </div>
         </div>
 
-        <AdminUpdateButtonRow onClick={this.onClickSubmit} />
+        <AdminUpdateButtonRow onClick={this.onClickSubmit} disabled={adminCustomizeContainer.state.retrieveError != null} />
       </React.Fragment>
     );
   }

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

@@ -71,7 +71,7 @@ class CustomizeCssSetting extends React.Component {
           </div>
         </div>
 
-        <AdminUpdateButtonRow onClick={this.onClickSubmit} />
+        <AdminUpdateButtonRow onClick={this.onClickSubmit} disabled={adminCustomizeContainer.state.retrieveError != null} />
       </React.Fragment>
     );
   }

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

@@ -123,7 +123,7 @@ class CustomizeBehaviorSetting extends React.Component {
           </div>
         </div>
 
-        <AdminUpdateButtonRow onClick={this.onClickSubmit} />
+        <AdminUpdateButtonRow onClick={this.onClickSubmit} disabled={adminCustomizeContainer.state.retrieveError != null} />
       </React.Fragment>
     );
   }

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

@@ -80,7 +80,7 @@ class CustomizeHeaderSetting extends React.Component {
           </p>
         </div>
 
-        <AdminUpdateButtonRow onClick={this.onClickSubmit} />
+        <AdminUpdateButtonRow onClick={this.onClickSubmit} disabled={adminCustomizeContainer.state.retrieveError != null} />
       </React.Fragment>
     );
   }

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

@@ -123,7 +123,7 @@ class CustomizeHighlightSetting extends React.Component {
           </div>
         </div>
 
-        <AdminUpdateButtonRow onClick={this.onClickSubmit} />
+        <AdminUpdateButtonRow onClick={this.onClickSubmit} disabled={adminCustomizeContainer.state.retrieveError != null} />
       </React.Fragment>
     );
   }

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

@@ -50,7 +50,7 @@ class CustomizeLayoutSetting extends React.Component {
 
 
   render() {
-    const { t } = this.props;
+    const { t, adminCustomizeContainer } = this.props;
 
     return (
       <React.Fragment>
@@ -59,7 +59,7 @@ class CustomizeLayoutSetting extends React.Component {
         <h2 className="admin-setting-header">{ t('customize_page.Theme') }</h2>
         {this.renderDevAlert()}
         <CustomizeThemeOptions />
-        <AdminUpdateButtonRow onClick={this.onClickSubmit} />
+        <AdminUpdateButtonRow onClick={this.onClickSubmit} disabled={adminCustomizeContainer.state.retrieveError != null} />
       </React.Fragment>
     );
   }

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

@@ -102,7 +102,7 @@ class CustomizeScriptSetting extends React.Component {
           </div>
         </div>
 
-        <AdminUpdateButtonRow onClick={this.onClickSubmit} />
+        <AdminUpdateButtonRow onClick={this.onClickSubmit} disabled={adminCustomizeContainer.state.retrieveError != null} />
       </React.Fragment>
     );
   }

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

@@ -59,7 +59,7 @@ class CustomizeTitle extends React.Component {
           />
         </div>
 
-        <AdminUpdateButtonRow onClick={this.onClickSubmit} />
+        <AdminUpdateButtonRow onClick={this.onClickSubmit} disabled={adminCustomizeContainer.state.retrieveError != null} />
       </React.Fragment>
     );
   }

src/client/js/services/AdminCustomizeContainer.js

@@ -19,6 +19,7 @@ export default class AdminCustomizeContainer extends Container {
     this.appContainer = appContainer;
 
     this.state = {
+      retrieveError: null,
       currentTheme: '',
       currentLayout: '',
       currentBehavior: '',
@@ -48,8 +49,6 @@ export default class AdminCustomizeContainer extends Container {
       /* eslint-enable quote-props, no-multi-spaces */
     };
 
-    this.init();
-
   }
 
   /**
@@ -62,7 +61,7 @@ export default class AdminCustomizeContainer extends Container {
   /**
    * retrieve customize data
    */
-  async init() {
+  async retrieveCustomizeData() {
     try {
       const response = await this.appContainer.apiv3.get('/customize-setting/');
       const { customizeParams } = response.data;