Add component user-admin/List

Change-Id: I9a02165af1ad83c9ec3727d8e40d64be0a2540d0

src/features/user-admin/DefaultPage.js

@@ -1,39 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { bindActionCreators } from 'redux';
-import { connect } from 'react-redux';
-import * as actions from './redux/actions';
-
-export class DefaultPage extends Component {
-  static propTypes = {
-    userAdmin: PropTypes.object.isRequired,
-    actions: PropTypes.object.isRequired,
-  };
-
-  render() {
-    return (
-      <div className="user-admin-default-page">
-        Page Content: user-admin/DefaultPage
-      </div>
-    );
-  }
-}
-
-/* istanbul ignore next */
-function mapStateToProps(state) {
-  return {
-    userAdmin: state.userAdmin,
-  };
-}
-
-/* istanbul ignore next */
-function mapDispatchToProps(dispatch) {
-  return {
-    actions: bindActionCreators({ ...actions }, dispatch)
-  };
-}
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(DefaultPage);

src/features/user-admin/DefaultPage.scss

@@ -1,5 +0,0 @@
-@import '../../styles/mixins';
-
-.user-admin-default-page {
-
-}

src/features/user-admin/List.js

@@ -0,0 +1,69 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import { Redirect } from 'react-router-dom'
+import { Table, TableBody, TableCell, TableHead, TableRow } from '@material-ui/core';
+import * as actions from './redux/actions';
+
+export class List extends Component {
+  static propTypes = {
+    mtx: PropTypes.object.isRequired,
+    userAdmin: PropTypes.object.isRequired,
+    actions: PropTypes.object.isRequired,
+  };
+
+  componentDidMount() {
+    const { fetchUsers } = this.props.actions;
+    fetchUsers();
+  }
+
+  render() {
+    const { mtx } = this.props;
+    const { userList, fetchUsersPending } = this.props.userAdmin;
+    return (
+      <div className="user-admin-list">
+        {(!mtx || !mtx.clientRunning) && <Redirect to="/" />}
+        {fetchUsersPending && <img alt="logging in" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />}
+        <Table className="user-list">
+          <TableHead>
+            <TableRow>
+              <TableCell>Username</TableCell>
+              <TableCell>Guest</TableCell>
+              <TableCell>Admin</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {userList.map(item => (
+              <TableRow key={item.name}>
+                <TableCell>{item.name}</TableCell>
+                <TableCell>{item.is_guest ? 'X' : ''}</TableCell>
+                <TableCell>{item.admin ? 'X' : ''}</TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+    );
+  }
+}
+
+/* istanbul ignore next */
+function mapStateToProps(state) {
+  return {
+    mtx: state.common.mtx,
+    userAdmin: state.userAdmin,
+  };
+}
+
+/* istanbul ignore next */
+function mapDispatchToProps(dispatch) {
+  return {
+    actions: bindActionCreators({ ...actions }, dispatch),
+  };
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(List);

src/features/user-admin/List.scss

@@ -0,0 +1,9 @@
+@import '../../styles/mixins';
+
+.user-admin-list {
+  th {
+    background-color: #EEE;
+    font-size: 1rem;
+    font-weight: bold;
+  }
+}

src/features/user-admin/index.js

@@ -1 +1 @@
-export { default as DefaultPage } from './DefaultPage';
+export { default as List } from './List';

src/features/user-admin/route.js

@@ -2,7 +2,7 @@
 // Learn more from: http://rekit.js.org/docs/routing.html
 
 import {
-  DefaultPage,
+  List,
 } from './';
 import { Layout } from '../common';
 
@@ -11,6 +11,6 @@ export default {
   name: 'User admin',
   component: Layout,
   childRoutes: [
-    { path: 'default-page', name: 'Default page', component: DefaultPage, isIndex: true },
+    { path: 'list', name: 'List', component: List, isIndex: true },
   ],
 };

src/features/user-admin/style.scss

@@ -1,2 +1,2 @@
 @import '../../styles/mixins';
-@import './DefaultPage';
+@import './List';

tests/features/user-admin/List.test.js

@@ -1,19 +1,19 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import { DefaultPage } from '../../../src/features/user-admin/DefaultPage';
+import { List } from '../../../src/features/user-admin/List';
 
-describe('user-admin/DefaultPage', () => {
+describe('user-admin/List', () => {
   it('renders node with correct class name', () => {
     const props = {
       userAdmin: {},
       actions: {},
     };
     const renderedComponent = shallow(
-      <DefaultPage {...props} />
+      <List {...props} />
     );
 
     expect(
-      renderedComponent.find('.user-admin-default-page').length
+      renderedComponent.find('.user-admin-list').length
     ).toBe(1);
   });
 });