move UserGroupUserModal

src/client/js/components/Admin/UserGroupDetail/UserGroupDetailPage.jsx

@@ -1,8 +1,14 @@
 import React from 'react';
+import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
 
 import UserGroupEditForm from './UserGroupEditForm';
 import UserGroupUserTable from './UserGroupUserTable';
+import UserGroupUserModal from './UserGroupUserModal';
 import UserGroupPageList from './UserGroupPageList';
+import { createSubscribedElement } from '../../UnstatedUtils';
+import AppContainer from '../../../services/AppContainer';
+import { toastSuccess, toastError } from '../../../util/apiNotification';
 
 class UserGroupDetailPage extends React.Component {
 
@@ -20,10 +26,55 @@ class UserGroupDetailPage extends React.Component {
       userGroupRelations,
       notRelatedUsers,
       relatedPages,
+
+      isUserGroupUserModalOpen: false,
     };
+
+    this.xss = window.xss;
+
+    this.openUserGroupUserModal = this.openUserGroupUserModal.bind(this);
+    this.closeUserGroupUserModal = this.closeUserGroupUserModal.bind(this);
+    this.removeUser = this.removeUser.bind(this);
+    this.addUser = this.addUser.bind(this);
+  }
+
+  openUserGroupUserModal() {
+    this.setState({ isUserGroupUserModalOpen: true });
+  }
+
+  closeUserGroupUserModal() {
+    this.setState({ isUserGroupUserModalOpen: false });
+  }
+
+  async removeUser(username) {
+    try {
+      const res = await this.props.appContainer.apiv3.delete(`/user-groups/${this.state.userGroup._id}/users/${username}`);
+
+      this.setState((prevState) => {
+        return {
+          userGroupRelations: prevState.userGroupRelations.filter((u) => { return u._id !== res.data.userGroupRelation._id }),
+          notRelatedUsers: [...prevState.notRelatedUsers, res.data.user],
+        };
+      });
+
+      toastSuccess(`Removed "${username}" from "${this.xss.process(this.state.userGroup.name)}"`);
+    }
+    catch (err) {
+      toastError(new Error(`Unable to remove "${this.xss.process(username)}" from "${this.xss.process(this.state.userGroup.name)}"`));
+    }
+  }
+
+  addUser(user, userGroup, userGroupRelation) {
+    this.setState((prevState) => {
+      return {
+        userGroupRelations: [...prevState.userGroupRelations, userGroupRelation],
+        notRelatedUsers: prevState.notRelatedUsers.filter((u) => { return u._id !== user._id }),
+      };
+    });
   }
 
   render() {
+    const { t } = this.props;
 
     return (
       <div>
@@ -34,8 +85,16 @@ class UserGroupDetailPage extends React.Component {
         <UserGroupEditForm
           userGroup={this.state.userGroup}
         />
+        <legend className="m-t-20">{ t('User List') }</legend>
         <UserGroupUserTable
           userGroupRelations={this.state.userGroupRelations}
+          openUserGroupUserModal={this.openUserGroupUserModal}
+          removeUser={this.removeUser}
+        />
+        <UserGroupUserModal
+          show={this.state.isUserGroupUserModalOpen}
+          onClose={this.closeUserGroupUserModal}
+          onAdd={this.addUser}
           notRelatedUsers={this.state.notRelatedUsers}
           userGroup={this.state.userGroup}
         />
@@ -48,4 +107,16 @@ class UserGroupDetailPage extends React.Component {
 
 }
 
-export default UserGroupDetailPage;
+UserGroupDetailPage.propTypes = {
+  t: PropTypes.func.isRequired, // i18next
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+};
+
+/**
+ * Wrapper component for using unstated
+ */
+const UserGroupDetailPageWrapper = (props) => {
+  return createSubscribedElement(UserGroupDetailPage, props, [AppContainer]);
+};
+
+export default withTranslation()(UserGroupDetailPageWrapper);

src/client/js/components/Admin/UserGroupDetail/UserGroupPageList.jsx

@@ -17,7 +17,7 @@ class UserGroupPageList extends React.Component {
 
   renderPageList(page) {
     return (
-      <li>
+      <li key={page._id}>
         <UserPicture user={page.lastUpdateUser} className="picture img-circle" />
         <a
           href={page.path}

src/client/js/components/Admin/UserGroupDetail/UserGroupUserTable.jsx

@@ -1,90 +1,31 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 import dateFnsFormat from 'date-fns/format';
 
-import UserGroupUserModal from './UserGroupUserModal';
 import UserPicture from '../../User/UserPicture';
-import { createSubscribedElement } from '../../UnstatedUtils';
-import AppContainer from '../../../services/AppContainer';
-import { toastSuccess, toastError } from '../../../util/apiNotification';
 
 class UserGroupUserTable extends React.Component {
 
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      userGroupRelations: props.userGroupRelations,
-      notRelatedUsers: props.notRelatedUsers,
-      isUserGroupUserModalOpen: false,
-    };
-
-    this.xss = window.xss;
-
-    this.removeUser = this.removeUser.bind(this);
-    this.openUserGroupUserModal = this.openUserGroupUserModal.bind(this);
-    this.closeUserGroupUserModal = this.closeUserGroupUserModal.bind(this);
-    this.addUser = this.addUser.bind(this);
-  }
-
-  async removeUser(username) {
-    try {
-      const res = await this.props.appContainer.apiv3.delete(`/user-groups/${this.props.userGroup._id}/users/${username}`);
-
-      this.setState((prevState) => {
-        return {
-          userGroupRelations: prevState.userGroupRelations.filter((u) => { return u._id !== res.data.userGroupRelation._id }),
-          notRelatedUsers: [...prevState.notRelatedUsers, res.data.user],
-        };
-      });
-
-      toastSuccess(`Removed "${username}" from "${this.xss.process(this.props.userGroup.name)}"`);
-    }
-    catch (err) {
-      toastError(new Error(`Unable to remove "${this.xss.process(username)}" from "${this.xss.process(this.props.userGroup.name)}"`));
-    }
-  }
-
-  openUserGroupUserModal() {
-    this.setState({ isUserGroupUserModalOpen: true });
-  }
-
-  closeUserGroupUserModal() {
-    this.setState({ isUserGroupUserModalOpen: false });
-  }
-
-  addUser(user, userGroup, userGroupRelation) {
-    this.setState((prevState) => {
-      return {
-        userGroupRelations: [...prevState.userGroupRelations, userGroupRelation],
-        notRelatedUsers: prevState.notRelatedUsers.filter((u) => { return u._id !== user._id }),
-      };
-    });
-  }
-
   render() {
     const { t } = this.props;
 
     return (
-      <Fragment>
-        <legend className="m-t-20">{ t('User List') }</legend>
-
-        <table className="table table-bordered table-user-list">
-          <thead>
-            <tr>
-              <th width="100px">#</th>
-              <th>
-                { t('User') }
-              </th>
-              <th>{ t('Name') }</th>
-              <th width="100px">{ t('Created') }</th>
-              <th width="160px">{ t('Last Login')}</th>
-              <th width="70px"></th>
-            </tr>
-          </thead>
-          <tbody>
-            {this.state.userGroupRelations.map((sRelation) => {
+      <table className="table table-bordered table-user-list">
+        <thead>
+          <tr>
+            <th width="100px">#</th>
+            <th>
+              { t('User') }
+            </th>
+            <th>{ t('Name') }</th>
+            <th width="100px">{ t('Created') }</th>
+            <th width="160px">{ t('Last Login')}</th>
+            <th width="70px"></th>
+          </tr>
+        </thead>
+        <tbody>
+          {this.props.userGroupRelations.map((sRelation) => {
               const { relatedUser } = sRelation;
 
               return (
@@ -105,7 +46,7 @@ class UserGroupUserTable extends React.Component {
                       </button>
                       <ul className="dropdown-menu" role="menu">
                         <li>
-                          <a onClick={() => { return this.removeUser(relatedUser.username) }}>
+                          <a onClick={() => { return this.props.removeUser(relatedUser.username) }}>
                             <i className="icon-fw icon-user-unfollow"></i> { t('user_group_management.remove_from_group')}
                           </a>
                         </li>
@@ -116,31 +57,21 @@ class UserGroupUserTable extends React.Component {
               );
             })}
 
-            <tr>
-              <td></td>
-              <td className="text-center">
-                <button className="btn btn-default" type="button" onClick={this.openUserGroupUserModal}>
-                  <i className="ti-plus"></i>
-                </button>
-              </td>
-              <td></td>
-              <td></td>
-              <td></td>
-              <td></td>
-            </tr>
-
-          </tbody>
-        </table>
-
-        <UserGroupUserModal
-          show={this.state.isUserGroupUserModalOpen}
-          onClose={this.closeUserGroupUserModal}
-          onAdd={this.addUser}
-          notRelatedUsers={this.state.notRelatedUsers}
-          userGroup={this.props.userGroup}
-        />
-
-      </Fragment>
+          <tr>
+            <td></td>
+            <td className="text-center">
+              <button className="btn btn-default" type="button" onClick={this.props.openUserGroupUserModal}>
+                <i className="ti-plus"></i>
+              </button>
+            </td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+          </tr>
+
+        </tbody>
+      </table>
     );
   }
 
@@ -148,17 +79,9 @@ class UserGroupUserTable extends React.Component {
 
 UserGroupUserTable.propTypes = {
   t: PropTypes.func.isRequired, // i18next
-  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
   userGroupRelations: PropTypes.arrayOf(PropTypes.object).isRequired,
-  notRelatedUsers: PropTypes.arrayOf(PropTypes.object).isRequired,
-  userGroup: PropTypes.object.isRequired,
-};
-
-/**
- * Wrapper component for using unstated
- */
-const UserGroupUserTableWrapper = (props) => {
-  return createSubscribedElement(UserGroupUserTable, props, [AppContainer]);
+  openUserGroupUserModal: PropTypes.func.isRequired,
+  removeUser: PropTypes.func.isRequired,
 };
 
-export default withTranslation()(UserGroupUserTableWrapper);
+export default withTranslation()(UserGroupUserTable);