use createSubscribedElement

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

@@ -1,9 +1,10 @@
 /* eslint-disable react/no-multi-comp */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Subscribe } from 'unstated';
 import { withTranslation } from 'react-i18next';
 
+import { createSubscribedElement } from '../../UnstatedUtils';
+import AppContainer from '../../../services/AppContainer';
 import { apiErrorHandler, apiSuccessHandler } from '../../../util/apiNotification';
 
 class UserGroupCreateForm extends React.Component {
@@ -36,14 +37,14 @@ class UserGroupCreateForm extends React.Component {
     e.preventDefault();
 
     try {
-      const res = await this.props.crowi.apiv3.post('/user-groups', {
+      const res = await this.props.appContainer.apiv3.post('/user-groups', {
         name: this.state.name,
       });
 
       const userGroup = res.data.userGroup;
       const userGroupId = userGroup._id;
 
-      const res2 = await this.props.crowi.apiv3.get(`/user-groups/${userGroupId}/users`);
+      const res2 = await this.props.appContainer.apiv3.get(`/user-groups/${userGroupId}/users`);
 
       const { users } = res2.data;
 
@@ -95,7 +96,6 @@ class UserGroupCreateForm extends React.Component {
             </div>
             <button type="submit" className="btn btn-primary" disabled={!this.validateForm()}>{ t('Create') }</button>
           </div>
-          <input type="hidden" name="_csrf" defaultValue={this.props.crowi.csrfToken} />
         </form>
       </div>
     );
@@ -106,31 +106,14 @@ class UserGroupCreateForm extends React.Component {
 /**
  * Wrapper component for using unstated
  */
-class UserGroupCreateFormWrapper extends React.PureComponent {
-
-  render() {
-    return (
-      <Subscribe to={[]}>
-        {() => (
-          // eslint-disable-next-line arrow-body-style
-          <UserGroupCreateForm {...this.props} />
-        )}
-      </Subscribe>
-    );
-  }
-
-}
+const UserGroupCreateFormWrapper = (props) => {
+  return createSubscribedElement(UserGroupCreateForm, props, [AppContainer]);
+};
 
 UserGroupCreateForm.propTypes = {
   t: PropTypes.func.isRequired, // i18next
-  crowi: PropTypes.object.isRequired,
-  isAclEnabled: PropTypes.bool,
-  onCreate: PropTypes.func.isRequired,
-};
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
 
-UserGroupCreateFormWrapper.propTypes = {
-  t: PropTypes.func.isRequired, // i18next
-  crowi: PropTypes.object.isRequired,
   isAclEnabled: PropTypes.bool,
   onCreate: PropTypes.func.isRequired,
 };

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

@@ -1,11 +1,13 @@
 /* eslint-disable react/no-multi-comp */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Subscribe } from 'unstated';
 import { withTranslation } from 'react-i18next';
 
 import Modal from 'react-bootstrap/es/Modal';
 
+import { createSubscribedElement } from '../../UnstatedUtils';
+import AppContainer from '../../../services/AppContainer';
+
 /**
  * Delete User Group Select component
  *
@@ -182,24 +184,14 @@ class UserGroupDeleteModal extends React.Component {
 /**
  * Wrapper component for using unstated
  */
-class UserGroupDeleteModalWrapper extends React.PureComponent {
-
-  render() {
-    return (
-      <Subscribe to={[]}>
-        {() => (
-          // eslint-disable-next-line arrow-body-style
-          <UserGroupDeleteModal {...this.props} />
-        )}
-      </Subscribe>
-    );
-  }
-
-}
+const UserGroupDeleteModalWrapper = (props) => {
+  return createSubscribedElement(UserGroupDeleteModal, props, [AppContainer]);
+};
 
 UserGroupDeleteModal.propTypes = {
   t: PropTypes.func.isRequired, // i18next
-  crowi: PropTypes.object.isRequired,
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+
   userGroups: PropTypes.arrayOf(PropTypes.object).isRequired,
   deleteUserGroup: PropTypes.object,
   onDelete: PropTypes.func.isRequired,
@@ -212,15 +204,4 @@ UserGroupDeleteModal.defaultProps = {
   deleteUserGroup: {},
 };
 
-UserGroupDeleteModalWrapper.propTypes = {
-  t: PropTypes.func.isRequired, // i18next
-  crowi: PropTypes.object.isRequired,
-  userGroups: PropTypes.arrayOf(PropTypes.object).isRequired,
-  deleteUserGroup: PropTypes.object,
-  onDelete: PropTypes.func.isRequired,
-  isShow: PropTypes.bool.isRequired,
-  onShow: PropTypes.func.isRequired,
-  onHide: PropTypes.func.isRequired,
-};
-
 export default withTranslation()(UserGroupDeleteModalWrapper);

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

@@ -1,12 +1,13 @@
 /* eslint-disable react/no-multi-comp */
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { Subscribe } from 'unstated';
 
 import UserGroupTable from './UserGroupTable';
 import UserGroupCreateForm from './UserGroupCreateForm';
 import UserGroupDeleteModal from './UserGroupDeleteModal';
 
+import { createSubscribedElement } from '../../UnstatedUtils';
+import AppContainer from '../../../services/AppContainer';
 import { apiErrorHandler, apiSuccessHandler } from '../../../util/apiNotification';
 
 class UserGroupPage extends React.Component {
@@ -65,7 +66,7 @@ class UserGroupPage extends React.Component {
 
   async deleteUserGroupById({ deleteGroupId, actionName, transferToUserGroupId }) {
     try {
-      const res = await this.props.crowi.apiv3.delete(`/user-groups/${deleteGroupId}`, {
+      const res = await this.props.appContainer.apiv3.delete(`/user-groups/${deleteGroupId}`, {
         actionName,
         transferToUserGroupId,
       });
@@ -97,8 +98,8 @@ class UserGroupPage extends React.Component {
     let userGroupRelations = {};
 
     const responses = await Promise.all([
-      this.props.crowi.apiv3.get('/user-groups'),
-      this.props.crowi.apiv3.get('/user-group-relations'),
+      this.props.appContainer.apiv3.get('/user-groups'),
+      this.props.appContainer.apiv3.get('/user-group-relations'),
     ]);
 
     const [userGroupsRes, userGroupRelationsRes] = responses;
@@ -115,19 +116,16 @@ class UserGroupPage extends React.Component {
     return (
       <Fragment>
         <UserGroupCreateForm
-          crowi={this.props.crowi}
           isAclEnabled={this.props.isAclEnabled}
           onCreate={this.addUserGroup}
         />
         <UserGroupTable
-          crowi={this.props.crowi}
           userGroups={this.state.userGroups}
           userGroupRelations={this.state.userGroupRelations}
           isAclEnabled={this.props.isAclEnabled}
           onDelete={this.showDeleteModal}
         />
         <UserGroupDeleteModal
-          crowi={this.props.crowi}
           userGroups={this.state.userGroups}
           deleteUserGroup={this.state.selectedUserGroup}
           onDelete={this.deleteUserGroupById}
@@ -144,30 +142,13 @@ class UserGroupPage extends React.Component {
 /**
  * Wrapper component for using unstated
  */
-class UserGroupPageWrapper extends React.PureComponent {
-
-  render() {
-    return (
-      <Subscribe to={[]}>
-        {() => (
-          // eslint-disable-next-line arrow-body-style
-          <UserGroupPage {...this.props} />
-        )}
-      </Subscribe>
-    );
-  }
-
-}
+const UserGroupPageWrapper = (props) => {
+  return createSubscribedElement(UserGroupPage, props, [AppContainer]);
+};
 
 UserGroupPage.propTypes = {
-  crowi: PropTypes.object.isRequired,
-  userGroups: PropTypes.arrayOf(PropTypes.object).isRequired,
-  userGroupRelations: PropTypes.object.isRequired,
-  isAclEnabled: PropTypes.bool,
-};
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
 
-UserGroupPageWrapper.propTypes = {
-  crowi: PropTypes.object.isRequired,
   userGroups: PropTypes.arrayOf(PropTypes.object).isRequired,
   userGroupRelations: PropTypes.object.isRequired,
   isAclEnabled: PropTypes.bool,

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

@@ -1,10 +1,12 @@
 /* eslint-disable react/no-multi-comp */
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { Subscribe } from 'unstated';
 import { withTranslation } from 'react-i18next';
 import dateFnsFormat from 'date-fns/format';
 
+import { createSubscribedElement } from '../../UnstatedUtils';
+import AppContainer from '../../../services/AppContainer';
+
 class UserGroupTable extends React.Component {
 
   constructor(props) {
@@ -103,33 +105,15 @@ class UserGroupTable extends React.Component {
 /**
  * Wrapper component for using unstated
  */
-class UserGroupTableWrapper extends React.PureComponent {
-
-  render() {
-    return (
-      <Subscribe to={[]}>
-        {() => (
-          // eslint-disable-next-line arrow-body-style
-          <UserGroupTable {...this.props} />
-        )}
-      </Subscribe>
-    );
-  }
+const UserGroupTableWrapper = (props) => {
+  return createSubscribedElement(UserGroupTable, props, [AppContainer]);
+};
 
-}
 
 UserGroupTable.propTypes = {
   t: PropTypes.func.isRequired, // i18next
-  crowi: PropTypes.object.isRequired,
-  userGroups: PropTypes.arrayOf(PropTypes.object).isRequired,
-  userGroupRelations: PropTypes.object.isRequired,
-  isAclEnabled: PropTypes.bool,
-  onDelete: PropTypes.func.isRequired,
-};
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
 
-UserGroupTableWrapper.propTypes = {
-  t: PropTypes.func.isRequired, // i18next
-  crowi: PropTypes.object.isRequired,
   userGroups: PropTypes.arrayOf(PropTypes.object).isRequired,
   userGroupRelations: PropTypes.object.isRequired,
   isAclEnabled: PropTypes.bool,