feat(router): Users/User Breadcrumb example with /users/:id

package.json

@@ -14,8 +14,8 @@
   "dependencies": {
     "@coreui/coreui": "^2.0.2",
     "@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.2.0",
-    "@coreui/icons": "^0.2.0",
-    "@coreui/react": "^2.0.1",
+    "@coreui/icons": "0.2.0",
+    "@coreui/react": "^2.0.4",
     "bootstrap": "^4.1.1",
     "chart.js": "^2.7.2",
     "classnames": "^2.2.6",

src/containers/DefaultLayout/DefaultHeader.js

@@ -32,7 +32,7 @@ class DefaultHeader extends Component {
             <NavLink href="/">Dashboard</NavLink>
           </NavItem>
           <NavItem className="px-3">
-            <NavLink href="#">Users</NavLink>
+            <NavLink href="#/users">Users</NavLink>
           </NavItem>
           <NavItem className="px-3">
             <NavLink href="#">Settings</NavLink>

src/routes.js

@@ -172,6 +172,17 @@ const Widgets = Loadable({
   loading: Loading,
 });
 
+const Users = Loadable({
+  loader: () => import('./views/Users/Users'),
+  loading: Loading,
+});
+
+const User = Loadable({
+  loader: () => import('./views/Users/User'),
+  loading: Loading,
+});
+
+
 
 // https://github.com/ReactTraining/react-router/tree/master/packages/react-router-config
 const routes = [
@@ -214,6 +225,8 @@ const routes = [
   { path: '/notifications/modals', name: 'Modals', component: Modals },
   { path: '/widgets', name: 'Widgets', component: Widgets },
   { path: '/charts', name: 'Charts', component: Charts },
+  { path: '/users', exact: true,  name: 'Users', component: Users },
+  { path: '/users/:id', exact: true, name: 'User Details', component: User },
 ];
 
 export default routes;

src/views/Users/User.js

@@ -0,0 +1,46 @@
+import React, { Component } from 'react';
+import { Card, CardBody, CardHeader, Col, Row, Table } from 'reactstrap';
+
+import usersData from './UsersData'
+
+class User extends Component {
+
+  render() {
+
+    const user = usersData.find( user => user.id.toString() === this.props.match.params.id)
+
+    const userDetails = user ? Object.entries(user) : [['id', (<span><i className="text-muted icon-ban"></i> Not found</span>)]]
+
+    return (
+      <div className="animated fadeIn">
+        <Row>
+          <Col lg={6}>
+            <Card>
+              <CardHeader>
+                <strong><i className="icon-info pr-1"></i>User id: {this.props.match.params.id}</strong>
+              </CardHeader>
+              <CardBody>
+                  <Table responsive striped hover>
+                    <tbody>
+                      {
+                        userDetails.map(([key, value]) => {
+                          return (
+                            <tr>
+                              <td>{`${key}:`}</td>
+                              <td><strong>{value}</strong></td>
+                            </tr>
+                          )
+                        })
+                      }
+                    </tbody>
+                  </Table>
+              </CardBody>
+            </Card>
+          </Col>
+        </Row>
+      </div>
+    )
+  }
+}
+
+export default User;

src/views/Users/Users.js

@@ -0,0 +1,69 @@
+import React, { Component } from 'react';
+import { Badge, Card, CardBody, CardHeader, Col, Row, Table } from 'reactstrap';
+
+import usersData from './UsersData'
+
+function UserRow(props) {
+  const user = props.user
+  const userLink = `#/users/${user.id}`
+
+  const getBadge = (status) => {
+    return status === 'Active' ? 'success' :
+      status === 'Inactive' ? 'secondary' :
+        status === 'Pending' ? 'warning' :
+          status === 'Banned' ? 'danger' :
+            'primary'
+  }
+
+  return (
+    <tr key={user.id.toString()}>
+        <th scope="row"><a href={userLink}>{user.id}</a></th>
+        <td><a href={userLink}>{user.name}</a></td>
+        <td>{user.registered}</td>
+        <td>{user.role}</td>
+        <td><Badge href={userLink} color={getBadge(user.status)}>{user.status}</Badge></td>
+    </tr>
+  )
+}
+
+class Users extends Component {
+
+  render() {
+
+    const userList = usersData.filter((user) => user.id < 10)
+
+    return (
+      <div className="animated fadeIn">
+        <Row>
+          <Col xl={6}>
+            <Card>
+              <CardHeader>
+                <i className="fa fa-align-justify"></i> Users <small className="text-muted">example</small>
+              </CardHeader>
+              <CardBody>
+                <Table responsive hover>
+                  <thead>
+                    <tr>
+                      <th scope="col">id</th>
+                      <th scope="col">name</th>
+                      <th scope="col">registered</th>
+                      <th scope="col">role</th>
+                      <th scope="col">status</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {userList.map((user, index) =>
+                      <UserRow key={index} user={user}/>
+                    )}
+                  </tbody>
+                </Table>
+              </CardBody>
+            </Card>
+          </Col>
+        </Row>
+      </div>
+    )
+  }
+}
+
+export default Users;

src/views/Users/Users.test.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Users from './Users';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<Users />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});

src/views/Users/UsersData.js

@@ -0,0 +1,31 @@
+const usersData = [
+  {id: 0, name: 'John Doe', registered: '2018/01/01', role: 'Guest', status: 'Pending'},
+  {id: 1, name: 'Samppa Nori', registered: '2018/01/01', role: 'Member', status: 'Active'},
+  {id: 2, name: 'Estavan Lykos', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
+  {id: 3, name: 'Chetan Mohamed', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
+  {id: 4, name: 'Derick Maximinus', registered: '2018/03/01', role: 'Member', status: 'Pending'},
+  {id: 5, name: 'Friderik Dávid', registered: '2018/01/21', role: 'Staff', status: 'Active'},
+  {id: 6, name: 'Yiorgos Avraamu', registered: '2018/01/01', role: 'Member', status: 'Active'},
+  {id: 7, name: 'Avram Tarasios', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
+  {id: 8, name: 'Quintin Ed', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
+  {id: 9, name: 'Enéas Kwadwo', registered: '2018/03/01', role: 'Member', status: 'Pending'},
+  {id: 10, name: 'Agapetus Tadeáš', registered: '2018/01/21', role: 'Staff', status: 'Active'},
+  {id: 11, name: 'Carwyn Fachtna', registered: '2018/01/01', role: 'Member', status: 'Active'},
+  {id: 12, name: 'Nehemiah Tatius', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
+  {id: 13, name: 'Ebbe Gemariah', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
+  {id: 14, name: 'Eustorgios Amulius', registered: '2018/03/01', role: 'Member', status: 'Pending'},
+  {id: 15, name: 'Leopold Gáspár', registered: '2018/01/21', role: 'Staff', status: 'Active'},
+  {id: 16, name: 'Pompeius René', registered: '2018/01/01', role: 'Member', status: 'Active'},
+  {id: 17, name: 'Paĉjo Jadon', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
+  {id: 18, name: 'Micheal Mercurius', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
+  {id: 19, name: 'Ganesha Dubhghall', registered: '2018/03/01', role: 'Member', status: 'Pending'},
+  {id: 20, name: 'Hiroto Šimun', registered: '2018/01/21', role: 'Staff', status: 'Active'},
+  {id: 21, name: 'Vishnu Serghei', registered: '2018/01/01', role: 'Member', status: 'Active'},
+  {id: 22, name: 'Zbyněk Phoibos', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
+  {id: 23, name: 'Einar Randall', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
+  {id: 24, name: 'Félix Troels', registered: '2018/03/21', role: 'Staff', status: 'Active'},
+  {id: 25, name: 'Aulus Agmundr', registered: '2018/01/01', role: 'Member', status: 'Pending'},
+  {id: 42, name: 'Ford Prefex', registered: '2001/05/21', role: 'Alien', status: 'Don\'t panic!'}
+]
+
+export default usersData

src/views/Users/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "Users",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./Users.js"
+}