add resetModal

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

@@ -7,6 +7,7 @@ import Modal from 'react-bootstrap/es/Modal';
 import { toastError } from '../../../util/apiNotification';
 import { createSubscribedElement } from '../../UnstatedUtils';
 import AppContainer from '../../../services/AppContainer';
+import UsersContainer from '../../../services/UsersContainer';
 
 class PasswordResetModal extends React.Component {
 
@@ -24,7 +25,8 @@ class PasswordResetModal extends React.Component {
   }
 
   async resetPassword() {
-    const { appContainer, user } = this.props;
+    const { appContainer, usersContainer } = this.props;
+    const user = usersContainer.state.userForPasswordResetModal;
 
     const res = await appContainer.apiPost('/admin/users.resetPassword', { user_id: user._id });
     if (res.ok) {
@@ -36,7 +38,9 @@ class PasswordResetModal extends React.Component {
   }
 
   returnModalBody() {
-    const { t, user } = this.props;
+    const { t, usersContainer } = this.props;
+    const user = usersContainer.state.userForPasswordResetModal;
+
     return (
       this.state.isPasswordResetDone
         ? (
@@ -72,7 +76,7 @@ class PasswordResetModal extends React.Component {
       this.state.isPasswordResetDone
         ? (
           <div>
-            <button type="submit" className="btn btn-primary" onClick={this.props.onHideModal}>OK</button>
+            <button type="submit" className="btn btn-primary" onClick={this.props.usersContainer.hidePasswordResetModal}>OK</button>
           </div>
         )
         : (
@@ -83,10 +87,10 @@ class PasswordResetModal extends React.Component {
 
 
   render() {
-    const { t } = this.props;
+    const { t, usersContainer } = this.props;
 
     return (
-      <Modal show={this.props.show} onHide={this.props.onHideModal}>
+      <Modal show={usersContainer.state.isPasswordResetModalShown} onHide={usersContainer.hidePasswordResetModal}>
         <Modal.Header className="modal-header" closeButton>
           <Modal.Title>
             { t('user_management.reset_password') }
@@ -109,16 +113,13 @@ class PasswordResetModal extends React.Component {
  * Wrapper component for using unstated
  */
 const PasswordResetModalWrapper = (props) => {
-  return createSubscribedElement(PasswordResetModal, props, [AppContainer]);
+  return createSubscribedElement(PasswordResetModal, props, [AppContainer, UsersContainer]);
 };
 
 PasswordResetModal.propTypes = {
   t: PropTypes.func.isRequired, // i18next
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
-
-  user: PropTypes.object.isRequired,
-  show: PropTypes.bool.isRequired,
-  onHideModal: PropTypes.func.isRequired,
+  usersContainer: PropTypes.instanceOf(UsersContainer).isRequired,
 };
 
 export default withTranslation()(PasswordResetModalWrapper);

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

@@ -10,6 +10,7 @@ import GiveAdminForm from './GiveAdminForm';
 
 import { createSubscribedElement } from '../../UnstatedUtils';
 import AppContainer from '../../../services/AppContainer';
+import UsersContainer from '../../../services/UsersContainer';
 
 class UserMenu extends React.Component {
 
@@ -24,7 +25,7 @@ class UserMenu extends React.Component {
   }
 
   onPasswordResetClicked() {
-    this.props.onPasswordResetClicked(this.props.user);
+    this.props.usersContainer.showPasswordResetModal(this.props.user);
   }
 
   render() {
@@ -65,16 +66,16 @@ class UserMenu extends React.Component {
 }
 
 const UserMenuWrapper = (props) => {
-  return createSubscribedElement(UserMenu, props, [AppContainer]);
+  return createSubscribedElement(UserMenu, props, [AppContainer, UsersContainer]);
 };
 
 UserMenu.propTypes = {
   t: PropTypes.func.isRequired, // i18next
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+  usersContainer: PropTypes.instanceOf(UsersContainer).isRequired,
 
   user: PropTypes.object.isRequired,
   removeUser: PropTypes.func.isRequired,
-  onPasswordResetClicked: PropTypes.func.isRequired,
 };
 
 export default withTranslation()(UserMenuWrapper);

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

@@ -8,6 +8,7 @@ import UserMenu from './UserMenu';
 
 import { createSubscribedElement } from '../../UnstatedUtils';
 import AppContainer from '../../../services/AppContainer';
+import UsersContainer from '../../../services/UsersContainer';
 
 class UserTable extends React.Component {
 
@@ -99,7 +100,7 @@ class UserTable extends React.Component {
                     { user.lastLoginAt && <span>{dateFnsFormat(new Date(user.lastLoginAt), 'yyyy-MM-dd HH:mm')}</span> }
                   </td>
                   <td>
-                    <UserMenu user={user} onPasswordResetClicked={this.props.onPasswordResetClicked} removeUser={this.props.removeUser} />
+                    <UserMenu user={user} removeUser={this.props.removeUser} />
                   </td>
                 </tr>
               );
@@ -113,16 +114,16 @@ class UserTable extends React.Component {
 }
 
 const UserTableWrapper = (props) => {
-  return createSubscribedElement(UserTable, props, [AppContainer]);
+  return createSubscribedElement(UserTable, props, [AppContainer, UsersContainer]);
 };
 
 UserTable.propTypes = {
   t: PropTypes.func.isRequired, // i18next
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+  usersContainer: PropTypes.instanceOf(UsersContainer).isRequired,
 
   users: PropTypes.array.isRequired,
   removeUser: PropTypes.func.isRequired,
-  onPasswordResetClicked: PropTypes.func.isRequired,
 };
 
 export default withTranslation()(UserTableWrapper);

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

@@ -19,15 +19,11 @@ class UserPage extends React.Component {
     super();
 
     this.state = {
-      userForPasswordResetModal: null,
       activePage: 1,
       pagingLimit: Infinity,
-      isPasswordResetModalShown: false,
     };
 
     this.removeUser = this.removeUser.bind(this);
-    this.showPasswordResetModal = this.showPasswordResetModal.bind(this);
-    this.hidePasswordResetModal = this.hidePasswordResetModal.bind(this);
   }
 
   async removeUser(user) {
@@ -44,35 +40,12 @@ class UserPage extends React.Component {
     }
   }
 
-  /**
-   * passwordリセットモーダルが開き、userが渡される
-   * @param {object} user
-   *
-   */
-  showPasswordResetModal(user) {
-    this.setState({
-      isPasswordResetModalShown: true,
-      userForPasswordResetModal: user,
-    });
-  }
-
-  hidePasswordResetModal() {
-    this.setState({ isPasswordResetModalShown: false });
-  }
-
-
   render() {
     const { t, usersContainer } = this.props;
 
     return (
       <Fragment>
-        { this.state.userForPasswordResetModal && (
-          <PasswordResetModal
-            user={this.state.userForPasswordResetModal}
-            show={this.state.isPasswordResetModalShown}
-            onHideModal={this.hidePasswordResetModal}
-          />
-        ) }
+        {usersContainer.state.userForPasswordResetModal && <PasswordResetModal />}
         <p>
           <InviteUserControl />
           <a className="btn btn-default btn-outline ml-2" href="/admin/users/external-accounts">
@@ -82,7 +55,6 @@ class UserPage extends React.Component {
         </p>
         <UserTable
           users={usersContainer.state.users}
-          onPasswordResetClicked={this.showPasswordResetModal}
           removeUser={this.removeUser}
         />
         <PaginationWrapper

src/client/js/services/UsersContainer.js

@@ -18,7 +18,12 @@ export default class UsersContainer extends Container {
 
     this.state = {
       users: JSON.parse(document.getElementById('admin-user-page').getAttribute('users')) || [],
+      isPasswordResetModalShown: false,
+      userForPasswordResetModal: null,
     };
+
+    this.showPasswordResetModal = this.showPasswordResetModal.bind(this);
+    this.hidePasswordResetModal = this.hidePasswordResetModal.bind(this);
   }
 
   /**
@@ -28,4 +33,19 @@ export default class UsersContainer extends Container {
     return 'UsersContainer';
   }
 
+  /**
+   * passwordリセットモーダルが開き、userが渡される
+   * @param {object} user
+   */
+  showPasswordResetModal(user) {
+    this.setState({
+      isPasswordResetModalShown: true,
+      userForPasswordResetModal: user,
+    });
+  }
+
+  hidePasswordResetModal() {
+    this.setState({ isPasswordResetModalShown: false });
+  }
+
 }