refactor userInviteModal

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

@@ -4,39 +4,20 @@ import { withTranslation } from 'react-i18next';
 
 import { createSubscribedElement } from '../../UnstatedUtils';
 import AppContainer from '../../../services/AppContainer';
+import UsersContainer from '../../../services/UsersContainer';
 import UserInviteModal from './UserInviteModal';
 
 class InviteUserControl extends React.Component {
 
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      isUserInviteModalShown: false,
-    };
-
-    this.toggleUserInviteModal = this.toggleUserInviteModal.bind(this);
-  }
-
-  /**
-   * user招待モーダルを開閉する
-   */
-  toggleUserInviteModal() {
-    this.setState({ isUserInviteModalShown: !this.state.isUserInviteModalShown });
-  }
-
   render() {
-    const { t } = this.props;
+    const { t, usersContainer } = this.props;
 
     return (
       <Fragment>
-        <button type="button" className="btn btn-default" onClick={this.toggleUserInviteModal}>
+        <button type="button" className="btn btn-default" onClick={usersContainer.toggleUserInviteModal}>
           { t('user_management.invite_users') }
         </button>
-        <UserInviteModal
-          show={this.state.isUserInviteModalShown}
-          onToggleModal={this.toggleUserInviteModal}
-        />
+        <UserInviteModal />
       </Fragment>
     );
   }
@@ -44,12 +25,13 @@ class InviteUserControl extends React.Component {
 }
 
 const InviteUserControlWrapper = (props) => {
-  return createSubscribedElement(InviteUserControl, props, [AppContainer]);
+  return createSubscribedElement(InviteUserControl, props, [AppContainer, UsersContainer]);
 };
 
 InviteUserControl.propTypes = {
   t: PropTypes.func.isRequired, // i18next
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+  usersContainer: PropTypes.instanceOf(UsersContainer).isRequired,
 };
 
 export default withTranslation()(InviteUserControlWrapper);

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

@@ -11,6 +11,7 @@ import { toastSuccess, toastError } from '../../../util/apiNotification';
 
 import { createSubscribedElement } from '../../UnstatedUtils';
 import AppContainer from '../../../services/AppContainer';
+import UsersContainer from '../../../services/UsersContainer';
 
 class UserInviteModal extends React.Component {
 
@@ -30,7 +31,7 @@ class UserInviteModal extends React.Component {
   }
 
   onToggleModal() {
-    this.props.onToggleModal();
+    this.props.usersContainer.toggleUserInviteModal();
     this.setState({ invitedEmailList: null });
   }
 
@@ -185,11 +186,11 @@ class UserInviteModal extends React.Component {
   }
 
   render() {
-    const { t } = this.props;
+    const { t, usersContainer } = this.props;
     const { invitedEmailList } = this.state;
 
     return (
-      <Modal show={this.props.show} onHide={this.onToggleModal}>
+      <Modal show={usersContainer.state.isUserInviteModalShown} onHide={this.onToggleModal}>
         <Modal.Header className="modal-header" closeButton>
           <Modal.Title>
             { t('user_management.invite_users') }
@@ -213,16 +214,14 @@ class UserInviteModal extends React.Component {
  * Wrapper component for using unstated
  */
 const UserInviteModalWrapper = (props) => {
-  return createSubscribedElement(UserInviteModal, props, [AppContainer]);
+  return createSubscribedElement(UserInviteModal, props, [AppContainer, UsersContainer]);
 };
 
 
 UserInviteModal.propTypes = {
   t: PropTypes.func.isRequired, // i18next
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
-
-  show: PropTypes.bool.isRequired,
-  onToggleModal: PropTypes.func.isRequired,
+  usersContainer: PropTypes.instanceOf(UsersContainer).isRequired,
 };
 
 export default withTranslation()(UserInviteModalWrapper);

src/client/js/services/UsersContainer.js

@@ -19,11 +19,13 @@ export default class UsersContainer extends Container {
     this.state = {
       users: JSON.parse(document.getElementById('admin-user-page').getAttribute('users')) || [],
       isPasswordResetModalShown: false,
+      isUserInviteModalShown: false,
       userForPasswordResetModal: null,
     };
 
     this.showPasswordResetModal = this.showPasswordResetModal.bind(this);
     this.hidePasswordResetModal = this.hidePasswordResetModal.bind(this);
+    this.toggleUserInviteModal = this.toggleUserInviteModal.bind(this);
   }
 
   /**
@@ -48,4 +50,11 @@ export default class UsersContainer extends Container {
     this.setState({ isPasswordResetModalShown: false });
   }
 
+  /**
+   * user招待モーダルを開閉する TODO i18n
+   */
+  toggleUserInviteModal() {
+    this.setState({ isUserInviteModalShown: !this.state.isUserInviteModalShown });
+  }
+
 }