From 05c18d0cac8f90494e91ec7471535714f14fbc7f Mon Sep 17 00:00:00 2001 From: xidedix Date: Thu, 21 Jun 2018 20:09:30 +0200 Subject: [PATCH] feat(router): Users/User Breadcrumb example with `/users/:id` --- package.json | 4 +- src/containers/DefaultLayout/DefaultHeader.js | 2 +- src/routes.js | 13 ++++ src/views/Users/User.js | 46 +++++++++++++ src/views/Users/Users.js | 69 +++++++++++++++++++ src/views/Users/Users.test.js | 9 +++ src/views/Users/UsersData.js | 31 +++++++++ src/views/Users/package.json | 6 ++ 8 files changed, 177 insertions(+), 3 deletions(-) create mode 100644 src/views/Users/User.js create mode 100644 src/views/Users/Users.js create mode 100644 src/views/Users/Users.test.js create mode 100644 src/views/Users/UsersData.js create mode 100644 src/views/Users/package.json diff --git a/package.json b/package.json index 025b513..ed64c5b 100644 --- a/package.json +++ b/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", diff --git a/src/containers/DefaultLayout/DefaultHeader.js b/src/containers/DefaultLayout/DefaultHeader.js index c481ae7..d1e2a1c 100644 --- a/src/containers/DefaultLayout/DefaultHeader.js +++ b/src/containers/DefaultLayout/DefaultHeader.js @@ -32,7 +32,7 @@ class DefaultHeader extends Component { Dashboard - Users + Users Settings diff --git a/src/routes.js b/src/routes.js index 9b583fc..cf06b50 100644 --- a/src/routes.js +++ b/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; diff --git a/src/views/Users/User.js b/src/views/Users/User.js new file mode 100644 index 0000000..daa6dbb --- /dev/null +++ b/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', ( Not found)]] + + return ( +
+ + + + + User id: {this.props.match.params.id} + + + + + { + userDetails.map(([key, value]) => { + return ( + + + + + ) + }) + } + +
{`${key}:`}{value}
+ + + + +
+ ) + } +} + +export default User; diff --git a/src/views/Users/Users.js b/src/views/Users/Users.js new file mode 100644 index 0000000..af203f6 --- /dev/null +++ b/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 ( + + {user.id} + {user.name} + {user.registered} + {user.role} + {user.status} + + ) +} + +class Users extends Component { + + render() { + + const userList = usersData.filter((user) => user.id < 10) + + return ( +
+ + + + + Users example + + + + + + + + + + + + + + {userList.map((user, index) => + + )} + +
idnameregisteredrolestatus
+ + + + +
+ ) + } +} + +export default Users; diff --git a/src/views/Users/Users.test.js b/src/views/Users/Users.test.js new file mode 100644 index 0000000..faab45e --- /dev/null +++ b/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(, div); + ReactDOM.unmountComponentAtNode(div); +}); diff --git a/src/views/Users/UsersData.js b/src/views/Users/UsersData.js new file mode 100644 index 0000000..977920d --- /dev/null +++ b/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 diff --git a/src/views/Users/package.json b/src/views/Users/package.json new file mode 100644 index 0000000..46e3b02 --- /dev/null +++ b/src/views/Users/package.json @@ -0,0 +1,6 @@ +{ + "name": "Users", + "version": "0.0.0", + "private": true, + "main": "./Users.js" +}