From 05c18d0cac8f90494e91ec7471535714f14fbc7f Mon Sep 17 00:00:00 2001 From: xidedix Date: Thu, 21 Jun 2018 20:09:30 +0200 Subject: [PATCH 1/4] 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 025b513f9..ed64c5b53 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 c481ae71f..d1e2a1ce7 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 9b583fc11..cf06b50c8 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 000000000..daa6dbbd6 --- /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 000000000..af203f6f3 --- /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 000000000..faab45ec9 --- /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 000000000..977920d50 --- /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 000000000..46e3b025f --- /dev/null +++ b/src/views/Users/package.json @@ -0,0 +1,6 @@ +{ + "name": "Users", + "version": "0.0.0", + "private": true, + "main": "./Users.js" +} From c870094e9738de113d6214f6616db41c21a22950 Mon Sep 17 00:00:00 2001 From: xidedix Date: Thu, 21 Jun 2018 20:10:04 +0200 Subject: [PATCH 2/4] chore: dependencies update --- package.json | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index ed64c5b53..2b81452e3 100644 --- a/package.json +++ b/package.json @@ -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": { From cea4da04184055ecc507c4117fd5cdaa29c9804f Mon Sep 17 00:00:00 2001 From: xidedix Date: Thu, 21 Jun 2018 20:10:40 +0200 Subject: [PATCH 3/4] chore: add .env file --- .env | 1 + 1 file changed, 1 insertion(+) create mode 100644 .env diff --git a/.env b/.env new file mode 100644 index 000000000..2fc80e3a4 --- /dev/null +++ b/.env @@ -0,0 +1 @@ +PORT=3000 From 6bf0920772b47f91a12846d526a794acd8168764 Mon Sep 17 00:00:00 2001 From: xidedix Date: Thu, 21 Jun 2018 20:11:36 +0200 Subject: [PATCH 4/4] chore(ship) v2.0.5 --- CHANGELOG.md | 10 ++++++++++ package.json | 2 +- 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9b3d64984..edc7c5148 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/package.json b/package.json index 2b81452e3..9eca326dc 100644 --- a/package.json +++ b/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",