fix

src/client/js/admin.jsx

@@ -31,6 +31,7 @@ import AdminCustomizeContainer from './services/AdminCustomizeContainer';
 import AdminUserGroupDetailContainer from './services/AdminUserGroupDetailContainer';
 import AdminUsersContainer from './services/AdminUsersContainer';
 import AdminAppContainer from './services/AdminAppContainer';
+import AdminImportContainer from './services/AdminImportContainer';
 import AdminMarkDownContainer from './services/AdminMarkDownContainer';
 import AdminExternalAccountsContainer from './services/AdminExternalAccountsContainer';
 import AdminGeneralSecurityContainer from './services/AdminGeneralSecurityContainer';
@@ -55,6 +56,7 @@ const { i18n } = appContainer;
 // create unstated container instance
 const navigationContainer = new NavigationContainer(appContainer);
 const adminAppContainer = new AdminAppContainer(appContainer);
+const adminImportContainer = new AdminImportContainer(appContainer);
 const adminSocketIoContainer = new AdminSocketIoContainer(appContainer);
 const adminHomeContainer = new AdminHomeContainer(appContainer);
 const adminCustomizeContainer = new AdminCustomizeContainer(appContainer);
@@ -67,6 +69,7 @@ const injectableContainers = [
   appContainer,
   navigationContainer,
   adminAppContainer,
+  adminImportContainer,
   adminSocketIoContainer,
   adminHomeContainer,
   adminCustomizeContainer,

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

@@ -1,9 +1,8 @@
 
 import React, { Fragment, Suspense } from 'react';
 import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
 
-import AppContainer from '../../../services/AppContainer';
+import loggerFactory from '@alias/logger';
 import AdminCustomizeContainer from '../../../services/AdminCustomizeContainer';
 
 import { withUnstatedContainers } from '../../UnstatedUtils';
@@ -17,6 +16,8 @@ import CustomizeScriptSetting from './CustomizeScriptSetting';
 import CustomizeHeaderSetting from './CustomizeHeaderSetting';
 import CustomizeTitle from './CustomizeTitle';
 
+const logger = loggerFactory('growi:services:AdminCustomizePage');
+
 function Customize(props) {
   return (
     <Suspense
@@ -26,21 +27,22 @@ function Customize(props) {
         </div>
       )}
     >
-      <RenderCustomizeWrapper />
+      <RenderCustomizePageWrapper />
     </Suspense>
   );
 }
 
