Fix From state to Props

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

@@ -1,6 +1,7 @@
 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';
@@ -11,18 +12,10 @@ class UserTable extends React.Component {
     super(props);
 
     this.state = {
-      users: [],
+
     };
   }
 
-  componentDidMount() {
-    const jsonData = document.getElementById('admin-user-page');
-    const users = JSON.parse(jsonData.getAttribute('users'));
-
-    this.setState({
-      users,
-    });
-  }
 
   render() {
     const { t } = this.props;
@@ -41,19 +34,37 @@ class UserTable extends React.Component {
               <th>{ t('Email') }</th>
               <th width="100px">{ t('Created') }</th>
               <th width="150px">{ t('Last_Login') }</th>
-              <th width="70px">
-                <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>
-              </th>
+              <th width="70px"></th>
             </tr>
           </thead>
           <tbody>
-            {this.state.users.map((user) => {
+            {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>
               );
             })}
@@ -73,6 +84,9 @@ 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

@@ -22,6 +22,16 @@ class UserPage extends React.Component {
 
   }
 
+  // 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;