import

src/client/js/components/Admin/ImportData/ImportDataPageContents.jsx

@@ -0,0 +1,245 @@
+import React, { Fragment } from 'react';
+import { withTranslation } from 'react-i18next';
+import PropTypes from 'prop-types';
+import { withUnstatedContainers } from '../../UnstatedUtils';
+
+import GrowiArchiveSection from './GrowiArchiveSection';
+
+import AdminImportContainer from '../../../services/AdminImportContainer';
+
+class ImportDataPageContents extends React.Component {
+
+  render() {
+    const { t, adminImportContainer } = this.props;
+
+    return (
+      <Fragment>
+        <GrowiArchiveSection />
+
+        <form
+          className="mt-5"
+          id="importerSettingFormEsa"
+          role="form"
+        >
+          <fieldset>
+            <h2 className="admin-setting-header">{t('admin:importer_management.import_from', { from: 'esa.io' })}</h2>
+            <table className="table table-bordered table-mapping">
+              <thead>
+                <tr>
+                  <th width="45%">esa.io</th>
+                  <th width="10%"></th>
+                  <th>GROWI</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <th>{t('Article')}</th>
+                  <th><i className="icon-arrow-right-circle text-success"></i></th>
+                  <th>{t('Page')}</th>
+                </tr>
+                <tr>
+                  <th>{t('Category')}</th>
+                  <th><i className="icon-arrow-right-circle text-success"></i></th>
+                  <th>{t('Page Path')}</th>
+                </tr>
+                <tr>
+                  <th>{t('User')}</th>
+                  <th></th>
+                  <th>(TBD)</th>
+                </tr>
+              </tbody>
+            </table>
+
+            <div className="card well mb-0 small">
+              <ul>
+                <li>{t('admin:importer_management.page_skip')}</li>
+              </ul>
+            </div>
+
+            <div className="form-group row">
+              <input type="password" name="dummypass" style={{ display: 'none', top: '-100px', left: '-100px' }} />
+            </div>
+
+            <div className="form-group row">
+              <label htmlFor="settingForm[importer:esa:team_name]" className="text-left text-md-right col-md-3 col-form-label">
+                {t('admin:importer_management.esa_settings.team_name')}
+              </label>
+              <div className="col-md-6">
+                <input
+                  className="form-control"
+                  type="text"
+                  name="esaTeamName"
+                  value={adminImportContainer.state.esaTeamName}
+                  onChange={adminImportContainer.handleInputValue}
+                />
+              </div>
+
+            </div>
+
+            <div className="form-group row">
+              <label htmlFor="settingForm[importer:esa:access_token]" className="text-left text-md-right col-md-3 col-form-label">
+                {t('admin:importer_management.esa_settings.access_token')}
+              </label>
+              <div className="col-md-6">
+                <input
+                  className="form-control"
+                  type="password"
+                  name="esaAccessToken"
+                  value={adminImportContainer.state.esaAccessToken}
+                  onChange={adminImportContainer.handleInputValue}
+                />
+              </div>
+            </div>
+
+            <div className="form-group row">
+              <div className="offset-md-3 col-md-6">
+                <input
+                  id="testConnectionToEsa"
+                  type="button"
+                  className="btn btn-primary btn-esa"
+                  name="Esa"
+                  onClick={adminImportContainer.esaHandleSubmit}
+                  value={t('admin:importer_management.import')}
+                />
+                <input type="button" className="btn btn-secondary" onClick={adminImportContainer.esaHandleSubmitUpdate} value={t('Update')} />
+                <span className="offset-0 offset-sm-1">
+                  <input
+                    id="importFromEsa"
+                    type="button"
+                    name="Esa"
+                    className="btn btn-secondary btn-esa"
+                    onClick={adminImportContainer.esaHandleSubmitTest}
+                    value={t('admin:importer_management.esa_settings.test_connection')}
+                  />
+                </span>
+
+              </div>
+            </div>
+          </fieldset>
+        </form>
+
+        <form
+          className="mt-5"
+          id="importerSettingFormQiita"
+          role="form"
+        >
+          <fieldset>
+            <h2 className="admin-setting-header">{t('admin:importer_management.import_from', { from: 'Qiita:Team' })}</h2>
+            <table className="table table-bordered table-mapping">
+              <thead>
+                <tr>
+                  <th width="45%">Qiita:Team</th>
+                  <th width="10%"></th>
+                  <th>GROWI</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <th>{t('Article')}</th>
+                  <th><i className="icon-arrow-right-circle text-success"></i></th>
+                  <th>{t('Page')}</th>
+                </tr>
+                <tr>
+                  <th>{t('Tag')}</th>
+                  <th></th>
+                  <th>-</th>
+                </tr>
+                <tr>
+                  <th>{t('admin:importer_management.Directory_hierarchy_tag')}</th>
+                  <th></th>
+                  <th>(TBD)</th>
+                </tr>
+                <tr>
+                  <th>{t('User')}</th>
+                  <th></th>
+                  <th>(TBD)</th>
+                </tr>
+              </tbody>
+            </table>
+            <div className="card well mb-0 small">
+              <ul>
+                <li>{t('admin:importer_management.page_skip')}</li>
+              </ul>
+            </div>
+
+            <div className="form-group row">
+              <input type="password" name="dummypass" style={{ display: 'none', top: '-100px', left: '-100px' }} />
+            </div>
+            <div className="form-group row">
+              <label htmlFor="settingForm[importer:qiita:team_name]" className="text-left text-md-right col-md-3 col-form-label">
+                {t('admin:importer_management.qiita_settings.team_name')}
+              </label>
+              <div className="col-md-6">
+                <input
+                  className="form-control"
+                  type="text"
+                  name="qiitaTeamName"
+                  value={adminImportContainer.state.qiitaTeamName}
+                  onChange={adminImportContainer.handleInputValue}
+                />
+              </div>
+            </div>
+
+            <div className="form-group row">
+              <label htmlFor="settingForm[importer:qiita:access_token]" className="text-left text-md-right col-md-3 col-form-label">
+                {t('admin:importer_management.qiita_settings.access_token')}
+              </label>
+              <div className="col-md-6">
+                <input
+                  className="form-control"
+                  type="password"
+                  name="qiitaAccessToken"
+                  value={adminImportContainer.stateqiitaAccessToken}
+                  onChange={adminImportContainer.handleInputValue}
+                />
+              </div>
+            </div>
+
+
+            <div className="form-group row">
+              <div className="offset-md-3 col-md-6">
+                <input
+                  id="testConnectionToQiita"
+                  type="button"
+                  className="btn btn-primary btn-qiita"
+                  name="Qiita"
+                  onClick={adminImportContainer.qiitaHandleSubmit}
+                  value={t('admin:importer_management.import')}
+                />
+                <input type="button" className="btn btn-secondary" onClick={adminImportContainer.qiitaHandleSubmitUpdate} value={t('Update')} />
+                <span className="offset-0 offset-sm-1">
+                  <input
+                    name="Qiita"
+                    type="button"
+                    id="importFromQiita"
+                    className="btn btn-secondary btn-qiita"
+                    onClick={adminImportContainer.qiitaHandleSubmitTest}
+                    value={t('admin:importer_management.qiita_settings.test_connection')}
+                  />
+                </span>
+
+              </div>
+            </div>
+
+
+          </fieldset>
+
+
+        </form>
+      </Fragment>
+    );
+  }
+
+}
+
+ImportDataPageContents.propTypes = {
+  t: PropTypes.func.isRequired, // i18next
+  adminImportContainer: PropTypes.instanceOf(AdminImportContainer).isRequired,
+};
+
+/**
+ * Wrapper component for using unstated
+ */
+const ImportDataPageContentsWrapper = withUnstatedContainers(GrowiArchiveSection, [AdminImportContainer]);
+
+export default withTranslation()(ImportDataPageContentsWrapper);

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

