Merge pull request #95 from coreui/dev-users-example

v2.0.5

.env

@@ -0,0 +1 @@
+PORT=3000

CHANGELOG.md

@@ -1,5 +1,15 @@
 ## [CoreUI](https://coreui.io/) for [react](./REACT.md) changelog
 
+##### `v2.0.5`
+- feat(router): Users/User Breadcrumb example with `/users/:id`
+- chore: update `@coreui/react` to `2.0.4`,
+- chore: update `prop-types` to `15.6.2`
+- chore: update `react` to `16.4.1`
+- chore: update `react-dom` to `16.4.1`
+- chore: update `react-test-renderer` to `16.4.1`
+- chore: update `npm-run-all` to `4.1.3`
+- chore: add `.env` file
+
 ##### `v2.0.4`
 - feat(Forms): FormFeedback valid, toggleFade
 - refactor(Cards): toggleFade

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/coreui-free-react-admin-template",
-  "version": "2.0.4",
+  "version": "2.0.5",
   "description": "CoreUI React Open Source Bootstrap 4 Admin Template",
   "author": "Łukasz Holeczek",
   "homepage": "https://coreui.io",
@@ -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",
@@ -24,21 +24,21 @@
     "enzyme-adapter-react-16": "^1.1.1",
     "flag-icon-css": "^3.0.0",
     "font-awesome": "^4.7.0",
-    "prop-types": "^15.6.1",
-    "react": "^16.4.0",
+    "prop-types": "^15.6.2",
+    "react": "^16.4.1",
     "react-chartjs-2": "^2.7.2",
-    "react-dom": "^16.4.0",
+    "react-dom": "^16.4.1",
     "react-loadable": "^5.4.0",
     "react-router-config": "^1.0.0-beta.4",
     "react-router-dom": "^4.3.1",
-    "react-test-renderer": "^16.4.0",
+    "react-test-renderer": "^16.4.1",
     "reactstrap": "^6.1.0",
     "simple-line-icons": "^2.4.1"
   },
   "devDependencies": {
     "babel-jest": "^23.0.1",
     "node-sass-chokidar": "^1.3.0",
-    "npm-run-all": "^4.1.2",
+    "npm-run-all": "^4.1.3",
     "react-scripts": "^1.1.4"
   },
   "scripts": {

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"
+}