wrapper component for unstated

package.json

@@ -216,6 +216,7 @@
     "terser-webpack-plugin": "^1.2.2",
     "throttle-debounce": "^2.0.0",
     "toastr": "^2.1.2",
+    "unstated": "^2.1.1",
     "webpack": "^4.29.3",
     "webpack-assets-manifest": "^3.1.1",
     "webpack-bundle-analyzer": "^3.0.2",

src/client/js/app.js

@@ -2,6 +2,7 @@
 
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { Provider } from 'unstated';
 import { I18nextProvider } from 'react-i18next';
 import * as toastr from 'toastr';
 
@@ -600,12 +601,14 @@ if (adminUserGroupPageElem != null) {
 
   ReactDOM.render(
     <I18nextProvider i18n={i18n}>
-      <UserGroupPage
-        crowi={crowi}
-        userGroups={userGroups}
-        userGroupRelations={userGroupRelations}
-        isAclEnabled={isAclEnabled}
-      />
+      <Provider inject={[]}>
+        <UserGroupPage
+          crowi={crowi}
+          userGroups={userGroups}
+          userGroupRelations={userGroupRelations}
+          isAclEnabled={isAclEnabled}
+        />
+      </Provider>
     </I18nextProvider>,
     adminUserGroupPageElem,
   );

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

@@ -1,5 +1,7 @@
+/* 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 { apiErrorHandler, apiSuccessHandler } from '../../../util/apiNotification';
@@ -109,6 +111,24 @@ 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>
+    );
+  }
+
+}
+
 UserGroupCreateForm.propTypes = {
   t: PropTypes.func.isRequired, // i18next
   crowi: PropTypes.object.isRequired,
@@ -116,4 +136,11 @@ UserGroupCreateForm.propTypes = {
   onCreate: PropTypes.func.isRequired,
 };
 
-export default withTranslation()(UserGroupCreateForm);
+UserGroupCreateFormWrapper.propTypes = {
+  t: PropTypes.func.isRequired, // i18next
+  crowi: PropTypes.object.isRequired,
+  isAclEnabled: PropTypes.bool,
+  onCreate: PropTypes.func.isRequired,
+};
+
+export default withTranslation()(UserGroupCreateFormWrapper);

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

@@ -1,5 +1,7 @@
+/* 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';
@@ -177,6 +179,24 @@ 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>
+    );
+  }
+
+}
+
 UserGroupDeleteModal.propTypes = {
   t: PropTypes.func.isRequired, // i18next
   crowi: PropTypes.object.isRequired,
@@ -192,4 +212,15 @@ UserGroupDeleteModal.defaultProps = {
   deleteUserGroup: {},
 };
 
-export default withTranslation()(UserGroupDeleteModal);
+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,5 +1,7 @@
+/* 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';
@@ -149,6 +151,24 @@ 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>
+    );
+  }
+
+}
+
 UserGroupPage.propTypes = {
   crowi: PropTypes.object.isRequired,
   userGroups: PropTypes.arrayOf(PropTypes.object).isRequired,
@@ -156,4 +176,11 @@ UserGroupPage.propTypes = {
   isAclEnabled: PropTypes.bool,
 };
 
-export default UserGroupPage;
+UserGroupPageWrapper.propTypes = {
+  crowi: PropTypes.object.isRequired,
+  userGroups: PropTypes.arrayOf(PropTypes.object).isRequired,
+  userGroupRelations: PropTypes.object.isRequired,
+  isAclEnabled: PropTypes.bool,
+};
+
+export default UserGroupPageWrapper;

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

@@ -1,5 +1,7 @@
+/* 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';
 
@@ -98,6 +100,24 @@ 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>
+    );
+  }
+
+}
+
 UserGroupTable.propTypes = {
   t: PropTypes.func.isRequired, // i18next
   crowi: PropTypes.object.isRequired,
@@ -107,4 +127,13 @@ UserGroupTable.propTypes = {
   onDelete: PropTypes.func.isRequired,
 };
 
-export default withTranslation()(UserGroupTable);
+UserGroupTableWrapper.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,
+};
+
+export default withTranslation()(UserGroupTableWrapper);

yarn.lock

@@ -2636,6 +2636,11 @@ create-react-context@<=0.2.2:
     fbjs "^0.8.0"
     gud "^1.0.0"
 
+create-react-context@^0.1.5:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.1.6.tgz#0f425931d907741127acc6e31acb4f9015dd9fdc"
+  integrity sha512-eCnYYEUEc5i32LHwpE/W7NlddOB9oHwsPaWtWzYtflNkkwa3IfindIcoXdVWs12zCbwaMCavKNu84EXogVIWHw==
+
 create-react-context@^0.2.3:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.2.3.tgz#9ec140a6914a22ef04b8b09b7771de89567cb6f3"
@@ -10803,6 +10808,13 @@ unset-value@^1.0.0:
     has-value "^0.3.1"
     isobject "^3.0.0"
 
+unstated@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/unstated/-/unstated-2.1.1.tgz#36b124dfb2e7a12d39d0bb9c46dfb6e51276e3a2"
+  integrity sha512-fORlTWMZxq7NuMJDxyIrrYIZKN7wEWYQ9SiaJfIRcSpsowr6Ph/JIfK2tgtXLW614JfPG/t5q9eEIhXRCf55xg==
+  dependencies:
+    create-react-context "^0.1.5"
+
 unzip-response@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/unzip-response/-/unzip-response-2.0.1.tgz#d2f0f737d16b0615e72a6935ed04214572d56f97"