Merge pull request #1127 from weseek/imprv/reactify-admin-user-management

Render User Information

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

@@ -1,12 +1,21 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
+import dateFnsFormat from 'date-fns/format';
 
 import { createSubscribedElement } from '../../UnstatedUtils';
 import AppContainer from '../../../services/AppContainer';
 
 class UserTable extends React.Component {
 
+  constructor(props) {
+    super(props);
+
+    this.state = {
+
+    };
+  }
+
 
   render() {
     const { t } = this.props;
@@ -28,6 +37,38 @@ class UserTable extends React.Component {
               <th width="70px"></th>
             </tr>
           </thead>
+          <tbody>
+            {this.props.users.map((user) => {
+              return (
+                <tr key={user._id}>
+                  <td>
+                    <img src={this.props.user} className="picture img-circle" />
+                  </td>
+                  <td>
+                    <span className="label">
+                      {user.status}
+                    </span>
+                  </td>
+                  <td>
+                    <strong>{user.username}</strong>
+                  </td>
+                  <td>{user.name}</td>
+                  <td>{user.email}</td>
+                  <td>{dateFnsFormat(new Date(user.createdAt), 'YYYY-MM-DD')}</td>
+                  <td>
+                    { user.lastLoginAt && <span>{dateFnsFormat(new Date(user.lastLoginAt), 'YYYY-MM-DD HH:MM')}</span> }
+                  </td>
+                  <td>
+                    <div className="btn-group admin-user-menu">
+                      <button type="button" className="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown">
+                        <i className="icon-settings"></i> <span className="caret"></span>
+                      </button>
+                    </div>
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
         </table>
       </Fragment>
     );
@@ -42,6 +83,10 @@ const UserTableWrapper = (props) => {
 UserTable.propTypes = {
   t: PropTypes.func.isRequired, // i18next
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+
+  users: PropTypes.array,
+  user: PropTypes.object.isRequired,
+
 };
 
 export default withTranslation()(UserTableWrapper);

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

@@ -2,19 +2,37 @@ import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
+import PaginationWrapper from '../../PaginationWrapper';
 import InviteUserControl from './InviteUserControl';
 import UserTable from './UserTable';
 
-import AppContainer from '../../../services/AppContainer';
 import { createSubscribedElement } from '../../UnstatedUtils';
+import AppContainer from '../../../services/AppContainer';
 
 class UserPage extends React.Component {
 
   constructor(props) {
     super();
 
+    this.state = {
+      users: [],
+      activePage: 1,
+      pagingLimit: Infinity,
+    };
+
+  }
+
+  // TODO unstatedContainerを作ってそこにリファクタすべき
+  componentDidMount() {
+    const jsonData = document.getElementById('admin-user-page');
+    const users = JSON.parse(jsonData.getAttribute('users'));
+
+    this.setState({
+      users,
+    });
   }
 
+
   render() {
     const { t } = this.props;
 
@@ -27,7 +45,16 @@ class UserPage extends React.Component {
             { t('user_management.external_account') }
           </a>
         </p>
-        <UserTable />
+        <UserTable
+          users={this.state.users}
+        />
+        <PaginationWrapper
+          activePage={this.state.activePage}
+          changePage={this.handlePage}
+          totalItemsCount={this.state.totalUsers}
+          pagingLimit={this.state.pagingLimit}
+        >
+        </PaginationWrapper>
       </Fragment>
     );
   }
@@ -41,6 +68,7 @@ const UserPageWrapper = (props) => {
 UserPage.propTypes = {
   t: PropTypes.func.isRequired, // i18next
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+
 };
 
 export default withTranslation()(UserPageWrapper);

src/server/views/admin/users.html

@@ -18,6 +18,7 @@
   <div
   class="col-md-9"
   id ="admin-user-page"
+  users= "{{ users | json }}"
   >
   </div>
 </div>