@@ -1,345 +1,58 @@
-import React, { Fragment } from 'react';
+import React, { Suspense } from 'react';
 import { withTranslation } from 'react-i18next';
 import PropTypes from 'prop-types';
 import loggerFactory from '@alias/logger';
 
 import { withUnstatedContainers } from '../UnstatedUtils';
-import { toastSuccess, toastError } from '../../util/apiNotification';
 
-import AppContainer from '../../services/AppContainer';
+import AdminImportContainer from '../../services/AdminImportContainer';
+import { toastError } from '../../util/apiNotification';
 
-import GrowiArchiveSection from './ImportData/GrowiArchiveSection';
+import ImportDataPageContents from './ImportData/ImportDataPageContents';
 
 const logger = loggerFactory('growi:importer');
 
-class ImportDataPage extends React.Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      esaTeamName: '',
-      esaAccessToken: '',
-      qiitaTeamName: '',
-      qiitaAccessToken: '',
-    };
-
-    this.esaHandleSubmit = this.esaHandleSubmit.bind(this);
-    this.esaHandleSubmitTest = this.esaHandleSubmitTest.bind(this);
-    this.esaHandleSubmitUpdate = this.esaHandleSubmitUpdate.bind(this);
-    this.qiitaHandleSubmit = this.qiitaHandleSubmit.bind(this);
-    this.qiitaHandleSubmitTest = this.qiitaHandleSubmitTest.bind(this);
-    this.qiitaHandleSubmitUpdate = this.qiitaHandleSubmitUpdate.bind(this);
-    this.handleInputValue = this.handleInputValue.bind(this);
-  }
+function ImportDataPage(props) {
+  return (
+    <Suspense
+      fallback={(
+        <div className="row">
+          <i className="fa fa-5x fa-spinner fa-pulse mx-auto text-muted"></i>
+        </div>
+      )}
+    >
+      <RenderImportDataPageWrapper />
+    </Suspense>
+  );
+}
 
