Merge branch 'feature/admin-system' into dev

src/common/components/layouts/AdminPageLayout.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import Navbar from 'react-bootstrap/lib/Navbar';
+import Grid from 'react-bootstrap/lib/Grid';
+import Row from 'react-bootstrap/lib/Row';
+import Col from 'react-bootstrap/lib/Col';
+import Nav from 'react-bootstrap/lib/Nav';
+import NavItem from 'react-bootstrap/lib/NavItem';
+import ErrorList from '../utils/ErrorList';
+
+const AdminPageLayout = ({ children, ...rest }) => (
+  <div>
+    <Navbar fluid>
+      <Navbar.Header>
+        <Navbar.Brand>
+          <a href="/admin">Express-React-HMR-Boilerplate Admin System</a>
+        </Navbar.Brand>
+        <Navbar.Toggle />
+      </Navbar.Header>
+      <Navbar.Collapse>
+      </Navbar.Collapse>
+    </Navbar>
+    <Grid fluid>
+      <Row>
+        <Col md={2}>
+          <Nav bsStyle="pills" stacked activeKey={1}>
+            <NavItem eventKey={1} href="/admin/user">User</NavItem>
+            <NavItem eventKey={2} href="/">Go back to site</NavItem>
+          </Nav>
+        </Col>
+        <Col md={10} {...rest}>
+          <ErrorList />
+          {children}
+        </Col>
+      </Row>
+    </Grid>
+  </div>
+);
+
+export default AdminPageLayout;

src/common/components/layouts/AppLayout.js

@@ -1,7 +1,5 @@
 import React from 'react';
 import Head from '../widgets/Head';
-import Navigation from '../utils/Navigation';
-import ErrorList from '../utils/ErrorList';
 
 const AppLayout = ({ children }) => (
   <div>
@@ -15,20 +13,14 @@ const AppLayout = ({ children }) => (
         },
       ]}
       links={[
-        // jscs:disable
         'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css',
         'https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css',
         '/css/main.css',
-        // jscs:enable
       ]}
       scripts={[
-        // jscs:disable
         'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js',
-        // jscs:enable
       ]}
     />
-    <Navigation />
-    <ErrorList />
     {children}
   </div>
 );

src/common/components/layouts/PageLayout.js

@@ -1,10 +1,16 @@
 import React from 'react';
 import Grid from 'react-bootstrap/lib/Grid';
+import Navigation from '../utils/Navigation';
+import ErrorList from '../utils/ErrorList';
 
 const PageLayout = ({ children, ...rest }) => (
-  <Grid {...rest}>
-    {children}
-  </Grid>
+  <div>
+    <Navigation />
+    <ErrorList />
+    <Grid {...rest}>
+      {children}
+    </Grid>
+  </div>
 );
 
 export default PageLayout;

src/common/components/pages/admin/user/ListPage.js

