Merge pull request #2355 from weseek/support/refactor-unstated-utils

refactor UnstatedUtils

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

@@ -5,7 +5,7 @@ import loggerFactory from '@alias/logger';
 
 import { toastError } from '../../../util/apiNotification';
 
-import { createSubscribedElement } from '../../UnstatedUtils';
+import { withUnstatedContainers } from '../../UnstatedUtils';
 import AppContainer from '../../../services/AppContainer';
 import AdminHomeContainer from '../../../services/AdminHomeContainer';
 import SystemInfomationTable from './SystemInfomationTable';
@@ -69,9 +69,7 @@ class AdminHome extends React.Component {
 
 }
 
-const AdminHomeWrapper = (props) => {
-  return createSubscribedElement(AdminHome, props, [AppContainer, AdminHomeContainer]);
-};
+const AdminHomeWrapper = withUnstatedContainers(AdminHome, [AppContainer, AdminHomeContainer]);
 
 AdminHome.propTypes = {
   t: PropTypes.func.isRequired, // i18next

src/client/js/components/Admin/AdminHome/InstalledPluginTable.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
-import { createSubscribedElement } from '../../UnstatedUtils';
+import { withUnstatedContainers } from '../../UnstatedUtils';
 import AppContainer from '../../../services/AppContainer';
 import AdminHomeContainer from '../../../services/AdminHomeContainer';
 
@@ -46,8 +46,6 @@ InstalledPluginTable.propTypes = {
 /**
  * Wrapper component for using unstated
  */
-const InstalledPluginTableWrapper = (props) => {
-  return createSubscribedElement(InstalledPluginTable, props, [AppContainer, AdminHomeContainer]);
-};
+const InstalledPluginTableWrapper = withUnstatedContainers(InstalledPluginTable, [AppContainer, AdminHomeContainer]);
 
 export default withTranslation()(InstalledPluginTableWrapper);

src/client/js/components/Admin/AdminHome/SystemInfomationTable.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
-import { createSubscribedElement } from '../../UnstatedUtils';
+import { withUnstatedContainers } from '../../UnstatedUtils';
 import AppContainer from '../../../services/AppContainer';
 import AdminHomeContainer from '../../../services/AdminHomeContainer';
 
@@ -46,8 +46,6 @@ SystemInformationTable.propTypes = {
 /**
  * Wrapper component for using unstated
  */
-const SystemInformationTableWrapper = (props) => {
-  return createSubscribedElement(SystemInformationTable, props, [AppContainer, AdminHomeContainer]);
-};
+const SystemInformationTableWrapper = withUnstatedContainers(SystemInformationTable, [AppContainer, AdminHomeContainer]);
 
 export default withTranslation()(SystemInformationTableWrapper);

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

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 import loggerFactory from '@alias/logger';
 
-import { createSubscribedElement } from '../../UnstatedUtils';
+import { withUnstatedContainers } from '../../UnstatedUtils';
 import { toastSuccess, toastError } from '../../../util/apiNotification';
 
 import AppContainer from '../../../services/AppContainer';
@@ -127,9 +127,7 @@ class AppSetting extends React.Component {
 /**
  * Wrapper component for using unstated
  */
-const AppSettingWrapper = (props) => {
-  return createSubscribedElement(AppSetting, props, [AppContainer, AdminAppContainer]);
-};
+const AppSettingWrapper = withUnstatedContainers(AppSetting, [AppContainer, AdminAppContainer]);
 
 AppSetting.propTypes = {
   t: PropTypes.func.isRequired, // i18next

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

@@ -3,7 +3,7 @@ import { withTranslation } from 'react-i18next';
 import PropTypes from 'prop-types';
 import loggerFactory from '@alias/logger';
 
-import { createSubscribedElement } from '../../UnstatedUtils';
+import { withUnstatedContainers } from '../../UnstatedUtils';
 import { toastError } from '../../../util/apiNotification';
 
 import AppContainer from '../../../services/AppContainer';
@@ -86,9 +86,7 @@ AppSettingsPage.propTypes = {
 /**
  * Wrapper component for using unstated
  */
-const AppSettingsPageWrapper = (props) => {
-  return createSubscribedElement(AppSettingsPage, props, [AppContainer, AdminAppContainer]);
-};
+const AppSettingsPageWrapper = withUnstatedContainers(AppSettingsPage, [AppContainer, AdminAppContainer]);
 
 
 export default withTranslation()(AppSettingsPageWrapper);

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

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 import loggerFactory from '@alias/logger';
 
-import { createSubscribedElement } from '../../UnstatedUtils';
+import { withUnstatedContainers } from '../../UnstatedUtils';
 import { toastSuccess, toastError } from '../../../util/apiNotification';
 
 import AppContainer from '../../../services/AppContainer';
@@ -143,9 +143,7 @@ class AwsSetting extends React.Component {
 /**
  * Wrapper component for using unstated
  */
-const AwsSettingWrapper = (props) => {
-  return createSubscribedElement(AwsSetting, props, [AppContainer, AdminAppContainer]);
-};
+const AwsSettingWrapper = withUnstatedContainers(AwsSetting, [AppContainer, AdminAppContainer]);
 
 AwsSetting.propTypes = {
   t: PropTypes.func.isRequired, // i18next

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

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 import loggerFactory from '@alias/logger';
 
-import { createSubscribedElement } from '../../UnstatedUtils';
+import { withUnstatedContainers } from '../../UnstatedUtils';
 import { toastSuccess, toastError } from '../../../util/apiNotification';
 
 import AppContainer from '../../../services/AppContainer';
@@ -104,9 +104,7 @@ class MailSetting extends React.Component {
 /**
  * Wrapper component for using unstated
  */
-const MailSettingWrapper = (props) => {
-  return createSubscribedElement(MailSetting, props, [AppContainer, AdminAppContainer]);
-};
+const MailSettingWrapper = withUnstatedContainers(MailSetting, [AppContainer, AdminAppContainer]);
 
 MailSetting.propTypes = {
   t: PropTypes.func.isRequired, // i18next

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

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 import loggerFactory from '@alias/logger';
 
-import { createSubscribedElement } from '../../UnstatedUtils';
+import { withUnstatedContainers } from '../../UnstatedUtils';
 import { toastSuccess, toastError } from '../../../util/apiNotification';
 
 import AppContainer from '../../../services/AppContainer';
@@ -68,9 +68,7 @@ class PluginSetting extends React.Component {
 /**
  * Wrapper component for using unstated
  */
-const PluginSettingWrapper = (props) => {
-  return createSubscribedElement(PluginSetting, props, [AppContainer, AdminAppContainer]);
-};
+const PluginSettingWrapper = withUnstatedContainers(PluginSetting, [AppContainer, AdminAppContainer]);
 
 PluginSetting.propTypes = {
   t: PropTypes.func.isRequired, // i18next

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

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 import loggerFactory from '@alias/logger';
 
-import { createSubscribedElement } from '../../UnstatedUtils';
+import { withUnstatedContainers } from '../../UnstatedUtils';
 import { toastSuccess, toastError } from '../../../util/apiNotification';
 
 import AppContainer from '../../../services/AppContainer';
@@ -94,9 +94,7 @@ class SiteUrlSetting extends React.Component {
 /**
  * Wrapper component for using unstated
  */
-const SiteUrlSettingWrapper = (props) => {
-  return createSubscribedElement(SiteUrlSetting, props, [AppContainer, AdminAppContainer]);
-};
+const SiteUrlSettingWrapper = withUnstatedContainers(SiteUrlSetting, [AppContainer, AdminAppContainer]);
 
 SiteUrlSetting.propTypes = {
   t: PropTypes.func.isRequired, // i18next

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

@@ -6,7 +6,7 @@ import { withTranslation } from 'react-i18next';
 import AppContainer from '../../../services/AppContainer';
 import AdminCustomizeContainer from '../../../services/AdminCustomizeContainer';
 
-import { createSubscribedElement } from '../../UnstatedUtils';
+import { withUnstatedContainers } from '../../UnstatedUtils';
 import { toastError } from '../../../util/apiNotification';
 
 import CustomizeLayoutSetting from './CustomizeLayoutSetting';
@@ -75,9 +75,7 @@ class Customize extends React.Component {
 
 }
 
-const CustomizeWrapper = (props) => {
-  return createSubscribedElement(Customize, props, [AppContainer, AdminCustomizeContainer]);
-};
+const CustomizeWrapper = withUnstatedContainers(Customize, [AppContainer, AdminCustomizeContainer]);
 
 Customize.propTypes = {
   t: PropTypes.func.isRequired, // i18next

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

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 import { Card, CardBody } from 'reactstrap';
 
-import { createSubscribedElement } from '../../UnstatedUtils';
+import { withUnstatedContainers } from '../../UnstatedUtils';
 import { toastSuccess, toastError } from '../../../util/apiNotification';
 
 import AppContainer from '../../../services/AppContainer';
@@ -68,9 +68,7 @@ class CustomizeCssSetting extends React.Component {
 
 }
 
-const CustomizeCssSettingWrapper = (props) => {
-  return createSubscribedElement(CustomizeCssSetting, props, [AppContainer, AdminCustomizeContainer]);
-};
+const CustomizeCssSettingWrapper = withUnstatedContainers(CustomizeCssSetting, [AppContainer, AdminCustomizeContainer]);
 
 CustomizeCssSetting.propTypes = {
   t: PropTypes.func.isRequired, // i18next

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

@@ -6,7 +6,7 @@ import {
   Dropdown, DropdownToggle, DropdownMenu, DropdownItem,
 } from 'reactstrap';
 
-import { createSubscribedElement } from '../../UnstatedUtils';
+import { withUnstatedContainers } from '../../UnstatedUtils';
 import { toastSuccess, toastError } from '../../../util/apiNotification';
 
 import AppContainer from '../../../services/AppContainer';
@@ -173,9 +173,7 @@ class CustomizeFunctionSetting extends React.Component {
 
 }
 
-const CustomizeFunctionSettingWrapper = (props) => {
-  return createSubscribedElement(CustomizeFunctionSetting, props, [AppContainer, AdminCustomizeContainer]);
-};
+const CustomizeFunctionSettingWrapper = withUnstatedContainers(CustomizeFunctionSetting, [AppContainer, AdminCustomizeContainer]);
 
 CustomizeFunctionSetting.propTypes = {
   t: PropTypes.func.isRequired, // i18next

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

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 import { Card, CardBody } from 'reactstrap';
 
-import { createSubscribedElement } from '../../UnstatedUtils';
+import { withUnstatedContainers } from '../../UnstatedUtils';
 import { toastSuccess, toastError } from '../../../util/apiNotification';
 
 import AppContainer from '../../../services/AppContainer';
@@ -78,9 +78,7 @@ class CustomizeHeaderSetting extends React.Component {
 
 }
 
-const CustomizeHeaderSettingWrapper = (props) => {
-  return createSubscribedElement(CustomizeHeaderSetting, props, [AppContainer, AdminCustomizeContainer]);
-};
+const CustomizeHeaderSettingWrapper = withUnstatedContainers(CustomizeHeaderSetting, [AppContainer, AdminCustomizeContainer]);
 
 CustomizeHeaderSetting.propTypes = {
   t: PropTypes.func.isRequired, // i18next

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

@@ -6,7 +6,7 @@ import {
   Dropdown, DropdownToggle, DropdownMenu, DropdownItem,
 } from 'reactstrap';
 
-import { createSubscribedElement } from '../../UnstatedUtils';
+import { withUnstatedContainers } from '../../UnstatedUtils';
 import { toastSuccess, toastError } from '../../../util/apiNotification';
 
 import AppContainer from '../../../services/AppContainer';
@@ -145,9 +145,7 @@ class CustomizeHighlightSetting extends React.Component {
 
 }
 
-const CustomizeHighlightSettingWrapper = (props) => {
-  return createSubscribedElement(CustomizeHighlightSetting, props, [AppContainer, AdminCustomizeContainer]);
-};
+const CustomizeHighlightSettingWrapper = withUnstatedContainers(CustomizeHighlightSetting, [AppContainer, AdminCustomizeContainer]);
 
 CustomizeHighlightSetting.propTypes = {
   t: PropTypes.func.isRequired, // i18next

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

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
-import { createSubscribedElement } from '../../UnstatedUtils';
+import { withUnstatedContainers } from '../../UnstatedUtils';
 import AdminCustomizeContainer from '../../../services/AdminCustomizeContainer';
 import AppContainer from '../../../services/AppContainer';
 
@@ -56,9 +56,7 @@ class CustomizeLayoutOptions extends React.Component {
 
 }
 
-const CustomizeLayoutOptionsWrapper = (props) => {
-  return createSubscribedElement(CustomizeLayoutOptions, props, [AppContainer, AdminCustomizeContainer]);
-};
+const CustomizeLayoutOptionsWrapper = withUnstatedContainers(CustomizeLayoutOptions, [AppContainer, AdminCustomizeContainer]);
 
 CustomizeLayoutOptions.propTypes = {
   t: PropTypes.func.isRequired, // i18next

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

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
-import { createSubscribedElement } from '../../UnstatedUtils';
+import { withUnstatedContainers } from '../../UnstatedUtils';
 import { toastSuccess, toastError } from '../../../util/apiNotification';
 
 import AppContainer from '../../../services/AppContainer';
@@ -68,9 +68,7 @@ class CustomizeLayoutSetting extends React.Component {
 
 }
 
-const CustomizeLayoutSettingWrapper = (props) => {
-  return createSubscribedElement(CustomizeLayoutSetting, props, [AppContainer, AdminCustomizeContainer]);
-};
+const CustomizeLayoutSettingWrapper = withUnstatedContainers(CustomizeLayoutSetting, [AppContainer, AdminCustomizeContainer]);
 
 CustomizeLayoutSetting.propTypes = {
   t: PropTypes.func.isRequired, // i18next

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

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 import { Card, CardBody } from 'reactstrap';
 
-import { createSubscribedElement } from '../../UnstatedUtils';
+import { withUnstatedContainers } from '../../UnstatedUtils';
 import { toastSuccess, toastError } from '../../../util/apiNotification';
 
 import AppContainer from '../../../services/AppContainer';
@@ -109,9 +109,7 @@ class CustomizeScriptSetting extends React.Component {
 
 }
 
-const CustomizeScriptSettingWrapper = (props) => {
-  return createSubscribedElement(CustomizeScriptSetting, props, [AppContainer, AdminCustomizeContainer]);
-};
+const CustomizeScriptSettingWrapper = withUnstatedContainers(CustomizeScriptSetting, [AppContainer, AdminCustomizeContainer]);
 
 CustomizeScriptSetting.propTypes = {
   t: PropTypes.func.isRequired, // i18next

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

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
 
-import { createSubscribedElement } from '../../UnstatedUtils';
+import { withUnstatedContainers } from '../../UnstatedUtils';
 
 import AppContainer from '../../../services/AppContainer';
 import ThemeColorBox from './ThemeColorBox';
@@ -81,9 +81,7 @@ class CustomizeThemeOptions extends React.Component {
 
 }
 
-const CustomizeThemeOptionsWrapper = (props) => {
-  return createSubscribedElement(CustomizeThemeOptions, props, [AppContainer, AdminCustomizeContainer]);
-};
+const CustomizeThemeOptionsWrapper = withUnstatedContainers(CustomizeThemeOptions, [AppContainer, AdminCustomizeContainer]);
 
 CustomizeThemeOptions.propTypes = {
   t: PropTypes.func.isRequired, // i18next

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

@@ -7,7 +7,7 @@ import { Card, CardBody } from 'reactstrap';
 import AppContainer from '../../../services/AppContainer';
 import AdminCustomizeContainer from '../../../services/AdminCustomizeContainer';
 import AdminUpdateButtonRow from '../Common/AdminUpdateButtonRow';
-import { createSubscribedElement } from '../../UnstatedUtils';
+import { withUnstatedContainers } from '../../UnstatedUtils';
 import { toastSuccess, toastError } from '../../../util/apiNotification';
 
 class CustomizeTitle extends React.Component {
@@ -85,9 +85,7 @@ class CustomizeTitle extends React.Component {
 
 }
 
-const CustomizeTitleWrapper = (props) => {
-  return createSubscribedElement(CustomizeTitle, props, [AppContainer, AdminCustomizeContainer]);
-};
+const CustomizeTitleWrapper = withUnstatedContainers(CustomizeTitle, [AppContainer, AdminCustomizeContainer]);
 
 CustomizeTitle.propTypes = {
   t: PropTypes.func.isRequired, // i18next

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

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
-import { createSubscribedElement } from '../../UnstatedUtils';
+import { withUnstatedContainers } from '../../UnstatedUtils';
 import AppContainer from '../../../services/AppContainer';
 import WebsocketContainer from '../../../services/WebsocketContainer';
 import { toastSuccess, toastError } from '../../../util/apiNotification';
@@ -224,9 +224,7 @@ class ElasticsearchManagement extends React.Component {
 /**
  * Wrapper component for using unstated
  */
-const ElasticsearchManagementWrapper = (props) => {
-  return createSubscribedElement(ElasticsearchManagement, props, [AppContainer, WebsocketContainer]);
-};
+const ElasticsearchManagementWrapper = withUnstatedContainers(ElasticsearchManagement, [AppContainer, WebsocketContainer]);
 
 ElasticsearchManagement.propTypes = {
   t: PropTypes.func.isRequired, // i18next

src/client/js/components/Admin/ElasticsearchManagement/NormalizeIndicesControls.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
-import { createSubscribedElement } from '../../UnstatedUtils';
+import { withUnstatedContainers } from '../../UnstatedUtils';
 
 class NormalizeIndicesControls extends React.PureComponent {
 
@@ -34,9 +34,7 @@ class NormalizeIndicesControls extends React.PureComponent {
 /**
  * Wrapper component for using unstated
  */
-const NormalizeIndicesControlsWrapper = (props) => {
-  return createSubscribedElement(NormalizeIndicesControls, props, []);
-};
+const NormalizeIndicesControlsWrapper = withUnstatedContainers(NormalizeIndicesControls, []);
 
 NormalizeIndicesControls.propTypes = {
   t: PropTypes.func.isRequired, // i18next

src/client/js/components/Admin/ElasticsearchManagement/RebuildIndexControls.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
-import { createSubscribedElement } from '../../UnstatedUtils';
+import { withUnstatedContainers } from '../../UnstatedUtils';
 import AppContainer from '../../../services/AppContainer';
 import WebsocketContainer from '../../../services/WebsocketContainer';
 
@@ -97,9 +97,7 @@ class RebuildIndexControls extends React.Component {
 /**
  * Wrapper component for using unstated
  */
-const RebuildIndexControlsWrapper = (props) => {
-  return createSubscribedElement(RebuildIndexControls, props, [AppContainer, WebsocketContainer]);
-};
+const RebuildIndexControlsWrapper = withUnstatedContainers(RebuildIndexControls, [AppContainer, WebsocketContainer]);
 
 RebuildIndexControls.propTypes = {
   t: PropTypes.func.isRequired, // i18next

src/client/js/components/Admin/ElasticsearchManagement/ReconnectControls.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
-import { createSubscribedElement } from '../../UnstatedUtils';
+import { withUnstatedContainers } from '../../UnstatedUtils';
 
 class ReconnectControls extends React.PureComponent {
 
@@ -33,9 +33,7 @@ class ReconnectControls extends React.PureComponent {
 /**
  * Wrapper component for using unstated
  */
-const ReconnectControlsWrapper = (props) => {
-  return createSubscribedElement(ReconnectControls, props, []);
-};
+const ReconnectControlsWrapper = withUnstatedContainers(ReconnectControls, []);
 
 ReconnectControls.propTypes = {
   t: PropTypes.func.isRequired, // i18next

src/client/js/components/Admin/ElasticsearchManagement/StatusTable.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
-import { createSubscribedElement } from '../../UnstatedUtils';
+import { withUnstatedContainers } from '../../UnstatedUtils';
 
 class StatusTable extends React.PureComponent {
 
@@ -163,9 +163,7 @@ class StatusTable extends React.PureComponent {
 /**
  * Wrapper component for using unstated
  */
-const StatusTableWrapper = (props) => {
-  return createSubscribedElement(StatusTable, props, []);
-};
+const StatusTableWrapper = withUnstatedContainers(StatusTable, []);
 
 StatusTable.propTypes = {
   t: PropTypes.func.isRequired, // i18next

src/client/js/components/Admin/ExportArchiveData/ArchiveFilesTable.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 import { format } from 'date-fns';
 
-import { createSubscribedElement } from '../../UnstatedUtils';
+import { withUnstatedContainers } from '../../UnstatedUtils';
 import AppContainer from '../../../services/AppContainer';
 
 import ArchiveFilesTableMenu from './ArchiveFilesTableMenu';
@@ -61,8 +61,6 @@ ArchiveFilesTable.propTypes = {
 /**
  * Wrapper component for using unstated
  */
-const ArchiveFilesTableWrapper = (props) => {
-  return createSubscribedElement(ArchiveFilesTable, props, [AppContainer]);
-};
+const ArchiveFilesTableWrapper = withUnstatedContainers(ArchiveFilesTable, [AppContainer]);
 
 export default withTranslation()(ArchiveFilesTableWrapper);

src/client/js/components/Admin/ExportArchiveData/ArchiveFilesTableMenu.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
-import { createSubscribedElement } from '../../UnstatedUtils';
+import { withUnstatedContainers } from '../../UnstatedUtils';
 import AppContainer from '../../../services/AppContainer';
 // import { toastSuccess, toastError } from '../../../util/apiNotification';
 
@@ -41,8 +41,6 @@ ArchiveFilesTableMenu.propTypes = {
 /**
  * Wrapper component for using unstated
  */
-const ArchiveFilesTableMenuWrapper = (props) => {
-  return createSubscribedElement(ArchiveFilesTableMenu, props, [AppContainer]);
-};
+const ArchiveFilesTableMenuWrapper = withUnstatedContainers(ArchiveFilesTableMenu, [AppContainer]);
 
 export default withTranslation()(ArchiveFilesTableMenuWrapper);

src/client/js/components/Admin/ExportArchiveData/SelectCollectionsModal.jsx

@@ -6,7 +6,7 @@ import {
 } from 'reactstrap';
 import * as toastr from 'toastr';
 
-import { createSubscribedElement } from '../../UnstatedUtils';
+import { withUnstatedContainers } from '../../UnstatedUtils';
 import AppContainer from '../../../services/AppContainer';
 // import { toastSuccess, toastError } from '../../../util/apiNotification';
 
@@ -242,8 +242,6 @@ SelectCollectionsModal.propTypes = {
 /**
  * Wrapper component for using unstated
  */
-const SelectCollectionsModalWrapper = (props) => {
-  return createSubscribedElement(SelectCollectionsModal, props, [AppContainer]);
-};
+const SelectCollectionsModalWrapper = withUnstatedContainers(SelectCollectionsModal, [AppContainer]);
 
 export default withTranslation()(SelectCollectionsModalWrapper);

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

@@ -4,7 +4,7 @@ import { withTranslation } from 'react-i18next';
 import * as toastr from 'toastr';
 
 
-import { createSubscribedElement } from '../UnstatedUtils';
+import { withUnstatedContainers } from '../UnstatedUtils';
 // import { toastSuccess, toastError } from '../../../util/apiNotification';
 
 import AppContainer from '../../services/AppContainer';
@@ -254,8 +254,6 @@ ExportArchiveDataPage.propTypes = {
 /**
  * Wrapper component for using unstated
  */
-const ExportArchiveDataPageWrapper = (props) => {
-  return createSubscribedElement(ExportArchiveDataPage, props, [AppContainer, WebsocketContainer]);
-};
+const ExportArchiveDataPageWrapper = withUnstatedContainers(ExportArchiveDataPage, [AppContainer, WebsocketContainer]);
 
 export default withTranslation()(ExportArchiveDataPageWrapper);

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

@@ -2,7 +2,7 @@ import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
-import { createSubscribedElement } from '../UnstatedUtils';
+import { withUnstatedContainers } from '../UnstatedUtils';
 import AppContainer from '../../services/AppContainer';
 
 import ElasticsearchManagement from './ElasticsearchManagement/ElasticsearchManagement';
@@ -23,9 +23,7 @@ class FullTextSearchManagement extends React.Component {
 
 }
 
-const FullTextSearchManagementWrapper = (props) => {
-  return createSubscribedElement(FullTextSearchManagement, props, [AppContainer]);
-};
+const FullTextSearchManagementWrapper = withUnstatedContainers(FullTextSearchManagement, [AppContainer]);
 
 FullTextSearchManagement.propTypes = {
   t: PropTypes.func.isRequired, // i18next

src/client/js/components/Admin/ImportData/GrowiArchive/ErrorViewer.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 import { Modal, ModalHeader, ModalBody } from 'reactstrap';
 
-import { createSubscribedElement } from '../../../UnstatedUtils';
+import { withUnstatedContainers } from '../../../UnstatedUtils';
 
 
 class ErrorViewer extends React.Component {
@@ -45,8 +45,6 @@ ErrorViewer.propTypes = {
 /**
  * Wrapper component for using unstated
  */
-const ErrorViewerWrapper = (props) => {
-  return createSubscribedElement(ErrorViewer, props, []);
-};
+const ErrorViewerWrapper = withUnstatedContainers(ErrorViewer, []);
 
 export default withTranslation()(ErrorViewerWrapper);

src/client/js/components/Admin/ImportData/GrowiArchive/ImportCollectionConfigurationModal.jsx

@@ -12,7 +12,7 @@ import {
 
 import GrowiArchiveImportOption from '@commons/models/admin/growi-archive-import-option';
 
-import { createSubscribedElement } from '../../../UnstatedUtils';
+import { withUnstatedContainers } from '../../../UnstatedUtils';
 import AppContainer from '../../../../services/AppContainer';
 // import { toastSuccess, toastError } from '../../../util/apiNotification';
 
@@ -236,8 +236,6 @@ ImportCollectionConfigurationModal.propTypes = {
 /**
  * Wrapper component for using unstated
  */
-const ImportCollectionConfigurationModalWrapper = (props) => {
-  return createSubscribedElement(ImportCollectionConfigurationModal, props, [AppContainer]);
-};
+const ImportCollectionConfigurationModalWrapper = withUnstatedContainers(ImportCollectionConfigurationModal, [AppContainer]);
 
 export default withTranslation()(ImportCollectionConfigurationModalWrapper);

src/client/js/components/Admin/ImportData/GrowiArchive/ImportForm.jsx

@@ -6,7 +6,7 @@ import GrowiArchiveImportOption from '@commons/models/admin/growi-archive-import
 import ImportOptionForPages from '@commons/models/admin/import-option-for-pages';
 import ImportOptionForRevisions from '@commons/models/admin/import-option-for-revisions';
 
-import { createSubscribedElement } from '../../../UnstatedUtils';
+import { withUnstatedContainers } from '../../../UnstatedUtils';
 import AppContainer from '../../../../services/AppContainer';
 import WebsocketContainer from '../../../../services/WebsocketContainer';
 import { toastSuccess, toastError } from '../../../../util/apiNotification';
@@ -504,8 +504,6 @@ ImportForm.propTypes = {
 /**
  * Wrapper component for using unstated
  */
-const ImportFormWrapper = (props) => {
-  return createSubscribedElement(ImportForm, props, [AppContainer, WebsocketContainer]);
-};
+const ImportFormWrapper = withUnstatedContainers(ImportForm, [AppContainer, WebsocketContainer]);
 
 export default withTranslation()(ImportFormWrapper);

src/client/js/components/Admin/ImportData/GrowiArchive/UploadForm.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
-import { createSubscribedElement } from '../../../UnstatedUtils';
+import { withUnstatedContainers } from '../../../UnstatedUtils';
 import AppContainer from '../../../../services/AppContainer';
 // import { toastSuccess, toastError } from '../../../util/apiNotification';
 
@@ -88,8 +88,6 @@ UploadForm.propTypes = {
 /**
  * Wrapper component for using unstated
  */
-const UploadFormWrapper = (props) => {
-  return createSubscribedElement(UploadForm, props, [AppContainer]);
-};
+const UploadFormWrapper = withUnstatedContainers(UploadForm, [AppContainer]);
 
 export default withTranslation()(UploadFormWrapper);

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

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 import * as toastr from 'toastr';
 
-import { createSubscribedElement } from '../../UnstatedUtils';
+import { withUnstatedContainers } from '../../UnstatedUtils';
 import AppContainer from '../../../services/AppContainer';
 // import { toastSuccess, toastError } from '../../../util/apiNotification';
 
@@ -113,8 +113,6 @@ GrowiArchiveSection.propTypes = {
 /**
  * Wrapper component for using unstated
  */
-const GrowiArchiveSectionWrapper = (props) => {
-  return createSubscribedElement(GrowiArchiveSection, props, [AppContainer]);
-};
+const GrowiArchiveSectionWrapper = withUnstatedContainers(GrowiArchiveSection, [AppContainer]);
 
 export default withTranslation()(GrowiArchiveSectionWrapper);

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

@@ -3,7 +3,7 @@ import { withTranslation } from 'react-i18next';
 import PropTypes from 'prop-types';
 import loggerFactory from '@alias/logger';
 
-import { createSubscribedElement } from '../UnstatedUtils';
+import { withUnstatedContainers } from '../UnstatedUtils';
 import { toastSuccess, toastError } from '../../util/apiNotification';
 
 import AppContainer from '../../services/AppContainer';
@@ -339,9 +339,7 @@ ImportDataPage.propTypes = {
 /**
  * Wrapper component for using unstated
  */
-const ImportDataPageWrapper = (props) => {
-  return createSubscribedElement(ImportDataPage, props, [AppContainer]);
-};
+const ImportDataPageWrapper = withUnstatedContainers(ImportDataPage, [AppContainer]);
 
 
 export default withTranslation()(ImportDataPageWrapper);

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

@@ -4,7 +4,7 @@ import { withTranslation } from 'react-i18next';
 
 import PaginationWrapper from '../PaginationWrapper';
 
-import { createSubscribedElement } from '../UnstatedUtils';
+import { withUnstatedContainers } from '../UnstatedUtils';
 import AppContainer from '../../services/AppContainer';
 import AdminExternalAccountsContainer from '../../services/AdminExternalAccountsContainer';
 import ExternalAccountTable from './Users/ExternalAccountTable';
@@ -72,9 +72,7 @@ ManageExternalAccount.propTypes = {
   adminExternalAccountsContainer: PropTypes.instanceOf(AdminExternalAccountsContainer).isRequired,
 };
 
-const ManageExternalAccountWrapper = (props) => {
-  return createSubscribedElement(ManageExternalAccount, props, [AppContainer, AdminExternalAccountsContainer]);
-};
+const ManageExternalAccountWrapper = withUnstatedContainers(ManageExternalAccount, [AppContainer, AdminExternalAccountsContainer]);
 
 
 export default withTranslation()(ManageExternalAccountWrapper);

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

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 import loggerFactory from '@alias/logger';
 
-import { createSubscribedElement } from '../../UnstatedUtils';
+import { withUnstatedContainers } from '../../UnstatedUtils';
 import { toastSuccess, toastError } from '../../../util/apiNotification';
 
 
@@ -106,9 +106,7 @@ class LineBreakForm extends React.Component {
 /**
  * Wrapper component for using unstated
  */
-const LineBreakFormWrapper = (props) => {
-  return createSubscribedElement(LineBreakForm, props, [AppContainer, AdminMarkDownContainer]);
-};
+const LineBreakFormWrapper = withUnstatedContainers(LineBreakForm, [AppContainer, AdminMarkDownContainer]);
 
 LineBreakForm.propTypes = {
   t: PropTypes.func.isRequired, // i18next

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

@@ -5,7 +5,7 @@ import { withTranslation } from 'react-i18next';
 
 import loggerFactory from '@alias/logger';
 
-import { createSubscribedElement } from '../../UnstatedUtils';
+import { withUnstatedContainers } from '../../UnstatedUtils';
 import { toastError } from '../../../util/apiNotification';
 
 import AppContainer from '../../../services/AppContainer';
@@ -63,9 +63,7 @@ class MarkdownSetting extends React.Component {
 
 }
 
-const MarkdownSettingWrapper = (props) => {
-  return createSubscribedElement(MarkdownSetting, props, [AppContainer, AdminMarkDownContainer]);
-};
+const MarkdownSettingWrapper = withUnstatedContainers(MarkdownSetting, [AppContainer, AdminMarkDownContainer]);
 
 MarkdownSetting.propTypes = {
   t: PropTypes.func.isRequired, // i18next

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

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 import loggerFactory from '@alias/logger';
 
-import { createSubscribedElement } from '../../UnstatedUtils';
+import { withUnstatedContainers } from '../../UnstatedUtils';
 import { toastSuccess, toastError } from '../../../util/apiNotification';
 
 import AppContainer from '../../../services/AppContainer';
@@ -127,9 +127,7 @@ class PresentationForm extends React.Component {
 
 }
 
-const PresentationFormWrapper = (props) => {
-  return createSubscribedElement(PresentationForm, props, [AppContainer, AdminMarkDownContainer]);
-};
+const PresentationFormWrapper = withUnstatedContainers(PresentationForm, [AppContainer, AdminMarkDownContainer]);
 
 PresentationForm.propTypes = {
   t: PropTypes.func.isRequired, // i18next

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

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
-import { createSubscribedElement } from '../../UnstatedUtils';
+import { withUnstatedContainers } from '../../UnstatedUtils';
 import { tags, attrs } from '../../../../../lib/service/xss/recommended-whitelist';
 
 import AppContainer from '../../../services/AppContainer';
@@ -75,9 +75,7 @@ class WhiteListInput extends React.Component {
 
 }
 
-const WhiteListWrapper = (props) => {
-  return createSubscribedElement(WhiteListInput, props, [AppContainer, AdminMarkDownContainer]);
-};
+const WhiteListWrapper = withUnstatedContainers(WhiteListInput, [AppContainer, AdminMarkDownContainer]);
 
 WhiteListInput.propTypes = {
   t: PropTypes.func.isRequired, // i18next

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

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 import loggerFactory from '@alias/logger';
 
-import { createSubscribedElement } from '../../UnstatedUtils';
+import { withUnstatedContainers } from '../../UnstatedUtils';
 import { toastSuccess, toastError } from '../../../util/apiNotification';
 import { tags, attrs } from '../../../../../lib/service/xss/recommended-whitelist';
 
@@ -162,9 +162,7 @@ class XssForm extends React.Component {
 
 }
 
-const XssFormWrapper = (props) => {
-  return createSubscribedElement(XssForm, props, [AppContainer, AdminMarkDownContainer]);
-};
+const XssFormWrapper = withUnstatedContainers(XssForm, [AppContainer, AdminMarkDownContainer]);
 
 XssForm.propTypes = {
   t: PropTypes.func.isRequired, // i18next

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

@@ -4,7 +4,7 @@ import { withTranslation } from 'react-i18next';
 
 import loggerFactory from '@alias/logger';
 
-import { createSubscribedElement } from '../../UnstatedUtils';
+import { withUnstatedContainers } from '../../UnstatedUtils';
 import { toastSuccess, toastError } from '../../../util/apiNotification';
 
 import AppContainer from '../../../services/AppContainer';
@@ -127,9 +127,7 @@ class GlobalNotification extends React.Component {
 
 }
 
-const GlobalNotificationWrapper = (props) => {
-  return createSubscribedElement(GlobalNotification, props, [AppContainer, AdminNotificationContainer]);
-};
+const GlobalNotificationWrapper = withUnstatedContainers(GlobalNotification, [AppContainer, AdminNotificationContainer]);
 
 GlobalNotification.propTypes = {
   t: PropTypes.func.isRequired, // i18next

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

@@ -4,7 +4,7 @@ import { withTranslation } from 'react-i18next';
 import urljoin from 'url-join';
 import loggerFactory from '@alias/logger';
 
-import { createSubscribedElement } from '../../UnstatedUtils';
+import { withUnstatedContainers } from '../../UnstatedUtils';
 import { toastSuccess, toastError } from '../../../util/apiNotification';
 
 import AppContainer from '../../../services/AppContainer';
@@ -171,9 +171,7 @@ class GlobalNotificationList extends React.Component {
 
 }
 
-const GlobalNotificationListWrapper = (props) => {
-  return createSubscribedElement(GlobalNotificationList, props, [AppContainer, AdminNotificationContainer]);
-};
+const GlobalNotificationListWrapper = withUnstatedContainers(GlobalNotificationList, [AppContainer, AdminNotificationContainer]);
 
 GlobalNotificationList.propTypes = {
   t: PropTypes.func.isRequired, // i18next

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

@@ -10,7 +10,7 @@ import { toastError } from '../../../util/apiNotification';
 import TriggerEventCheckBox from './TriggerEventCheckBox';
 import AdminUpdateButtonRow from '../Common/AdminUpdateButtonRow';
 import AppContainer from '../../../services/AppContainer';
-import { createSubscribedElement } from '../../UnstatedUtils';
+import { withUnstatedContainers } from '../../UnstatedUtils';
 
 const logger = loggerFactory('growi:manageGlobalNotification');
 
@@ -303,9 +303,7 @@ class ManageGlobalNotification extends React.Component {
 
 }
 
-const ManageGlobalNotificationWrapper = (props) => {
-  return createSubscribedElement(ManageGlobalNotification, props, [AppContainer]);
-};
+const ManageGlobalNotificationWrapper = withUnstatedContainers(ManageGlobalNotification, [AppContainer]);
 
 ManageGlobalNotification.propTypes = {
   t: PropTypes.func.isRequired, // i18next

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

@@ -7,7 +7,7 @@ import {
 
 import loggerFactory from '@alias/logger';
 
-import { createSubscribedElement } from '../../UnstatedUtils';
+import { withUnstatedContainers } from '../../UnstatedUtils';
 import { toastError } from '../../../util/apiNotification';
 
 import AppContainer from '../../../services/AppContainer';
@@ -104,9 +104,7 @@ class NotificationSetting extends React.Component {
 
 }
 
-const NotificationSettingWrapper = (props) => {
-  return createSubscribedElement(NotificationSetting, props, [AppContainer, AdminNotificationContainer]);
-};
+const NotificationSettingWrapper = withUnstatedContainers(NotificationSetting, [AppContainer, AdminNotificationContainer]);
 
 NotificationSetting.propTypes = {
   t: PropTypes.func.isRequired, // i18next

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

@@ -4,7 +4,7 @@ import { withTranslation } from 'react-i18next';
 
 import loggerFactory from '@alias/logger';
 
-import { createSubscribedElement } from '../../UnstatedUtils';
+import { withUnstatedContainers } from '../../UnstatedUtils';
 import { toastSuccess, toastError } from '../../../util/apiNotification';
 
 import AppContainer from '../../../services/AppContainer';
@@ -170,9 +170,7 @@ class SlackAppConfiguration extends React.Component {
 
 }
 
-const SlackAppConfigurationWrapper = (props) => {
-  return createSubscribedElement(SlackAppConfiguration, props, [AppContainer, AdminNotificationContainer]);
-};
+const SlackAppConfigurationWrapper = withUnstatedContainers(SlackAppConfiguration, [AppContainer, AdminNotificationContainer]);
 
 SlackAppConfiguration.propTypes = {
   t: PropTypes.func.isRequired, // i18next

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

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
-import { createSubscribedElement } from '../../UnstatedUtils';
+import { withUnstatedContainers } from '../../UnstatedUtils';
 
 import AppContainer from '../../../services/AppContainer';
 import AdminNotificationContainer from '../../../services/AdminNotificationContainer';
@@ -36,9 +36,7 @@ class UserNotificationRow extends React.PureComponent {
 }
 
 
-const UserNotificationRowWrapper = (props) => {
-  return createSubscribedElement(UserNotificationRow, props, [AppContainer, AdminNotificationContainer]);
-};
+const UserNotificationRowWrapper = withUnstatedContainers(UserNotificationRow, [AppContainer, AdminNotificationContainer]);
 
 UserNotificationRow.propTypes = {
   t: PropTypes.func.isRequired, // i18next

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

@@ -4,7 +4,7 @@ import { withTranslation } from 'react-i18next';
 
 import loggerFactory from '@alias/logger';
 
-import { createSubscribedElement } from '../../UnstatedUtils';
+import { withUnstatedContainers } from '../../UnstatedUtils';
 import { toastSuccess, toastError } from '../../../util/apiNotification';
 
 import AppContainer from '../../../services/AppContainer';
@@ -145,9 +145,7 @@ class UserTriggerNotification extends React.Component {
 }
 
 
-const UserTriggerNotificationWrapper = (props) => {
-  return createSubscribedElement(UserTriggerNotification, props, [AppContainer, AdminNotificationContainer]);
-};
+const UserTriggerNotificationWrapper = withUnstatedContainers(UserTriggerNotification, [AppContainer, AdminNotificationContainer]);
 
 UserTriggerNotification.propTypes = {
   t: PropTypes.func.isRequired, // i18next

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

@@ -3,10 +3,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
-import { createSubscribedElement } from '../../UnstatedUtils';
+import { withUnstatedContainers } from '../../UnstatedUtils';
 import { toastSuccess, toastError } from '../../../util/apiNotification';
 
-import AppContainer from '../../../services/AppContainer';
 import AdminGeneralSecurityContainer from '../../../services/AdminGeneralSecurityContainer';
 import AdminBasicSecurityContainer from '../../../services/AdminBasicSecurityContainer';
 
@@ -135,13 +134,13 @@ class BasicSecurityManagement extends React.Component {
 
 BasicSecurityManagement.propTypes = {
   t: PropTypes.func.isRequired, // i18next
-  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
   adminGeneralSecurityContainer: PropTypes.instanceOf(AdminGeneralSecurityContainer).isRequired,
   adminBasicSecurityContainer: PropTypes.instanceOf(AdminBasicSecurityContainer).isRequired,
 };
 
-const OidcSecurityManagementWrapper = (props) => {
-  return createSubscribedElement(BasicSecurityManagement, props, [AppContainer, AdminGeneralSecurityContainer, AdminBasicSecurityContainer]);
-};
+const OidcSecurityManagementWrapper = withUnstatedContainers(
+  BasicSecurityManagement,
+  [AdminGeneralSecurityContainer, AdminBasicSecurityContainer],
+);
 
 export default withTranslation()(OidcSecurityManagementWrapper);

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

@@ -3,7 +3,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
-import { createSubscribedElement } from '../../UnstatedUtils';
+import { withUnstatedContainers } from '../../UnstatedUtils';
 
 import AppContainer from '../../../services/AppContainer';
 import AdminGeneralSecurityContainer from '../../../services/AdminGeneralSecurityContainer';
@@ -34,8 +34,6 @@ FacebookSecurityManagement.propTypes = {
   adminGeneralSecurityContainer: PropTypes.instanceOf(AdminGeneralSecurityContainer).isRequired,
 };
 
-const TwitterSecurityManagementWrapper = (props) => {
-  return createSubscribedElement(FacebookSecurityManagement, props, [AppContainer, AdminGeneralSecurityContainer]);
-};
+const TwitterSecurityManagementWrapper = withUnstatedContainers(FacebookSecurityManagement, [AppContainer, AdminGeneralSecurityContainer]);
 
 export default withTranslation()(TwitterSecurityManagementWrapper);

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

@@ -3,10 +3,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
-import { createSubscribedElement } from '../../UnstatedUtils';
+import { withUnstatedContainers } from '../../UnstatedUtils';
 import { toastSuccess, toastError } from '../../../util/apiNotification';
 
-import AppContainer from '../../../services/AppContainer';
 import AdminGeneralSecurityContainer from '../../../services/AdminGeneralSecurityContainer';
 import AdminGitHubSecurityContainer from '../../../services/AdminGitHubSecurityContainer';
 
@@ -206,13 +205,13 @@ class GitHubSecurityManagement extends React.Component {
 
 GitHubSecurityManagement.propTypes = {
   t: PropTypes.func.isRequired, // i18next
-  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
   adminGeneralSecurityContainer: PropTypes.instanceOf(AdminGeneralSecurityContainer).isRequired,
   adminGitHubSecurityContainer: PropTypes.instanceOf(AdminGitHubSecurityContainer).isRequired,
 };
 
-const GitHubSecurityManagementWrapper = (props) => {
-  return createSubscribedElement(GitHubSecurityManagement, props, [AppContainer, AdminGeneralSecurityContainer, AdminGitHubSecurityContainer]);
-};
+const GitHubSecurityManagementWrapper = withUnstatedContainers(
+  GitHubSecurityManagement,
+  [AdminGeneralSecurityContainer, AdminGitHubSecurityContainer],
+);
 
 export default withTranslation()(GitHubSecurityManagementWrapper);

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

@@ -3,7 +3,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
-import { createSubscribedElement } from '../../UnstatedUtils';
+import { withUnstatedContainers } from '../../UnstatedUtils';
 import { toastSuccess, toastError } from '../../../util/apiNotification';
 
 import AppContainer from '../../../services/AppContainer';
@@ -218,8 +218,9 @@ GoogleSecurityManagement.propTypes = {
   adminGoogleSecurityContainer: PropTypes.instanceOf(AdminGoogleSecurityContainer).isRequired,
 };
 
-const GoogleSecurityManagementWrapper = (props) => {
-  return createSubscribedElement(GoogleSecurityManagement, props, [AppContainer, AdminGeneralSecurityContainer, AdminGoogleSecurityContainer]);
-};
+const GoogleSecurityManagementWrapper = withUnstatedContainers(
+  GoogleSecurityManagement,
+  [AppContainer, AdminGeneralSecurityContainer, AdminGoogleSecurityContainer],
+);
 
 export default withTranslation()(GoogleSecurityManagementWrapper);

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

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 import loggerFactory from '@alias/logger';
 
-import { createSubscribedElement } from '../../UnstatedUtils';
+import { withUnstatedContainers } from '../../UnstatedUtils';
 import { toastSuccess, toastError } from '../../../util/apiNotification';
 
 import AppContainer from '../../../services/AppContainer';
@@ -139,8 +139,6 @@ LdapAuthTest.propTypes = {
   onChangePassword: PropTypes.func.isRequired,
 };
 
-const LdapAuthTestWrapper = (props) => {
-  return createSubscribedElement(LdapAuthTest, props, [AppContainer, AdminLdapSecurityContainer]);
-};
+const LdapAuthTestWrapper = withUnstatedContainers(LdapAuthTest, [AppContainer, AdminLdapSecurityContainer]);
 
 export default withTranslation()(LdapAuthTestWrapper);

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

@@ -8,7 +8,7 @@ import {
   ModalBody,
 } from 'reactstrap';
 
-import { createSubscribedElement } from '../../UnstatedUtils';
+import { withUnstatedContainers } from '../../UnstatedUtils';
 
 import AppContainer from '../../../services/AppContainer';
 import AdminLdapSecurityContainer from '../../../services/AdminLdapSecurityContainer';
@@ -74,8 +74,6 @@ LdapAuthTestModal.propTypes = {
   onClose: PropTypes.func.isRequired,
 };
 
-const LdapAuthTestModalWrapper = (props) => {
-  return createSubscribedElement(LdapAuthTestModal, props, [AppContainer, AdminLdapSecurityContainer]);
-};
+const LdapAuthTestModalWrapper = withUnstatedContainers(LdapAuthTestModal, [AppContainer, AdminLdapSecurityContainer]);
 
 export default withTranslation()(LdapAuthTestModalWrapper);

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

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
-import { createSubscribedElement } from '../../UnstatedUtils';
+import { withUnstatedContainers } from '../../UnstatedUtils';
 import { toastSuccess, toastError } from '../../../util/apiNotification';
 
 import AppContainer from '../../../services/AppContainer';
@@ -453,8 +453,6 @@ LdapSecuritySetting.propTypes = {
   adminLdapSecurityContainer: PropTypes.instanceOf(AdminLdapSecurityContainer).isRequired,
 };
 
-const LdapSecuritySettingWrapper = (props) => {
-  return createSubscribedElement(LdapSecuritySetting, props, [AppContainer, AdminGeneralSecurityContainer, AdminLdapSecurityContainer]);
-};
+const LdapSecuritySettingWrapper = withUnstatedContainers(LdapSecuritySetting, [AppContainer, AdminGeneralSecurityContainer, AdminLdapSecurityContainer]);
 
 export default withTranslation()(LdapSecuritySettingWrapper);

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

@@ -3,7 +3,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
-import { createSubscribedElement } from '../../UnstatedUtils';
+import { withUnstatedContainers } from '../../UnstatedUtils';
 import { toastSuccess, toastError } from '../../../util/apiNotification';
 
 import AppContainer from '../../../services/AppContainer';
@@ -183,8 +183,6 @@ LocalSecuritySetting.propTypes = {
   adminLocalSecurityContainer: PropTypes.instanceOf(AdminLocalSecurityContainer).isRequired,
 };
 
-const LocalSecuritySettingWrapper = (props) => {
-  return createSubscribedElement(LocalSecuritySetting, props, [AppContainer, AdminGeneralSecurityContainer, AdminLocalSecurityContainer]);
-};
+const LocalSecuritySettingWrapper = withUnstatedContainers(LocalSecuritySetting, [AppContainer, AdminGeneralSecurityContainer, AdminLocalSecurityContainer]);
 
 export default withTranslation()(LocalSecuritySettingWrapper);

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

@@ -3,7 +3,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
-import { createSubscribedElement } from '../../UnstatedUtils';
+import { withUnstatedContainers } from '../../UnstatedUtils';
 import { toastSuccess, toastError } from '../../../util/apiNotification';
 
 import AppContainer from '../../../services/AppContainer';
@@ -347,8 +347,6 @@ OidcSecurityManagement.propTypes = {
   adminOidcSecurityContainer: PropTypes.instanceOf(AdminOidcSecurityContainer).isRequired,
 };
 
-const OidcSecurityManagementWrapper = (props) => {
-  return createSubscribedElement(OidcSecurityManagement, props, [AppContainer, AdminGeneralSecurityContainer, AdminOidcSecurityContainer]);
-};
+const OidcSecurityManagementWrapper = withUnstatedContainers(OidcSecurityManagement, [AppContainer, AdminGeneralSecurityContainer, AdminOidcSecurityContainer]);
 
 export default withTranslation()(OidcSecurityManagementWrapper);

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

@@ -3,7 +3,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
-import { createSubscribedElement } from '../../UnstatedUtils';
+import { withUnstatedContainers } from '../../UnstatedUtils';
 import { toastSuccess, toastError } from '../../../util/apiNotification';
 
 import AppContainer from '../../../services/AppContainer';
@@ -546,8 +546,6 @@ SamlSecurityManagement.propTypes = {
   adminSamlSecurityContainer: PropTypes.instanceOf(AdminSamlSecurityContainer).isRequired,
 };
 
-const SamlSecurityManagementWrapper = (props) => {
-  return createSubscribedElement(SamlSecurityManagement, props, [AppContainer, AdminGeneralSecurityContainer, AdminSamlSecurityContainer]);
-};
+const SamlSecurityManagementWrapper = withUnstatedContainers(SamlSecurityManagement, [AppContainer, AdminGeneralSecurityContainer, AdminSamlSecurityContainer]);
 
 export default withTranslation()(SamlSecurityManagementWrapper);

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

@@ -5,7 +5,7 @@ import {
   TabContent, TabPane, Nav, NavItem, NavLink,
 } from 'reactstrap';
 
-import { createSubscribedElement } from '../../UnstatedUtils';
+import { withUnstatedContainers } from '../../UnstatedUtils';
 
 import AppContainer from '../../../services/AppContainer';
 import LdapSecuritySetting from './LdapSecuritySetting';
@@ -185,8 +185,6 @@ SecurityManagement.propTypes = {
   csrf: PropTypes.string,
 };
 
-const SecurityManagementWrapper = (props) => {
-  return createSubscribedElement(SecurityManagement, props, [AppContainer]);
-};
+const SecurityManagementWrapper = withUnstatedContainers(SecurityManagement, [AppContainer]);
 
 export default withTranslation()(SecurityManagementWrapper);

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

@@ -3,7 +3,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
-import { createSubscribedElement } from '../../UnstatedUtils';
+import { withUnstatedContainers } from '../../UnstatedUtils';
 import { toastSuccess, toastError } from '../../../util/apiNotification';
 
 import AppContainer from '../../../services/AppContainer';
@@ -224,8 +224,6 @@ SecuritySetting.propTypes = {
   adminGeneralSecurityContainer: PropTypes.instanceOf(AdminGeneralSecurityContainer).isRequired,
 };
 
-const SecuritySettingWrapper = (props) => {
-  return createSubscribedElement(SecuritySetting, props, [AppContainer, AdminGeneralSecurityContainer]);
-};
+const SecuritySettingWrapper = withUnstatedContainers(SecuritySetting, [AppContainer, AdminGeneralSecurityContainer]);
 
 export default withTranslation()(SecuritySettingWrapper);

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

@@ -3,10 +3,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
-import { createSubscribedElement } from '../../UnstatedUtils';
+import { withUnstatedContainers } from '../../UnstatedUtils';
 import { toastSuccess, toastError } from '../../../util/apiNotification';
 
-import AppContainer from '../../../services/AppContainer';
 import AdminGeneralSecurityContainer from '../../../services/AdminGeneralSecurityContainer';
 import AdminTwitterSecurityContainer from '../../../services/AdminTwitterSecurityContainer';
 
@@ -214,13 +213,13 @@ class TwitterSecurityManagement extends React.Component {
 
 TwitterSecurityManagement.propTypes = {
   t: PropTypes.func.isRequired, // i18next
-  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
   adminGeneralSecurityContainer: PropTypes.instanceOf(AdminGeneralSecurityContainer).isRequired,
   adminTwitterSecurityContainer: PropTypes.instanceOf(AdminTwitterSecurityContainer).isRequired,
 };
 
-const TwitterSecurityManagementWrapper = (props) => {
-  return createSubscribedElement(TwitterSecurityManagement, props, [AppContainer, AdminGeneralSecurityContainer, AdminTwitterSecurityContainer]);
-};
+const TwitterSecurityManagementWrapper = withUnstatedContainers(
+  TwitterSecurityManagement,
+  [AdminGeneralSecurityContainer, AdminTwitterSecurityContainer],
+);
 
 export default withTranslation()(TwitterSecurityManagementWrapper);

src/client/js/components/Admin/UserGroup/UserGroupCreateForm.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
-import { createSubscribedElement } from '../../UnstatedUtils';
+import { withUnstatedContainers } from '../../UnstatedUtils';
 import AppContainer from '../../../services/AppContainer';
 import { toastSuccess, toastError } from '../../../util/apiNotification';
 
@@ -105,9 +105,7 @@ class UserGroupCreateForm extends React.Component {
 /**
  * Wrapper component for using unstated
  */
-const UserGroupCreateFormWrapper = (props) => {
-  return createSubscribedElement(UserGroupCreateForm, props, [AppContainer]);
-};
+const UserGroupCreateFormWrapper = withUnstatedContainers(UserGroupCreateForm, [AppContainer]);
 
 UserGroupCreateForm.propTypes = {
   t: PropTypes.func.isRequired, // i18next

src/client/js/components/Admin/UserGroup/UserGroupDeleteModal.jsx

@@ -5,7 +5,7 @@ import {
   Modal, ModalHeader, ModalBody, ModalFooter,
 } from 'reactstrap';
 
-import { createSubscribedElement } from '../../UnstatedUtils';
+import { withUnstatedContainers } from '../../UnstatedUtils';
 import AppContainer from '../../../services/AppContainer';
 
 /**
@@ -195,9 +195,7 @@ class UserGroupDeleteModal extends React.Component {
 /**
  * Wrapper component for using unstated
  */
-const UserGroupDeleteModalWrapper = (props) => {
-  return createSubscribedElement(UserGroupDeleteModal, props, [AppContainer]);
-};
+const UserGroupDeleteModalWrapper = withUnstatedContainers(UserGroupDeleteModal, [AppContainer]);
 
 UserGroupDeleteModal.propTypes = {
   t: PropTypes.func.isRequired, // i18next

src/client/js/components/Admin/UserGroup/UserGroupPage.jsx

@@ -6,7 +6,7 @@ import UserGroupTable from './UserGroupTable';
 import UserGroupCreateForm from './UserGroupCreateForm';
 import UserGroupDeleteModal from './UserGroupDeleteModal';
 
-import { createSubscribedElement } from '../../UnstatedUtils';
+import { withUnstatedContainers } from '../../UnstatedUtils';
 import AppContainer from '../../../services/AppContainer';
 import { toastSuccess, toastError } from '../../../util/apiNotification';
 
@@ -175,9 +175,7 @@ class UserGroupPage extends React.Component {
 /**
  * Wrapper component for using unstated
  */
-const UserGroupPageWrapper = (props) => {
-  return createSubscribedElement(UserGroupPage, props, [AppContainer]);
-};
+const UserGroupPageWrapper = withUnstatedContainers(UserGroupPage, [AppContainer]);
 
 UserGroupPage.propTypes = {
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,

src/client/js/components/Admin/UserGroup/UserGroupTable.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 import dateFnsFormat from 'date-fns/format';
 
-import { createSubscribedElement } from '../../UnstatedUtils';
+import { withUnstatedContainers } from '../../UnstatedUtils';
 import AppContainer from '../../../services/AppContainer';
 
 class UserGroupTable extends React.Component {
@@ -115,9 +115,7 @@ class UserGroupTable extends React.Component {
 /**
  * Wrapper component for using unstated
  */
-const UserGroupTableWrapper = (props) => {
-  return createSubscribedElement(UserGroupTable, props, [AppContainer]);
-};
+const UserGroupTableWrapper = withUnstatedContainers(UserGroupTable, [AppContainer]);
 
 
 UserGroupTable.propTypes = {

src/client/js/components/Admin/UserGroupDetail/UserGroupDetailPage.jsx

@@ -6,7 +6,7 @@ import UserGroupEditForm from './UserGroupEditForm';
 import UserGroupUserTable from './UserGroupUserTable';
 import UserGroupUserModal from './UserGroupUserModal';
 import UserGroupPageList from './UserGroupPageList';
-import { createSubscribedElement } from '../../UnstatedUtils';
+import { withUnstatedContainers } from '../../UnstatedUtils';
 import AppContainer from '../../../services/AppContainer';
 
 class UserGroupDetailPage extends React.Component {
@@ -44,8 +44,6 @@ UserGroupDetailPage.propTypes = {
 /**
  * Wrapper component for using unstated
  */
-const UserGroupDetailPageWrapper = (props) => {
-  return createSubscribedElement(UserGroupDetailPage, props, [AppContainer]);
-};
+const UserGroupDetailPageWrapper = withUnstatedContainers(UserGroupDetailPage, [AppContainer]);
 
 export default withTranslation()(UserGroupDetailPageWrapper);

src/client/js/components/Admin/UserGroupDetail/UserGroupEditForm.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 import dateFnsFormat from 'date-fns/format';
 
-import { createSubscribedElement } from '../../UnstatedUtils';
+import { withUnstatedContainers } from '../../UnstatedUtils';
 import AppContainer from '../../../services/AppContainer';
 import AdminUserGroupDetailContainer from '../../../services/AdminUserGroupDetailContainer';
 import { toastSuccess, toastError } from '../../../util/apiNotification';
@@ -106,8 +106,6 @@ UserGroupEditForm.propTypes = {
 /**
  * Wrapper component for using unstated
  */
-const UserGroupEditFormWrapper = (props) => {
-  return createSubscribedElement(UserGroupEditForm, props, [AppContainer, AdminUserGroupDetailContainer]);
-};
+const UserGroupEditFormWrapper = withUnstatedContainers(UserGroupEditForm, [AppContainer, AdminUserGroupDetailContainer]);
 
 export default withTranslation()(UserGroupEditFormWrapper);

src/client/js/components/Admin/UserGroupDetail/UserGroupPageList.jsx

@@ -4,7 +4,7 @@ import { withTranslation } from 'react-i18next';
 
 import Page from '../../PageList/Page';
 import PaginationWrapper from '../../PaginationWrapper';
-import { createSubscribedElement } from '../../UnstatedUtils';
+import { withUnstatedContainers } from '../../UnstatedUtils';
 import AppContainer from '../../../services/AppContainer';
 import AdminUserGroupDetailContainer from '../../../services/AdminUserGroupDetailContainer';
 import { toastError } from '../../../util/apiNotification';
@@ -80,8 +80,6 @@ UserGroupPageList.propTypes = {
 /**
  * Wrapper component for using unstated
  */
-const UserGroupPageListWrapper = (props) => {
-  return createSubscribedElement(UserGroupPageList, props, [AppContainer, AdminUserGroupDetailContainer]);
-};
+const UserGroupPageListWrapper = withUnstatedContainers(UserGroupPageList, [AppContainer, AdminUserGroupDetailContainer]);
 
 export default withTranslation()(UserGroupPageListWrapper);

src/client/js/components/Admin/UserGroupDetail/UserGroupUserFormByInput.jsx

@@ -4,7 +4,7 @@ import { withTranslation } from 'react-i18next';
 
 import { AsyncTypeahead } from 'react-bootstrap-typeahead';
 import { debounce } from 'throttle-debounce';
-import { createSubscribedElement } from '../../UnstatedUtils';
+import { withUnstatedContainers } from '../../UnstatedUtils';
 import AppContainer from '../../../services/AppContainer';
 import AdminUserGroupDetailContainer from '../../../services/AdminUserGroupDetailContainer';
 import { toastSuccess, toastError } from '../../../util/apiNotification';
@@ -162,8 +162,6 @@ UserGroupUserFormByInput.propTypes = {
 /**
  * Wrapper component for using unstated
  */
-const UserGroupUserFormByInputWrapper = (props) => {
-  return createSubscribedElement(UserGroupUserFormByInput, props, [AppContainer, AdminUserGroupDetailContainer]);
-};
+const UserGroupUserFormByInputWrapper = withUnstatedContainers(UserGroupUserFormByInput, [AppContainer, AdminUserGroupDetailContainer]);
 
 export default withTranslation()(UserGroupUserFormByInputWrapper);

src/client/js/components/Admin/UserGroupDetail/UserGroupUserModal.jsx

@@ -6,7 +6,7 @@ import {
 } from 'reactstrap';
 
 import UserGroupUserFormByInput from './UserGroupUserFormByInput';
-import { createSubscribedElement } from '../../UnstatedUtils';
+import { withUnstatedContainers } from '../../UnstatedUtils';
 import AppContainer from '../../../services/AppContainer';
 import AdminUserGroupDetailContainer from '../../../services/AdminUserGroupDetailContainer';
 import RadioButtonForSerchUserOption from './RadioButtonForSerchUserOption';
@@ -84,8 +84,6 @@ UserGroupUserModal.propTypes = {
 /**
  * Wrapper component for using unstated
  */
-const UserGroupUserModalWrapper = (props) => {
-  return createSubscribedElement(UserGroupUserModal, props, [AppContainer, AdminUserGroupDetailContainer]);
-};
+const UserGroupUserModalWrapper = withUnstatedContainers(UserGroupUserModal, [AppContainer, AdminUserGroupDetailContainer]);
 
 export default withTranslation()(UserGroupUserModalWrapper);

src/client/js/components/Admin/UserGroupDetail/UserGroupUserTable.jsx

@@ -4,7 +4,7 @@ import { withTranslation } from 'react-i18next';
 import dateFnsFormat from 'date-fns/format';
 
 import UserPicture from '../../User/UserPicture';
-import { createSubscribedElement } from '../../UnstatedUtils';
+import { withUnstatedContainers } from '../../UnstatedUtils';
 import AppContainer from '../../../services/AppContainer';
 import AdminUserGroupDetailContainer from '../../../services/AdminUserGroupDetailContainer';
 import { toastSuccess, toastError } from '../../../util/apiNotification';
@@ -118,8 +118,6 @@ UserGroupUserTable.propTypes = {
 /**
  * Wrapper component for using unstated
  */
-const UserGroupUserTableWrapper = (props) => {
-  return createSubscribedElement(UserGroupUserTable, props, [AppContainer, AdminUserGroupDetailContainer]);
-};
+const UserGroupUserTableWrapper = withUnstatedContainers(UserGroupUserTable, [AppContainer, AdminUserGroupDetailContainer]);
 
 export default withTranslation()(UserGroupUserTableWrapper);

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

@@ -5,7 +5,7 @@ import { withTranslation } from 'react-i18next';
 import PaginationWrapper from '../PaginationWrapper';
 
 
-import { createSubscribedElement } from '../UnstatedUtils';
+import { withUnstatedContainers } from '../UnstatedUtils';
 import { toastError } from '../../util/apiNotification';
 
 import AppContainer from '../../services/AppContainer';
@@ -223,8 +223,6 @@ UserManagement.propTypes = {
   adminUsersContainer: PropTypes.instanceOf(AdminUsersContainer).isRequired,
 };
 
-const UserManagementWrapper = (props) => {
-  return createSubscribedElement(UserManagement, props, [AppContainer, AdminUsersContainer]);
-};
+const UserManagementWrapper = withUnstatedContainers(UserManagement, [AppContainer, AdminUsersContainer]);
 
 export default withTranslation()(UserManagementWrapper);

src/client/js/components/Admin/Users/ExternalAccountTable.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 import dateFnsFormat from 'date-fns/format';
 
-import { createSubscribedElement } from '../../UnstatedUtils';
+import { withUnstatedContainers } from '../../UnstatedUtils';
 import AppContainer from '../../../services/AppContainer';
 import AdminExternalAccountsContainer from '../../../services/AdminExternalAccountsContainer';
 
@@ -122,9 +122,7 @@ ExternalAccountTable.propTypes = {
   adminExternalAccountsContainer: PropTypes.instanceOf(AdminExternalAccountsContainer).isRequired,
 };
 
-const ExternalAccountTableWrapper = (props) => {
-  return createSubscribedElement(ExternalAccountTable, props, [AppContainer, AdminExternalAccountsContainer]);
-};
+const ExternalAccountTableWrapper = withUnstatedContainers(ExternalAccountTable, [AppContainer, AdminExternalAccountsContainer]);
 
 
 export default withTranslation()(ExternalAccountTableWrapper);

src/client/js/components/Admin/Users/GiveAdminButton.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
-import { createSubscribedElement } from '../../UnstatedUtils';
+import { withUnstatedContainers } from '../../UnstatedUtils';
 import AppContainer from '../../../services/AppContainer';
 import { toastSuccess, toastError } from '../../../util/apiNotification';
 import AdminUsersContainer from '../../../services/AdminUsersContainer';
@@ -42,9 +42,7 @@ class GiveAdminButton extends React.Component {
 /**
  * Wrapper component for using unstated
  */
-const GiveAdminButtonWrapper = (props) => {
-  return createSubscribedElement(GiveAdminButton, props, [AppContainer, AdminUsersContainer]);
-};
+const GiveAdminButtonWrapper = withUnstatedContainers(GiveAdminButton, [AppContainer, AdminUsersContainer]);
 
 GiveAdminButton.propTypes = {
   t: PropTypes.func.isRequired, // i18next

src/client/js/components/Admin/Users/InviteUserControl.jsx

@@ -2,7 +2,7 @@ import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
-import { createSubscribedElement } from '../../UnstatedUtils';
+import { withUnstatedContainers } from '../../UnstatedUtils';
 import AppContainer from '../../../services/AppContainer';
 import AdminUsersContainer from '../../../services/AdminUsersContainer';
 import UserInviteModal from './UserInviteModal';
@@ -24,9 +24,7 @@ class InviteUserControl extends React.Component {
 
 }
 
-const InviteUserControlWrapper = (props) => {
-  return createSubscribedElement(InviteUserControl, props, [AppContainer, AdminUsersContainer]);
-};
+const InviteUserControlWrapper = withUnstatedContainers(InviteUserControl, [AppContainer, AdminUsersContainer]);
 
 InviteUserControl.propTypes = {
   t: PropTypes.func.isRequired, // i18next

src/client/js/components/Admin/Users/PasswordResetModal.jsx

@@ -6,7 +6,7 @@ import {
 } from 'reactstrap';
 
 import { toastError } from '../../../util/apiNotification';
-import { createSubscribedElement } from '../../UnstatedUtils';
+import { withUnstatedContainers } from '../../UnstatedUtils';
 import AppContainer from '../../../services/AppContainer';
 
 class PasswordResetModal extends React.Component {
@@ -101,9 +101,7 @@ class PasswordResetModal extends React.Component {
 /**
  * Wrapper component for using unstated
  */
-const PasswordResetModalWrapper = (props) => {
-  return createSubscribedElement(PasswordResetModal, props, [AppContainer]);
-};
+const PasswordResetModalWrapper = withUnstatedContainers(PasswordResetModal, [AppContainer]);
 
 PasswordResetModal.propTypes = {
   t: PropTypes.func.isRequired, // i18next

src/client/js/components/Admin/Users/RemoveAdminButton.jsx

@@ -2,7 +2,7 @@ import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
-import { createSubscribedElement } from '../../UnstatedUtils';
+import { withUnstatedContainers } from '../../UnstatedUtils';
 import AppContainer from '../../../services/AppContainer';
 import { toastSuccess, toastError } from '../../../util/apiNotification';
 import AdminUsersContainer from '../../../services/AdminUsersContainer';
@@ -66,9 +66,7 @@ class RemoveAdminButton extends React.Component {
 /**
 * Wrapper component for using unstated
 */
-const RemoveAdminButtonWrapper = (props) => {
-  return createSubscribedElement(RemoveAdminButton, props, [AppContainer, AdminUsersContainer]);
-};
+const RemoveAdminButtonWrapper = withUnstatedContainers(RemoveAdminButton, [AppContainer, AdminUsersContainer]);
 
 RemoveAdminButton.propTypes = {
   t: PropTypes.func.isRequired, // i18next

src/client/js/components/Admin/Users/StatusActivateButton.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
-import { createSubscribedElement } from '../../UnstatedUtils';
+import { withUnstatedContainers } from '../../UnstatedUtils';
 import AppContainer from '../../../services/AppContainer';
 import AdminUsersContainer from '../../../services/AdminUsersContainer';
 import { toastSuccess, toastError } from '../../../util/apiNotification';
@@ -42,9 +42,7 @@ class StatusActivateButton extends React.Component {
 /**
  * Wrapper component for using unstated
  */
-const StatusActivateFormWrapper = (props) => {
-  return createSubscribedElement(StatusActivateButton, props, [AppContainer, AdminUsersContainer]);
-};
+const StatusActivateFormWrapper = withUnstatedContainers(StatusActivateButton, [AppContainer, AdminUsersContainer]);
 
 StatusActivateButton.propTypes = {
   t: PropTypes.func.isRequired, // i18next

src/client/js/components/Admin/Users/StatusSuspendedButton.jsx

@@ -2,7 +2,7 @@ import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
-import { createSubscribedElement } from '../../UnstatedUtils';
+import { withUnstatedContainers } from '../../UnstatedUtils';
 import AppContainer from '../../../services/AppContainer';
 import { toastSuccess, toastError } from '../../../util/apiNotification';
 import AdminUsersContainer from '../../../services/AdminUsersContainer';
@@ -65,9 +65,7 @@ class StatusSuspendedButton extends React.Component {
 /**
  * Wrapper component for using unstated
  */
-const StatusSuspendedFormWrapper = (props) => {
-  return createSubscribedElement(StatusSuspendedButton, props, [AppContainer, AdminUsersContainer]);
-};
+const StatusSuspendedFormWrapper = withUnstatedContainers(StatusSuspendedButton, [AppContainer, AdminUsersContainer]);
 
 StatusSuspendedButton.propTypes = {
   t: PropTypes.func.isRequired, // i18next

src/client/js/components/Admin/Users/UserInviteModal.jsx

@@ -11,7 +11,7 @@ import {
 
 import { toastSuccess, toastError } from '../../../util/apiNotification';
 
-import { createSubscribedElement } from '../../UnstatedUtils';
+import { withUnstatedContainers } from '../../UnstatedUtils';
 import AppContainer from '../../../services/AppContainer';
 import AdminUsersContainer from '../../../services/AdminUsersContainer';
 
@@ -218,9 +218,7 @@ class UserInviteModal extends React.Component {
 /**
  * Wrapper component for using unstated
  */
-const UserInviteModalWrapper = (props) => {
-  return createSubscribedElement(UserInviteModal, props, [AppContainer, AdminUsersContainer]);
-};
+const UserInviteModalWrapper = withUnstatedContainers(UserInviteModal, [AppContainer, AdminUsersContainer]);
 
 
 UserInviteModal.propTypes = {

src/client/js/components/Admin/Users/UserMenu.jsx

@@ -8,7 +8,7 @@ import RemoveUserButton from './UserRemoveButton';
 import RemoveAdminButton from './RemoveAdminButton';
 import GiveAdminButton from './GiveAdminButton';
 
-import { createSubscribedElement } from '../../UnstatedUtils';
+import { withUnstatedContainers } from '../../UnstatedUtils';
 import AppContainer from '../../../services/AppContainer';
 import AdminUsersContainer from '../../../services/AdminUsersContainer';
 
@@ -96,9 +96,7 @@ class UserMenu extends React.Component {
 
 }
 
-const UserMenuWrapper = (props) => {
-  return createSubscribedElement(UserMenu, props, [AppContainer, AdminUsersContainer]);
-};
+const UserMenuWrapper = withUnstatedContainers(UserMenu, [AppContainer, AdminUsersContainer]);
 
 UserMenu.propTypes = {
   t: PropTypes.func.isRequired, // i18next

src/client/js/components/Admin/Users/UserRemoveButton.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
-import { createSubscribedElement } from '../../UnstatedUtils';
+import { withUnstatedContainers } from '../../UnstatedUtils';
 import AppContainer from '../../../services/AppContainer';
 import AdminUsersContainer from '../../../services/AdminUsersContainer';
 import { toastSuccess, toastError } from '../../../util/apiNotification';
@@ -43,9 +43,7 @@ class UserRemoveButton extends React.Component {
 /**
  * Wrapper component for using unstated
  */
-const UserRemoveButtonWrapper = (props) => {
-  return createSubscribedElement(UserRemoveButton, props, [AppContainer, AdminUsersContainer]);
-};
+const UserRemoveButtonWrapper = withUnstatedContainers(UserRemoveButton, [AppContainer, AdminUsersContainer]);
 
 UserRemoveButton.propTypes = {
   t: PropTypes.func.isRequired, // i18next

src/client/js/components/Admin/Users/UserTable.jsx

@@ -6,7 +6,7 @@ import dateFnsFormat from 'date-fns/format';
 import UserPicture from '../../User/UserPicture';
 import UserMenu from './UserMenu';
 
-import { createSubscribedElement } from '../../UnstatedUtils';
+import { withUnstatedContainers } from '../../UnstatedUtils';
 import AppContainer from '../../../services/AppContainer';
 import AdminUsersContainer from '../../../services/AdminUsersContainer';
 import SortIcons from './SortIcons';
@@ -221,8 +221,6 @@ UserTable.propTypes = {
 
 };
 
-const UserTableWrapper = (props) => {
-  return createSubscribedElement(UserTable, props, [AppContainer, AdminUsersContainer]);
-};
+const UserTableWrapper = withUnstatedContainers(UserTable, [AppContainer, AdminUsersContainer]);
 
 export default withTranslation()(UserTableWrapper);

src/client/js/components/CreateTemplateModal.jsx

@@ -6,7 +6,7 @@ import { Modal, ModalHeader, ModalBody } from 'reactstrap';
 import { withTranslation } from 'react-i18next';
 import { pathUtils } from 'growi-commons';
 import urljoin from 'url-join';
-import { createSubscribedElement } from './UnstatedUtils';
+import { withUnstatedContainers } from './UnstatedUtils';
 
 import PageContainer from '../services/PageContainer';
 
@@ -70,9 +70,7 @@ const CreateTemplateModal = (props) => {
 /**
  * Wrapper component for using unstated
  */
-const CreateTemplateModalWrapper = (props) => {
-  return createSubscribedElement(CreateTemplateModal, props, [PageContainer]);
-};
+const CreateTemplateModalWrapper = withUnstatedContainers(CreateTemplateModal, [PageContainer]);
 
 
 CreateTemplateModal.propTypes = {

src/client/js/components/EmptyTrashModal.jsx

@@ -6,7 +6,7 @@ import {
 } from 'reactstrap';
 
 import { withTranslation } from 'react-i18next';
-import { createSubscribedElement } from './UnstatedUtils';
+import { withUnstatedContainers } from './UnstatedUtils';
 
 import AppContainer from '../services/AppContainer';
 import ApiErrorMessage from './PageManagement/ApiErrorMessage';
@@ -56,9 +56,7 @@ const EmptyTrashModal = (props) => {
 /**
  * Wrapper component for using unstated
  */
-const EmptyTrashModalWrapper = (props) => {
-  return createSubscribedElement(EmptyTrashModal, props, [AppContainer]);
-};
+const EmptyTrashModalWrapper = withUnstatedContainers(EmptyTrashModal, [AppContainer]);
 
 
 EmptyTrashModal.propTypes = {

src/client/js/components/LikeButton.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import { toastError } from '../util/apiNotification';
-import { createSubscribedElement } from './UnstatedUtils';
+import { withUnstatedContainers } from './UnstatedUtils';
 import AppContainer from '../services/AppContainer';
 
 class LikeButton extends React.Component {
@@ -56,9 +56,7 @@ class LikeButton extends React.Component {
 /**
  * Wrapper component for using unstated
  */
-const LikeButtonWrapper = (props) => {
-  return createSubscribedElement(LikeButton, props, [AppContainer]);
-};
+const LikeButtonWrapper = withUnstatedContainers(LikeButton, [AppContainer]);
 
 LikeButton.propTypes = {
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,

src/client/js/components/LoginForm.jsx

@@ -4,7 +4,7 @@ import ReactCardFlip from 'react-card-flip';
 
 import { withTranslation } from 'react-i18next';
 
-import { createSubscribedElement } from './UnstatedUtils';
+import { withUnstatedContainers } from './UnstatedUtils';
 import NoLoginContainer from '../services/NoLoginContainer';
 
 class LoginForm extends React.Component {
@@ -293,9 +293,7 @@ class LoginForm extends React.Component {
 /**
  * Wrapper component for using unstated
  */
-const LoginFormWrapper = (props) => {
-  return createSubscribedElement(LoginForm, props, [NoLoginContainer]);
-};
+const LoginFormWrapper = withUnstatedContainers(LoginForm, [NoLoginContainer]);
 
 LoginForm.propTypes = {
   // i18next

src/client/js/components/Me/ApiSettings.jsx

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
 import { toastSuccess, toastError } from '../../util/apiNotification';
-import { createSubscribedElement } from '../UnstatedUtils';
+import { withUnstatedContainers } from '../UnstatedUtils';
 
 import AppContainer from '../../services/AppContainer';
 import PersonalContainer from '../../services/PersonalContainer';
@@ -94,9 +94,7 @@ class ApiSettings extends React.Component {
 
 }
 
-const ApiSettingsWrapper = (props) => {
-  return createSubscribedElement(ApiSettings, props, [AppContainer, PersonalContainer]);
-};
+const ApiSettingsWrapper = withUnstatedContainers(ApiSettings, [AppContainer, PersonalContainer]);
 
 ApiSettings.propTypes = {
   t: PropTypes.func.isRequired, // i18next

src/client/js/components/Me/AssociateModal.jsx

@@ -10,7 +10,7 @@ import {
   ModalFooter,
 } from 'reactstrap';
 import { toastSuccess, toastError } from '../../util/apiNotification';
-import { createSubscribedElement } from '../UnstatedUtils';
+import { withUnstatedContainers } from '../UnstatedUtils';
 
 import AppContainer from '../../services/AppContainer';
 import PersonalContainer from '../../services/PersonalContainer';
@@ -129,9 +129,7 @@ class AssociateModal extends React.Component {
 
 }
 
-const AssociateModalWrapper = (props) => {
-  return createSubscribedElement(AssociateModal, props, [AppContainer, PersonalContainer]);
-};
+const AssociateModalWrapper = withUnstatedContainers(AssociateModal, [AppContainer, PersonalContainer]);
 
 AssociateModal.propTypes = {
   t: PropTypes.func.isRequired, // i18next

src/client/js/components/Me/BasicInfoSettings.jsx

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
 import { toastSuccess, toastError } from '../../util/apiNotification';
-import { createSubscribedElement } from '../UnstatedUtils';
+import { withUnstatedContainers } from '../UnstatedUtils';
 
 import AppContainer from '../../services/AppContainer';
 import PersonalContainer from '../../services/PersonalContainer';
@@ -149,9 +149,7 @@ class BasicInfoSettings extends React.Component {
 
 }
 
-const BasicInfoSettingsWrapper = (props) => {
-  return createSubscribedElement(BasicInfoSettings, props, [AppContainer, PersonalContainer]);
-};
+const BasicInfoSettingsWrapper = withUnstatedContainers(BasicInfoSettings, [AppContainer, PersonalContainer]);
 
 BasicInfoSettings.propTypes = {
   t: PropTypes.func.isRequired, // i18next

src/client/js/components/Me/DisassociateModal.jsx

@@ -10,7 +10,7 @@ import {
   ModalFooter,
 } from 'reactstrap';
 import { toastSuccess, toastError } from '../../util/apiNotification';
-import { createSubscribedElement } from '../UnstatedUtils';
+import { withUnstatedContainers } from '../UnstatedUtils';
 
 import AppContainer from '../../services/AppContainer';
 import PersonalContainer from '../../services/PersonalContainer';
@@ -71,9 +71,7 @@ class DisassociateModal extends React.Component {
 
 }
 
-const DisassociateModalWrapper = (props) => {
-  return createSubscribedElement(DisassociateModal, props, [AppContainer, PersonalContainer]);
-};
+const DisassociateModalWrapper = withUnstatedContainers(DisassociateModal, [AppContainer, PersonalContainer]);
 
 DisassociateModal.propTypes = {
   t: PropTypes.func.isRequired, // i18next

src/client/js/components/Me/ExternalAccountLinkedMe.jsx

@@ -3,7 +3,7 @@ import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
-import { createSubscribedElement } from '../UnstatedUtils';
+import { withUnstatedContainers } from '../UnstatedUtils';
 import { toastError } from '../../util/apiNotification';
 
 import AppContainer from '../../services/AppContainer';
@@ -119,9 +119,7 @@ class ExternalAccountLinkedMe extends React.Component {
 
 }
 
-const ExternalAccountLinkedMeWrapper = (props) => {
-  return createSubscribedElement(ExternalAccountLinkedMe, props, [AppContainer, PersonalContainer]);
-};
+const ExternalAccountLinkedMeWrapper = withUnstatedContainers(ExternalAccountLinkedMe, [AppContainer, PersonalContainer]);
 
 ExternalAccountLinkedMe.propTypes = {
   t: PropTypes.func.isRequired, // i18next

src/client/js/components/Me/ImageCropModal.jsx

@@ -12,7 +12,7 @@ import {
 import { withTranslation } from 'react-i18next';
 import ReactCrop from 'react-image-crop';
 import AppContainer from '../../services/AppContainer';
-import { createSubscribedElement } from '../UnstatedUtils';
+import { withUnstatedContainers } from '../UnstatedUtils';
 import 'react-image-crop/dist/ReactCrop.css';
 import { toastError } from '../../util/apiNotification';
 
@@ -113,9 +113,7 @@ class ImageCropModal extends React.Component {
 /**
  * Wrapper component for using unstated
  */
-const ProfileImageFormWrapper = (props) => {
-  return createSubscribedElement(ImageCropModal, props, [AppContainer]);
-};
+const ProfileImageFormWrapper = withUnstatedContainers(ImageCropModal, [AppContainer]);
 ImageCropModal.propTypes = {
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
   show: PropTypes.bool.isRequired,

src/client/js/components/Me/PasswordSettings.jsx

@@ -5,7 +5,7 @@ import { withTranslation } from 'react-i18next';
 
 
 import { toastSuccess, toastError } from '../../util/apiNotification';
-import { createSubscribedElement } from '../UnstatedUtils';
+import { withUnstatedContainers } from '../UnstatedUtils';
 
 import AppContainer from '../../services/AppContainer';
 import PersonalContainer from '../../services/PersonalContainer';
@@ -134,9 +134,7 @@ class PasswordSettings extends React.Component {
 }
 
 
-const PasswordSettingsWrapper = (props) => {
-  return createSubscribedElement(PasswordSettings, props, [AppContainer, PersonalContainer]);
-};
+const PasswordSettingsWrapper = withUnstatedContainers(PasswordSettings, [AppContainer, PersonalContainer]);
 
 PasswordSettings.propTypes = {
   t: PropTypes.func.isRequired, // i18next

src/client/js/components/Me/ProfileImageSettings.jsx

@@ -4,7 +4,7 @@ import { withTranslation } from 'react-i18next';
 import md5 from 'md5';
 
 import { toastSuccess, toastError } from '../../util/apiNotification';
-import { createSubscribedElement } from '../UnstatedUtils';
+import { withUnstatedContainers } from '../UnstatedUtils';
 
 import AppContainer from '../../services/AppContainer';
 import PersonalContainer from '../../services/PersonalContainer';
@@ -185,9 +185,7 @@ class ProfileImageSettings extends React.Component {
 }
 
 
-const ProfileImageSettingsWrapper = (props) => {
-  return createSubscribedElement(ProfileImageSettings, props, [AppContainer, PersonalContainer]);
-};
+const ProfileImageSettingsWrapper = withUnstatedContainers(ProfileImageSettings, [AppContainer, PersonalContainer]);
 
 ProfileImageSettings.propTypes = {
   t: PropTypes.func.isRequired, // i18next

src/client/js/components/MyDraftList/Draft.jsx

@@ -9,7 +9,7 @@ import {
   UncontrolledTooltip,
 } from 'reactstrap';
 
-import { createSubscribedElement } from '../UnstatedUtils';
+import { withUnstatedContainers } from '../UnstatedUtils';
 import AppContainer from '../../services/AppContainer';
 
 import RevisionBody from '../Page/RevisionBody';
@@ -195,9 +195,7 @@ class Draft extends React.Component {
 /**
  * Wrapper component for using unstated
  */
-const DraftWrapper = (props) => {
-  return createSubscribedElement(Draft, props, [AppContainer]);
-};
+const DraftWrapper = withUnstatedContainers(Draft, [AppContainer]);
 
 
 Draft.propTypes = {

src/client/js/components/MyDraftList/MyDraftList.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 import { withTranslation } from 'react-i18next';
 
-import { createSubscribedElement } from '../UnstatedUtils';
+import { withUnstatedContainers } from '../UnstatedUtils';
 import AppContainer from '../../services/AppContainer';
 import PageContainer from '../../services/PageContainer';
 import EditorContainer from '../../services/EditorContainer';
@@ -173,9 +173,7 @@ class MyDraftList extends React.Component {
 /**
  * Wrapper component for using unstated
  */
-const MyDraftListWrapper = (props) => {
-  return createSubscribedElement(MyDraftList, props, [AppContainer, PageContainer, EditorContainer]);
-};
+const MyDraftListWrapper = withUnstatedContainers(MyDraftList, [AppContainer, PageContainer, EditorContainer]);
 
 
 MyDraftList.propTypes = {

src/client/js/components/Navbar/GrowiSubNavigation.jsx

@@ -9,7 +9,7 @@ import DevidedPagePath from '@commons/models/devided-page-path';
 import LinkedPagePath from '@commons/models/linked-page-path';
 import PagePathHierarchicalLink from '@commons/components/PagePathHierarchicalLink';
 
-import { createSubscribedElement } from '../UnstatedUtils';
+import { withUnstatedContainers } from '../UnstatedUtils';
 import AppContainer from '../../services/AppContainer';
 
 import RevisionPathControls from '../Page/RevisionPathControls';
@@ -125,9 +125,7 @@ const GrowiSubNavigation = (props) => {
 /**
  * Wrapper component for using unstated
  */
-const GrowiSubNavigationWrapper = (props) => {
-  return createSubscribedElement(GrowiSubNavigation, props, [AppContainer, PageContainer]);
-};
+const GrowiSubNavigationWrapper = withUnstatedContainers(GrowiSubNavigation, [AppContainer, PageContainer]);
 
 
 GrowiSubNavigation.propTypes = {

src/client/js/components/Navbar/GrowiSubNavigationForUserPage.jsx

@@ -6,7 +6,7 @@ import { withTranslation } from 'react-i18next';
 import LinkedPagePath from '@commons/models/linked-page-path';
 import PagePathHierarchicalLink from '@commons/components/PagePathHierarchicalLink';
 
-import { createSubscribedElement } from '../UnstatedUtils';
+import { withUnstatedContainers } from '../UnstatedUtils';
 import AppContainer from '../../services/AppContainer';
 import PageContainer from '../../services/PageContainer';
 
@@ -80,9 +80,7 @@ const GrowiSubNavigationForUserPage = (props) => {
 /**
  * Wrapper component for using unstated
  */
-const GrowiSubNavigationForUserPageWrapper = (props) => {
-  return createSubscribedElement(GrowiSubNavigationForUserPage, props, [AppContainer, PageContainer]);
-};
+const GrowiSubNavigationForUserPageWrapper = withUnstatedContainers(GrowiSubNavigationForUserPage, [AppContainer, PageContainer]);
 
 
 GrowiSubNavigationForUserPage.propTypes = {

src/client/js/components/Navbar/NavbarToggler.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 import { withTranslation } from 'react-i18next';
 
-import { createSubscribedElement } from '../UnstatedUtils';
+import { withUnstatedContainers } from '../UnstatedUtils';
 import AppContainer from '../../services/AppContainer';
 
 const NavbarToggler = (props) => {
@@ -31,9 +31,7 @@ const NavbarToggler = (props) => {
 /**
  * Wrapper component for using unstated
  */
-const NavbarTogglerWrapper = (props) => {
-  return createSubscribedElement(NavbarToggler, props, [AppContainer]);
-};
+const NavbarTogglerWrapper = withUnstatedContainers(NavbarToggler, [AppContainer]);
 
 
 NavbarToggler.propTypes = {