-  handleInputValue(event) {
-    this.setState({
-      [event.target.name]: event.target.value,
+function RenderImportDataPage(props) {
+  if (props.adminImportContainer.state.title === props.adminImportContainer.dummyTitle) {
+    throw new Promise(async() => {
+      try {
+        await props.adminImportContainer.retrieveImportSettingsData();
+      }
+      catch (err) {
+        toastError(err);
+        props.adminImportContainer.setState({ retrieveError: err.message });
+        logger.error(err);
+      }
     });
   }
 
-  async esaHandleSubmit() {
-    try {
-      const params = {
-        'importer:esa:team_name': this.state.esaTeamName,
-        'importer:esa:access_token': this.state.esaAccessToken,
-      };
-      await this.props.appContainer.apiPost('/admin/import/esa', params);
-      toastSuccess('Import posts from esa success.');
-    }
-    catch (err) {
-      logger.error(err);
-      toastError(err, 'Error occurred in importing pages from esa.io');
-    }
-  }
-
-  async esaHandleSubmitTest() {
-    try {
-      const params = {
-        'importer:esa:team_name': this.state.esaTeamName,
-        'importer:esa:access_token': this.state.esaAccessToken,
-      };
-      await this.props.appContainer.apiPost('/admin/import/testEsaAPI', params);
-      toastSuccess('Test connection to esa success.');
-    }
-    catch (error) {
-      toastError(error, 'Test connection to esa failed.');
-    }
-  }
-
-  async esaHandleSubmitUpdate() {
-    const params = {
-      'importer:esa:team_name': this.state.esaTeamName,
-      'importer:esa:access_token': this.state.esaAccessToken,
-    };
-    try {
-      await this.props.appContainer.apiPost('/admin/settings/importerEsa', params);
-      toastSuccess('Updated');
-    }
-    catch (err) {
-      logger.error(err);
-      toastError(err, 'Errors');
-    }
-  }
-
-  async qiitaHandleSubmit() {
-    try {
-      const params = {
-        'importer:qiita:team_name': this.state.qiitaTeamName,
-        'importer:qiita:access_token': this.state.qiitaAccessToken,
-      };
-      await this.props.appContainer.apiPost('/admin/import/qiita', params);
-      toastSuccess('Import posts from qiita:team success.');
-    }
-    catch (err) {
-      logger.error(err);
-      toastError(err, 'Error occurred in importing pages from qiita:team');
-    }
-  }
-
-
-  async qiitaHandleSubmitTest() {
-    try {
-      const params = {
-        'importer:qiita:team_name': this.state.qiitaTeamName,
-        'importer:qiita:access_token': this.state.qiitaAccessToken,
-      };
-      await this.props.appContainer.apiPost('/admin/import/testQiitaAPI', params);
-      toastSuccess('Test connection to qiita:team success.');
-    }
-    catch (err) {
-      logger.error(err);
-      toastError(err, 'Test connection to qiita:team failed.');
-    }
-  }
-
-  async qiitaHandleSubmitUpdate() {
-    const params = {
-      'importer:qiita:team_name': this.state.qiitaTeamName,
-      'importer:qiita:access_token': this.state.qiitaAccessToken,
-    };
-    try {
-      await this.props.appContainer.apiPost('/admin/settings/importerQiita', params);
-      toastSuccess('Updated');
-    }
-    catch (err) {
-      logger.error(err);
-      toastError(err, 'Errors');
-    }
-  }
-
-  render() {
-    const {
-      esaTeamName, esaAccessToken, qiitaTeamName, qiitaAccessToken,
-    } = this.state;
-    const { t } = this.props;
-    return (
-      <Fragment>
-        <GrowiArchiveSection />
-
-        <form
-          className="mt-5"
-          id="importerSettingFormEsa"
-          role="form"
-        >
-          <fieldset>
-            <h2 className="admin-setting-header">{t('admin:importer_management.import_from', { from: 'esa.io' })}</h2>
-            <table className="table table-bordered table-mapping">
-              <thead>
-                <tr>
-                  <th width="45%">esa.io</th>
-                  <th width="10%"></th>
-                  <th>GROWI</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <th>{t('Article')}</th>
-                  <th><i className="icon-arrow-right-circle text-success"></i></th>
-                  <th>{t('Page')}</th>
-                </tr>
-                <tr>
-                  <th>{t('Category')}</th>
-                  <th><i className="icon-arrow-right-circle text-success"></i></th>
-                  <th>{t('Page Path')}</th>
-                </tr>
-                <tr>
-                  <th>{t('User')}</th>
-                  <th></th>
-                  <th>(TBD)</th>
-                </tr>
-              </tbody>
-            </table>
-
-            <div className="card well mb-0 small">
-              <ul>
-                <li>{t('admin:importer_management.page_skip')}</li>
-              </ul>
-            </div>
-
-            <div className="form-group row">
-              <input type="password" name="dummypass" style={{ display: 'none', top: '-100px', left: '-100px' }} />
-            </div>
-
-            <div className="form-group row">
-              <label htmlFor="settingForm[importer:esa:team_name]" className="text-left text-md-right col-md-3 col-form-label">
-                { t('admin:importer_management.esa_settings.team_name') }
-              </label>
-              <div className="col-md-6">
-                <input className="form-control" type="text" name="esaTeamName" value={esaTeamName} onChange={this.handleInputValue} />
-              </div>
-
-            </div>
-
-            <div className="form-group row">
-              <label htmlFor="settingForm[importer:esa:access_token]" className="text-left text-md-right col-md-3 col-form-label">
-                { t('admin:importer_management.esa_settings.access_token') }
-              </label>
-              <div className="col-md-6">
-                <input className="form-control" type="password" name="esaAccessToken" value={esaAccessToken} onChange={this.handleInputValue} />
-              </div>
-            </div>
-
-            <div className="form-group row">
-              <div className="offset-md-3 col-md-6">
-                <input
-                  id="testConnectionToEsa"
-                  type="button"
-                  className="btn btn-primary btn-esa"
-                  name="Esa"
-                  onClick={this.esaHandleSubmit}
-                  value={t('admin:importer_management.import')}
-                />
-                <input type="button" className="btn btn-secondary" onClick={this.esaHandleSubmitUpdate} value={t('Update')} />
-                <span className="offset-0 offset-sm-1">
-                  <input
-                    id="importFromEsa"
-                    type="button"
-                    name="Esa"
-                    className="btn btn-secondary btn-esa"
-                    onClick={this.esaHandleSubmitTest}
-                    value={t('admin:importer_management.esa_settings.test_connection')}
-                  />
-                </span>
-
-              </div>
-            </div>
-          </fieldset>
-        </form>
-
-        <form
-          className="mt-5"
-          id="importerSettingFormQiita"
-          role="form"
-        >
-          <fieldset>
-            <h2 className="admin-setting-header">{t('admin:importer_management.import_from', { from: 'Qiita:Team' })}</h2>
-            <table className="table table-bordered table-mapping">
-              <thead>
-                <tr>
-                  <th width="45%">Qiita:Team</th>
-                  <th width="10%"></th>
-                  <th>GROWI</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <th>{t('Article')}</th>
-                  <th><i className="icon-arrow-right-circle text-success"></i></th>
-                  <th>{t('Page')}</th>
-                </tr>
-                <tr>
-                  <th>{t('Tag')}</th>
-                  <th></th>
-                  <th>-</th>
-                </tr>
-                <tr>
-                  <th>{t('admin:importer_management.Directory_hierarchy_tag')}</th>
-                  <th></th>
-                  <th>(TBD)</th>
-                </tr>
-                <tr>
-                  <th>{t('User')}</th>
-                  <th></th>
-                  <th>(TBD)</th>
-                </tr>
-              </tbody>
-            </table>
-            <div className="card well mb-0 small">
-              <ul>
-                <li>{t('admin:importer_management.page_skip')}</li>
-              </ul>
-            </div>
-
-            <div className="form-group row">
-              <input type="password" name="dummypass" style={{ display: 'none', top: '-100px', left: '-100px' }} />
-            </div>
-            <div className="form-group row">
-              <label htmlFor="settingForm[importer:qiita:team_name]" className="text-left text-md-right col-md-3 col-form-label">
-                { t('admin:importer_management.qiita_settings.team_name') }
-              </label>
-              <div className="col-md-6">
-                <input className="form-control" type="text" name="qiitaTeamName" value={qiitaTeamName} onChange={this.handleInputValue} />
-              </div>
-            </div>
-
-            <div className="form-group row">
-              <label htmlFor="settingForm[importer:qiita:access_token]" className="text-left text-md-right col-md-3 col-form-label">
-                { t('admin:importer_management.qiita_settings.access_token') }
-              </label>
-              <div className="col-md-6">
-                <input className="form-control" type="password" name="qiitaAccessToken" value={qiitaAccessToken} onChange={this.handleInputValue} />
-              </div>
-            </div>
-
-
-            <div className="form-group row">
-              <div className="offset-md-3 col-md-6">
-                <input
-                  id="testConnectionToQiita"
-                  type="button"
-                  className="btn btn-primary btn-qiita"
-                  name="Qiita"
-                  onClick={this.qiitaHandleSubmit}
-                  value={t('admin:importer_management.import')}
-                />
-                <input type="button" className="btn btn-secondary" onClick={this.qiitaHandleSubmitUpdate} value={t('Update')} />
-                <span className="offset-0 offset-sm-1">
-                  <input
-                    name="Qiita"
-                    type="button"
-                    id="importFromQiita"
-                    className="btn btn-secondary btn-qiita"
-                    onClick={this.qiitaHandleSubmitTest}
-                    value={t('admin:importer_management.qiita_settings.test_connection')}
-                  />
-                </span>
-
-              </div>
-            </div>
-
-
-          </fieldset>
-
-
-        </form>
-      </Fragment>
-
-    );
-  }
+  return <ImportDataPageContents />;
 
 }
 
-ImportDataPage.propTypes = {
+RenderImportDataPage.propTypes = {
   t: PropTypes.func.isRequired, // i18next
-  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+  adminImportContainer: PropTypes.instanceOf(AdminImportContainer).isRequired,
 };
 
 
 /**
  * Wrapper component for using unstated
  */
-const ImportDataPageWrapper = withUnstatedContainers(ImportDataPage, [AppContainer]);
-
+const RenderImportDataPageWrapper = withUnstatedContainers(RenderImportDataPage, [AdminImportContainer]);
 
-export default withTranslation()(ImportDataPageWrapper);
+export default withTranslation()(ImportDataPage);

src/client/js/services/AdminImportContainer.js

@@ -0,0 +1,165 @@
+import { Container } from 'unstated';
+
+import loggerFactory from '@alias/logger';
+
+import { toastSuccess, toastError } from '../util/apiNotification';
+
+const logger = loggerFactory('growi:appSettings');
+
+/**
+ * Service container for admin app setting page (AppSettings.jsx)
+ * @extends {Container} unstated Container
+ */
+export default class AdminImportContainer extends Container {
+
+  constructor(appContainer) {
+    super();
+
+    this.appContainer = appContainer;
+    this.dummyEsaTeamName = 0;
+
+    this.state = {
+      retrieveError: null,
+      // set dummy value tile for using suspense
+      esaTeamName: this.dummyEsaTeamName,
+      esaAccessToken: '',
+      qiitaTeamName: '',
+      qiitaAccessToken: '',
+    };
+
+    this.esaHandleSubmit = this.esaHandleSubmit.bind(this);
+    this.esaHandleSubmitTest = this.esaHandleSubmitTest.bind(this);
+    this.esaHandleSubmitUpdate = this.esaHandleSubmitUpdate.bind(this);
+    this.qiitaHandleSubmit = this.qiitaHandleSubmit.bind(this);
+    this.qiitaHandleSubmitTest = this.qiitaHandleSubmitTest.bind(this);
+    this.qiitaHandleSubmitUpdate = this.qiitaHandleSubmitUpdate.bind(this);
+    this.handleInputValue = this.handleInputValue.bind(this);
+  }
+
+  /**
+   * Workaround for the mangling in production build to break constructor.name
+   */
+  static getClassName() {
+    return 'AdminImportContainer';
+  }
+
+  /**
+   * retrieve app sttings data
+   */
+  async retrieveImportSettingsData() {
+    try {
+      const response = await this.appContainer.apiv3.get('/import/');
+      const {
+        importSettingsParams,
+      } = response.data;
+
+      this.setState({
+        esaTeamName: importSettingsParams.esaTeamName,
+        esaAccessToken: importSettingsParams.esaAccessToken,
+        qiitaTeamName: importSettingsParams.qiitaTeamName,
+        qiitaAccessToken: importSettingsParams.qiitaAccessToken,
+      });
+    }
+    catch (err) {
+      logger.error(err);
+      toastError(new Error('Failed to fetch data'));
+    }
+  }
+
+  handleInputValue(event) {
+    this.setState({
+      [event.target.name]: event.target.value,
+    });
+  }
+
+  async esaHandleSubmit() {
+    try {
+      const params = {
+        'importer:esa:team_name': this.state.esaTeamName,
+        'importer:esa:access_token': this.state.esaAccessToken,
+      };
+      await this.props.appContainer.apiPost('/admin/import/esa', params);
+      toastSuccess('Import posts from esa success.');
+    }
+    catch (err) {
+      logger.error(err);
+      toastError(err, 'Error occurred in importing pages from esa.io');
+    }
+  }
+
+  async esaHandleSubmitTest() {
+    try {
+      const params = {
+        'importer:esa:team_name': this.state.esaTeamName,
+        'importer:esa:access_token': this.state.esaAccessToken,
+      };
+      await this.props.appContainer.apiPost('/admin/import/testEsaAPI', params);
+      toastSuccess('Test connection to esa success.');
+    }
+    catch (error) {
+      toastError(error, 'Test connection to esa failed.');
+    }
+  }
+
+  async esaHandleSubmitUpdate() {
+    const params = {
+      'importer:esa:team_name': this.state.esaTeamName,
+      'importer:esa:access_token': this.state.esaAccessToken,
+    };
+    try {
+      await this.props.appContainer.apiPost('/admin/settings/importerEsa', params);
+      toastSuccess('Updated');
+    }
+    catch (err) {
+      logger.error(err);
+      toastError(err, 'Errors');
+    }
+  }
+
+  async qiitaHandleSubmit() {
+    try {
+      const params = {
+        'importer:qiita:team_name': this.state.qiitaTeamName,
+        'importer:qiita:access_token': this.state.qiitaAccessToken,
+      };
+      await this.props.appContainer.apiPost('/admin/import/qiita', params);
+      toastSuccess('Import posts from qiita:team success.');
+    }
+    catch (err) {
+      logger.error(err);
+      toastError(err, 'Error occurred in importing pages from qiita:team');
+    }
+  }
+
+
+  async qiitaHandleSubmitTest() {
+    try {
+      const params = {
+        'importer:qiita:team_name': this.state.qiitaTeamName,
+        'importer:qiita:access_token': this.state.qiitaAccessToken,
+      };
+      await this.props.appContainer.apiPost('/admin/import/testQiitaAPI', params);
+      toastSuccess('Test connection to qiita:team success.');
+    }
+    catch (err) {
+      logger.error(err);
+      toastError(err, 'Test connection to qiita:team failed.');
+    }
+  }
+
+  async qiitaHandleSubmitUpdate() {
+    const params = {
+      'importer:qiita:team_name': this.state.qiitaTeamName,
+      'importer:qiita:access_token': this.state.qiitaAccessToken,
+    };
+    try {
+      await this.props.appContainer.apiPost('/admin/settings/importerQiita', params);
+      toastSuccess('Updated');
+    }
+    catch (err) {
+      logger.error(err);
+      toastError(err, 'Errors');
+    }
+  }
+
+}