-function RenderCustomizeWrapper(props) {
-  if (props.adminCustomizeContainer.state.currentTheme === props.adminAppContainer.dummyCurrentTheme) {
+function RenderCustomizePage(props) {
+  const { adminCustomizeContainer } = props;
+
+  if (adminCustomizeContainer.state.currentTheme === adminCustomizeContainer.dummyCurrentTheme) {
     throw new Promise(async() => {
       try {
         await adminCustomizeContainer.retrieveCustomizeData();
-        this.setState({ isRetrieving: false });
       }
       catch (err) {
         toastError(err);
-        props.adminAppContainer.setState({ retrieveError: err.message });
+        adminCustomizeContainer.setState({ retrieveError: err.message });
         logger.error(err);
       }
     });
@@ -73,10 +75,9 @@ function RenderCustomizeWrapper(props) {
   );
 }
 
-const RenderCustomizeWrapper = withUnstatedContainers(RenderCustomizePage, [AppContainer, AdminCustomizeContainer]);
+const RenderCustomizePageWrapper = withUnstatedContainers(RenderCustomizePage, [AdminCustomizeContainer]);
 
 RenderCustomizePage.propTypes = {
-  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
   adminCustomizeContainer: PropTypes.instanceOf(AdminCustomizeContainer).isRequired,
 };
 

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

@@ -240,6 +240,6 @@ ImportDataPageContents.propTypes = {
 /**
  * Wrapper component for using unstated
  */
-const ImportDataPageContentsWrapper = withUnstatedContainers(GrowiArchiveSection, [AdminImportContainer]);
+const ImportDataPageContentsWrapper = withUnstatedContainers(ImportDataPageContents, [AdminImportContainer]);
 
 export default withTranslation()(ImportDataPageContentsWrapper);

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

@@ -1,5 +1,4 @@
 import React, { Suspense } from 'react';
-import { withTranslation } from 'react-i18next';
 import PropTypes from 'prop-types';
 import loggerFactory from '@alias/logger';
 
@@ -27,7 +26,9 @@ function ImportDataPage(props) {
 }
 
 function RenderImportDataPage(props) {
-  if (props.adminImportContainer.state.title === props.adminImportContainer.dummyTitle) {
+  const { adminImportContainer } = props;
+
+  if (adminImportContainer.state.esaTeamName === adminImportContainer.dummyEsaTeamName) {
     throw new Promise(async() => {
       try {
         await props.adminImportContainer.retrieveImportSettingsData();
@@ -41,11 +42,9 @@ function RenderImportDataPage(props) {
   }
 
   return <ImportDataPageContents />;
-
 }
 
 RenderImportDataPage.propTypes = {
-  t: PropTypes.func.isRequired, // i18next
   adminImportContainer: PropTypes.instanceOf(AdminImportContainer).isRequired,
 };
 
@@ -55,4 +54,4 @@ RenderImportDataPage.propTypes = {
  */
 const RenderImportDataPageWrapper = withUnstatedContainers(RenderImportDataPage, [AdminImportContainer]);
 
-export default withTranslation()(ImportDataPage);
+export default ImportDataPage;

src/client/js/components/Admin/MarkdownSetting/MarkDownSetting.jsx

@@ -1,16 +1,12 @@
 import React, { Suspense } from 'react';
-import { Card, CardBody } from 'reactstrap';
 import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
 
 import loggerFactory from '@alias/logger';
 
 import { withUnstatedContainers } from '../../UnstatedUtils';
 import { toastError } from '../../../util/apiNotification';
 
-import LineBreakForm from './LineBreakForm';
-import PresentationForm from './PresentationForm';
-import XssForm from './XssForm';
+import MarkDownSettingContents from './MarkDownSettingContents';
 import AdminMarkDownContainer from '../../../services/AdminMarkDownContainer';
 
 const logger = loggerFactory('growi:MarkDown');
@@ -30,7 +26,7 @@ function MarkdownSetting(props) {
 }
 
 function RenderMarkdownSetting(props) {
-  const { t, adminMarkDownContainer } = props;
+  const { adminMarkDownContainer } = props;
 
   if (adminMarkDownContainer.state.isEnabledLinebreaks === adminMarkDownContainer.dummyIsEnabledLinebreaks) {
     throw new Promise(async() => {
@@ -45,38 +41,13 @@ function RenderMarkdownSetting(props) {
     });
   }
 
-  return (
-    <React.Fragment>
-      {/* Line Break Setting */}
-      <h2 className="admin-setting-header">{t('admin:markdown_setting.lineBreak_header')}</h2>
-      <Card className="card well my-3">
-        <CardBody className="px-0 py-2">{ t('admin:markdown_setting.lineBreak_desc') }</CardBody>
-      </Card>
-      <LineBreakForm />
-
-      {/* Presentation Setting */}
-      <h2 className="admin-setting-header">{ t('admin:markdown_setting.presentation_header') }</h2>
-      <Card className="card well my-3">
-        <CardBody className="px-0 py-2">{ t('admin:markdown_setting.presentation_desc') }</CardBody>
-      </Card>
-      <PresentationForm />
-
-      {/* XSS Setting */}
-      <h2 className="admin-setting-header">{ t('admin:markdown_setting.xss_header') }</h2>
-      <Card className="card well my-3">
-        <CardBody className="px-0 py-2">{ t('admin:markdown_setting.xss_desc') }</CardBody>
-      </Card>
-      <XssForm />
-    </React.Fragment>
-  );
+  return <MarkDownSettingContents />;
 }
 
-const RenderMarkdownSettingWrapper = withUnstatedContainers(MarkdownSetting, [AdminMarkDownContainer]);
+const RenderMarkdownSettingWrapper = withUnstatedContainers(RenderMarkdownSetting, [AdminMarkDownContainer]);
 
 RenderMarkdownSetting.propTypes = {
-  t: PropTypes.func.isRequired, // i18next
   adminMarkDownContainer: PropTypes.instanceOf(AdminMarkDownContainer).isRequired,
-
 };
 
-export default withTranslation()(RenderMarkdownSettingWrapper);
+export default MarkdownSetting;

src/client/js/components/Admin/MarkdownSetting/MarkDownSettingContents.jsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Card, CardBody } from 'reactstrap';
+import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
+
+import LineBreakForm from './LineBreakForm';
+import PresentationForm from './PresentationForm';
+import XssForm from './XssForm';
+
+
+class MarkDownSettingContents extends React.Component {
+
+  render() {
+    const { t } = this.props;
+    return (
+      <React.Fragment>
+        {/* Line Break Setting */}
+        <h2 className="admin-setting-header">{t('admin:markdown_setting.lineBreak_header')}</h2>
+        <Card className="card well my-3">
+          <CardBody className="px-0 py-2">{ t('admin:markdown_setting.lineBreak_desc') }</CardBody>
+        </Card>
+        <LineBreakForm />
+
+        {/* Presentation Setting */}
+        <h2 className="admin-setting-header">{ t('admin:markdown_setting.presentation_header') }</h2>
+        <Card className="card well my-3">
+          <CardBody className="px-0 py-2">{ t('admin:markdown_setting.presentation_desc') }</CardBody>
+        </Card>
+        <PresentationForm />
+
+        {/* XSS Setting */}
+        <h2 className="admin-setting-header">{ t('admin:markdown_setting.xss_header') }</h2>
+        <Card className="card well my-3">
+          <CardBody className="px-0 py-2">{ t('admin:markdown_setting.xss_desc') }</CardBody>
+        </Card>
+        <XssForm />
+      </React.Fragment>
+    );
+  }
+
+}
+
+MarkDownSettingContents.propTypes = {
+  t: PropTypes.func.isRequired, // i18next
+};
+
+export default withTranslation()(MarkDownSettingContents);

src/client/js/components/Admin/Notification/NotificationSetting.jsx

@@ -28,7 +28,7 @@ function NotificationSetting(props) {
 
 function RenderNotificationSetting(props) {
   const { adminNotificationContainer } = props;
-  if (adminNotificationContainer.state.selectSlackOption === adminNotificationContainer.dummySelectSlackOption) {
+  if (adminNotificationContainer.state.webhookUrl === adminNotificationContainer.dummyWebhookUrl) {
     throw new Promise(async() => {
       try {
         await adminNotificationContainer.retrieveNotificationData();

src/client/js/components/Admin/Security/SecuritySetting.jsx

@@ -24,7 +24,7 @@ function SecuritySetting(props) {
 
 function RenderAppSettingsPage(props) {
   const { adminGeneralSecurityContainer } = props;
-  if (adminGeneralSecurityContainer.state.title === adminGeneralSecurityContainer.dummyTitle) {
+  if (adminGeneralSecurityContainer.state.currentRestrictGuestMode === adminGeneralSecurityContainer.dummyCurrentRestrictGuestMode) {
     throw new Promise(async() => {
       try {
         await adminGeneralSecurityContainer.retrieveSecurityData();

src/client/js/components/Admin/Security/SecuritySettingContents.jsx

@@ -37,9 +37,9 @@ class SecuritySettingContents extends React.Component {
         <h2 className="alert-anchor border-bottom">
           {t('security_settings')}
         </h2>
-        {this.state.retrieveError != null && (
+        {adminGeneralSecurityContainer.retrieveError != null && (
         <div className="alert alert-danger">
-          <p>{t('Error occurred')} : {this.state.retrieveError}</p>
+          <p>{t('Error occurred')} : {adminGeneralSecurityContainer.retrieveError}</p>
         </div>
           )}
 
@@ -191,7 +191,7 @@ class SecuritySettingContents extends React.Component {
         </div>
         <div className="row my-3">
           <div className="text-center text-md-left offset-md-3 col-md-5">
-            <button type="button" className="btn btn-primary" disabled={this.state.retrieveError != null} onClick={this.putSecuritySetting}>
+            <button type="button" className="btn btn-primary" disabled={adminGeneralSecurityContainer.retrieveError != null} onClick={this.putSecuritySetting}>
               {t('Update')}
             </button>
           </div>

src/client/js/services/AdminCustomizeContainer.js

@@ -22,7 +22,7 @@ export default class AdminCustomizeContainer extends Container {
     this.state = {
       retrieveError: null,
       // set dummy value tile for using suspense
-      currentTheme: dummyCurrentTheme,
+      currentTheme: this.dummyCurrentTheme,
       currentLayout: '',
       isEnabledTimeline: false,
       isSavedStatesOfTabChanges: false,

src/client/js/services/AdminGeneralSecurityContainer.js

@@ -13,11 +13,13 @@ export default class AdminGeneralSecurityContainer extends Container {
     super();
 
     this.appContainer = appContainer;
+    this.dummyCurrentRestrictGuestMode = 0;
 
     this.state = {
       retrieveError: null,
       wikiMode: '',
-      currentRestrictGuestMode: 'Deny',
+      // set dummy value tile for using suspense
+      currentRestrictGuestMode: this.dummyCurrentRestrictGuestMode,
       currentPageCompleteDeletionAuthority: 'adminOnly',
       isShowRestrictedByOwner: false,
       isShowRestrictedByGroup: false,

src/client/js/services/AdminImportContainer.js

@@ -78,7 +78,7 @@ export default class AdminImportContainer extends Container {
         'importer:esa:team_name': this.state.esaTeamName,
         'importer:esa:access_token': this.state.esaAccessToken,
       };
-      await this.props.appContainer.apiPost('/admin/import/esa', params);
+      await this.appContainer.apiPost('/admin/import/esa', params);
       toastSuccess('Import posts from esa success.');
     }
     catch (err) {
@@ -93,7 +93,7 @@ export default class AdminImportContainer extends Container {
         'importer:esa:team_name': this.state.esaTeamName,
         'importer:esa:access_token': this.state.esaAccessToken,
       };
-      await this.props.appContainer.apiPost('/admin/import/testEsaAPI', params);
+      await this.appContainer.apiPost('/admin/import/testEsaAPI', params);
       toastSuccess('Test connection to esa success.');
     }
     catch (error) {
@@ -107,7 +107,7 @@ export default class AdminImportContainer extends Container {
       'importer:esa:access_token': this.state.esaAccessToken,
     };
     try {
-      await this.props.appContainer.apiPost('/admin/settings/importerEsa', params);
+      await this.appContainer.apiPost('/admin/settings/importerEsa', params);
       toastSuccess('Updated');
     }
     catch (err) {
@@ -122,7 +122,7 @@ export default class AdminImportContainer extends Container {
         'importer:qiita:team_name': this.state.qiitaTeamName,
         'importer:qiita:access_token': this.state.qiitaAccessToken,
       };
-      await this.props.appContainer.apiPost('/admin/import/qiita', params);
+      await this.appContainer.apiPost('/admin/import/qiita', params);
       toastSuccess('Import posts from qiita:team success.');
     }
     catch (err) {
@@ -138,7 +138,7 @@ export default class AdminImportContainer extends Container {
         'importer:qiita:team_name': this.state.qiitaTeamName,
         'importer:qiita:access_token': this.state.qiitaAccessToken,
       };
-      await this.props.appContainer.apiPost('/admin/import/testQiitaAPI', params);
+      await this.appContainer.apiPost('/admin/import/testQiitaAPI', params);
       toastSuccess('Test connection to qiita:team success.');
     }
     catch (err) {
@@ -153,7 +153,7 @@ export default class AdminImportContainer extends Container {
       'importer:qiita:access_token': this.state.qiitaAccessToken,
     };
     try {
-      await this.props.appContainer.apiPost('/admin/settings/importerQiita', params);
+      await this.appContainer.apiPost('/admin/settings/importerQiita', params);
       toastSuccess('Updated');
     }
     catch (err) {

src/client/js/services/AdminNotificationContainer.js

@@ -16,13 +16,12 @@ export default class AdminNotificationContainer extends Container {
     super();
 
     this.appContainer = appContainer;
-    this.dummySelectSlackOption = 0;
+    this.dummyWebhookUrl = 0;
 
     this.state = {
       retrieveError: null,
-      // set dummy value tile for using suspense
-      selectSlackOption: this.dummySelectSlackOption,
-      webhookUrl: '',
+      selectSlackOption: 'Incoming Webhooks',
+      webhookUrl: this.dummyWebhookUrl,
       isIncomingWebhookPrioritized: false,
       slackToken: '',
       userNotifications: [],