Skip to content

Commit f02aca2

Browse files
xidedixxidedix
authored
Merge pull request #95 from coreui/dev-users-example
v2.0.5
2 parents e7ff49c + 6bf0920 commit f02aca2

File tree

10 files changed

+194
-9
lines changed

10 files changed

+194
-9
lines changed

‎.env

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
PORT=3000

‎CHANGELOG.md

+10
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,15 @@
11
## [CoreUI](https://coreui.io/) for [react](./REACT.md) changelog
22

3+
##### `v2.0.5`
4+
- feat(router): Users/User Breadcrumb example with `/users/:id`
5+
- chore: update `@coreui/react` to `2.0.4`,
6+
- chore: update `prop-types` to `15.6.2`
7+
- chore: update `react` to `16.4.1`
8+
- chore: update `react-dom` to `16.4.1`
9+
- chore: update `react-test-renderer` to `16.4.1`
10+
- chore: update `npm-run-all` to `4.1.3`
11+
- chore: add `.env` file
12+
313
##### `v2.0.4`
414
- feat(Forms): FormFeedback valid, toggleFade
515
- refactor(Cards): toggleFade

‎package.json

+8-8
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@coreui/coreui-free-react-admin-template",
3-
"version": "2.0.4",
3+
"version": "2.0.5",
44
"description": "CoreUI React Open Source Bootstrap 4 Admin Template",
55
"author": "Łukasz Holeczek",
66
"homepage": "https://coreui.io",
@@ -14,8 +14,8 @@
1414
"dependencies": {
1515
"@coreui/coreui": "^2.0.2",
1616
"@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.2.0",
17-
"@coreui/icons": "^0.2.0",
18-
"@coreui/react": "^2.0.1",
17+
"@coreui/icons": "0.2.0",
18+
"@coreui/react": "^2.0.4",
1919
"bootstrap": "^4.1.1",
2020
"chart.js": "^2.7.2",
2121
"classnames": "^2.2.6",
@@ -24,21 +24,21 @@
2424
"enzyme-adapter-react-16": "^1.1.1",
2525
"flag-icon-css": "^3.0.0",
2626
"font-awesome": "^4.7.0",
27-
"prop-types": "^15.6.1",
28-
"react": "^16.4.0",
27+
"prop-types": "^15.6.2",
28+
"react": "^16.4.1",
2929
"react-chartjs-2": "^2.7.2",
30-
"react-dom": "^16.4.0",
30+
"react-dom": "^16.4.1",
3131
"react-loadable": "^5.4.0",
3232
"react-router-config": "^1.0.0-beta.4",
3333
"react-router-dom": "^4.3.1",
34-
"react-test-renderer": "^16.4.0",
34+
"react-test-renderer": "^16.4.1",
3535
"reactstrap": "^6.1.0",
3636
"simple-line-icons": "^2.4.1"
3737
},
3838
"devDependencies": {
3939
"babel-jest": "^23.0.1",
4040
"node-sass-chokidar": "^1.3.0",
41-
"npm-run-all": "^4.1.2",
41+
"npm-run-all": "^4.1.3",
4242
"react-scripts": "^1.1.4"
4343
},
4444
"scripts": {

‎src/containers/DefaultLayout/DefaultHeader.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ class DefaultHeader extends Component {
3232
<NavLink href="/">Dashboard</NavLink>
3333
</NavItem>
3434
<NavItem className="px-3">
35-
<NavLink href="#">Users</NavLink>
35+
<NavLink href="#/users">Users</NavLink>
3636
</NavItem>
3737
<NavItem className="px-3">
3838
<NavLink href="#">Settings</NavLink>

‎src/routes.js

+13
Original file line numberDiff line numberDiff line change
@@ -172,6 +172,17 @@ const Widgets = Loadable({
172172
loading: Loading,
173173
});
174174

175+
const Users = Loadable({
176+
loader: () => import('./views/Users/Users'),
177+
loading: Loading,
178+
});
179+
180+
const User = Loadable({
181+
loader: () => import('./views/Users/User'),
182+
loading: Loading,
183+
});
184+
185+
175186

176187
// https://github.com/ReactTraining/react-router/tree/master/packages/react-router-config
177188
const routes = [
@@ -214,6 +225,8 @@ const routes = [
214225
{ path: '/notifications/modals', name: 'Modals', component: Modals },
215226
{ path: '/widgets', name: 'Widgets', component: Widgets },
216227
{ path: '/charts', name: 'Charts', component: Charts },
228+
{ path: '/users', exact: true, name: 'Users', component: Users },
229+
{ path: '/users/:id', exact: true, name: 'User Details', component: User },
217230
];
218231

219232
export default routes;

‎src/views/Users/User.js

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import React, { Component } from 'react';
2+
import { Card, CardBody, CardHeader, Col, Row, Table } from 'reactstrap';
3+
4+
import usersData from './UsersData'
5+
6+
class User extends Component {
7+
8+
render() {
9+
10+
const user = usersData.find( user => user.id.toString() === this.props.match.params.id)
11+
12+
const userDetails = user ? Object.entries(user) : [['id', (<span><i className="text-muted icon-ban"></i> Not found</span>)]]
13+
14+
return (
15+
<div className="animated fadeIn">
16+
<Row>
17+
<Col lg={6}>
18+
<Card>
19+
<CardHeader>
20+
<strong><i className="icon-info pr-1"></i>User id: {this.props.match.params.id}</strong>
21+
</CardHeader>
22+
<CardBody>
23+
<Table responsive striped hover>
24+
<tbody>
25+
{
26+
userDetails.map(([key, value]) => {
27+
return (
28+
<tr>
29+
<td>{`${key}:`}</td>
30+
<td><strong>{value}</strong></td>
31+
</tr>
32+
)
33+
})
34+
}
35+
</tbody>
36+
</Table>
37+
</CardBody>
38+
</Card>
39+
</Col>
40+
</Row>
41+
</div>
42+
)
43+
}
44+
}
45+
46+
export default User;

‎src/views/Users/Users.js

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import React, { Component } from 'react';
2+
import { Badge, Card, CardBody, CardHeader, Col, Row, Table } from 'reactstrap';
3+
4+
import usersData from './UsersData'
5+
6+
function UserRow(props) {
7+
const user = props.user
8+
const userLink = `#/users/${user.id}`
9+
10+
const getBadge = (status) => {
11+
return status === 'Active' ? 'success' :
12+
status === 'Inactive' ? 'secondary' :
13+
status === 'Pending' ? 'warning' :
14+
status === 'Banned' ? 'danger' :
15+
'primary'
16+
}
17+
18+
return (
19+
<tr key={user.id.toString()}>
20+
<th scope="row"><a href={userLink}>{user.id}</a></th>
21+
<td><a href={userLink}>{user.name}</a></td>
22+
<td>{user.registered}</td>
23+
<td>{user.role}</td>
24+
<td><Badge href={userLink} color={getBadge(user.status)}>{user.status}</Badge></td>
25+
</tr>
26+
)
27+
}
28+
29+
class Users extends Component {
30+
31+
render() {
32+
33+
const userList = usersData.filter((user) => user.id < 10)
34+
35+
return (
36+
<div className="animated fadeIn">
37+
<Row>
38+
<Col xl={6}>
39+
<Card>
40+
<CardHeader>
41+
<i className="fa fa-align-justify"></i> Users <small className="text-muted">example</small>
42+
</CardHeader>
43+
<CardBody>
44+
<Table responsive hover>
45+
<thead>
46+
<tr>
47+
<th scope="col">id</th>
48+
<th scope="col">name</th>
49+
<th scope="col">registered</th>
50+
<th scope="col">role</th>
51+
<th scope="col">status</th>
52+
</tr>
53+
</thead>
54+
<tbody>
55+
{userList.map((user, index) =>
56+
<UserRow key={index} user={user}/>
57+
)}
58+
</tbody>
59+
</Table>
60+
</CardBody>
61+
</Card>
62+
</Col>
63+
</Row>
64+
</div>
65+
)
66+
}
67+
}
68+
69+
export default Users;

‎src/views/Users/Users.test.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
import Users from './Users';
4+
5+
it('renders without crashing', () => {
6+
const div = document.createElement('div');
7+
ReactDOM.render(<Users />, div);
8+
ReactDOM.unmountComponentAtNode(div);
9+
});

‎src/views/Users/UsersData.js

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

‎src/views/Users/package.json

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"name": "Users",
3+
"version": "0.0.0",
4+
"private": true,
5+
"main": "./Users.js"
6+
}

0 commit comments

Comments
 (0)