move modal state

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

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

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

@@ -9,7 +9,6 @@ import UserTable from './UserTable';
 
 import { createSubscribedElement } from '../../UnstatedUtils';
 import AppContainer from '../../../services/AppContainer';
-import UserInviteModal from './UserInviteModal';
 
 class UserPage extends React.Component {
 
@@ -76,12 +75,8 @@ class UserPage extends React.Component {
             onHideModal={this.hidePasswordResetModal}
           />
         ) }
-        <UserInviteModal
-          show={this.state.isUserInviteModalShown}
-          onToggleModal={this.toggleUserInviteModal}
-        />
         <p>
-          <InviteUserControl toggleUserInviteModal={this.toggleUserInviteModal} />
+          <InviteUserControl />
           <a className="btn btn-default btn-outline ml-2" href="/admin/users/external-accounts">
             <i className="icon-user-follow" aria-hidden="true"></i>
             { t('user_management.external_account') }