@@ -0,0 +1,84 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { withRouter } from 'react-router';
+import PageHeader from 'react-bootstrap/lib/PageHeader';
+import Table from 'react-bootstrap/lib/Table';
+import Resources from '../../../../constants/Resources';
+import userAPI from '../../../../api/user';
+import { pushErrors } from '../../../../actions/errorActions';
+import { setCrrentPage, setPage } from '../../../../actions/pageActions';
+import PageLayout from '../../../layouts/AdminPageLayout';
+import Pagination from '../../../utils/BsPagination';
+
+class ListPage extends Component {
+  constructor() {
+    super();
+    this.state = {
+      users: [],
+    };
+  }
+
+  componentDidMount() {
+    let { dispatch, location } = this.props;
+    dispatch(setCrrentPage(Resources.USER, location.query.page || 1));
+  }
+
+  componentDidUpdate(prevProps) {
+    let { dispatch, apiEngine, page, router, location } = this.props;
+
+    if (prevProps.page.current !== page.current) {
+      userAPI(apiEngine)
+        .list({ page: page.current })
+        .catch((err) => {
+          dispatch(pushErrors(err));
+          throw err;
+        })
+        .then((json) => {
+          this.setState({ users: json.users });
+          dispatch(setPage(Resources.USER, json.page));
+          router.push({
+            pathname: location.pathname,
+            query: { page: json.page.current },
+          });
+        });
+    }
+  }
+
+  render() {
+    let { users } = this.state;
+
+    return (
+      <PageLayout>
+        <PageHeader>User List</PageHeader>
+        <Table striped bordered>
+          <thead>
+            <tr>
+              <th>ID</th>
+              <th>Name</th>
+              <th>Email</th>
+              <th>Role</th>
+              <th>Created At</th>
+            </tr>
+          </thead>
+          <tbody>
+            {users.map((user) => (
+              <tr key={user._id}>
+                <td>{user._id}</td>
+                <td>{user.name}</td>
+                <td>{user.email.value}</td>
+                <td>{user.role}</td>
+                <td>{user.createdAt}</td>
+              </tr>
+            ))}
+          </tbody>
+        </Table>
+        <Pagination resourceName={Resources.USER} />
+      </PageLayout>
+    );
+  }
+}
+
+export default withRouter(connect(state => ({
+  apiEngine: state.apiEngine,
+  page: state.pages[Resources.USER] || {},
+}))(ListPage));

src/common/components/utils/Navigation.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import { Link } from 'react-router';
 import Grid from 'react-bootstrap/lib/Grid';
+import Roles from '../../constants/Roles';
 import { updateLocale } from '../../actions/intlActions';
 import { pushErrors } from '../../actions/errorActions';
 import Navbar from './BsNavbar';
@@ -24,6 +25,7 @@ class Navigation extends Component {
     let { cookies: { token, user } } = this.context.store.getState();
     let isAuth = !!token;
     user = (user && JSON.parse(user)) || {};
+    let isAdmin = (user.role === Roles.ADMIN);
 
     return (
       <Navbar staticTop>
@@ -76,6 +78,10 @@ class Navigation extends Component {
                   <NavLink to="/user/register">
                     <Text id="nav.user.register" />
                   </NavLink>}
+                {isAuth && isAdmin &&
+                  <NavLink to="/admin">
+                    Admin System
+                  </NavLink>}
                 {isAuth &&
                   <NavLink to="/user/me">
                     <Text id="nav.user.profile" />

src/common/constants/Resources.js

@@ -1,3 +1,4 @@
 export default {
+  USER: 'USER',
   TODO: 'TODO',
 };

src/common/routes/admin/index.js

@@ -0,0 +1,25 @@
+import Roles from '../../constants/Roles';
+import compose from '../../utils/composeEnterHooks';
+
+export default (store) => ({
+  path: 'admin',
+  getIndexRoute(location, cb) {
+    require.ensure([], (require) => {
+      cb(null, {
+        component:
+          require('../../components/pages/admin/user/ListPage').default,
+      });
+    });
+  },
+  getChildRoutes(location, cb) {
+    require.ensure([], (require) => {
+      cb(null, [
+        require('./user').default(store),
+      ]);
+    });
+  },
+  onEnter: compose.series(
+    require('../../utils/authRequired').default(store),
+    require('../../utils/roleRequired').default(store)(Roles.ADMIN),
+  ),
+});

src/common/routes/admin/user/index.js

@@ -0,0 +1,11 @@
+export default (store) => ({
+  path: 'user',
+  getIndexRoute(location, cb) {
+    require.ensure([], (require) => {
+      cb(null, {
+        component:
+          require('../../../components/pages/admin/user/ListPage').default,
+      });
+    });
+  },
+});

src/common/routes/index.js

@@ -8,6 +8,7 @@ export default (store) => ({
   getChildRoutes(location, cb) {
     require.ensure([], (require) => {
       cb(null, [
+        require('./admin').default(store),
         require('./user').default(store),
         require('./todo').default(store),
         require('./notFound').default(store),