8000 feat: Users/User Breadcrumb example with `/users/:id` · AppRoxx/coreui-react-admin@ebd1780 · GitHub
[go: up one dir, main page]
Skip to content

Commit ebd1780

Browse files
xidedixxidedix
committed
feat: Users/User Breadcrumb example with /users/:id 
1 parent cf81604 commit ebd1780

File tree

8 files changed

+132
-3
lines changed

8 files changed

+132
-3
lines changed

‎CHANGELOG.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22

33
##### `v1.0.11`
44
- refactor(Breadcrumb): fix for dynamic url like `/resource/:id`
5+
- feat: Users/User Breadcrumb example with `/users/:id`
56

67
##### `v1.0.10`
78
- refactor: `<InputGroupAddon addonType="prepend">`

‎React_Full_Project/src/components/Header/Header.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,10 +48,10 @@ class Header extends Component {
4848
</NavbarToggler>
4949
<Nav className="d-md-down-none" navbar>
5050
<NavItem className="px-3">
51-
<NavLink href="#">Dashboard</NavLink>
51+
<NavLink href="#/">Dashboard</NavLink>
5252
</NavItem>
5353
<NavItem className="px-3">
54-
<NavLink href="#">Users</NavLink>
54+
<NavLink href="#/users">Users</NavLink>
5555
</NavItem>
5656
<NavItem className="px-3">
5757
<NavLink href="#">Settings</NavLink>

‎React_Full_Project/src/containers/Full/Full.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,10 @@ import Alerts from '../../views/Notifications/Alerts/';
5050
import Badges from '../../views/Notifications/Badges/';
5151
import Modals from '../../views/Notifications/Modals/';
5252

53+
// Users
54+
import Users from '../../views/Users/Users'
55+
import User from '../../views/Users/User'
56+
5357
class Full extends Component {
5458
render() {
5559
return (
@@ -93,6 +97,8 @@ class Full extends Component {
9397
<Route path="/notifications/modals" name="Modals" component={Modals}/>
9498
<Route path="/widgets" name="Widgets" component={Widgets}/>
9599
<Route path="/charts" name="Charts" component={Charts}/>
100+
<Route path="/users" exact name="Users" component={Users}/>
101+
<Route path="/users/:id" name="User Profile" component={User}/>
96102
<Redirect from="/" to="/dashboard"/>
97103
</Switch>
98104
</Container>

‎React_Full_Project/src/routes.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,8 @@ const routes = {
3535
'/theme': 'Theme',
3636
'/theme/colors': 'Colors',
3737
'/theme/typography': 'Typography',
38-
'/widgets': 'Widgets'
38+
'/widgets': 'Widgets',
39+
'/users': 'Users',
40+
'/users/:id': 'User Profile'
3941
};
4042
export default routes;

‎React_Full_Project/src/views/Users/User.js

Lines changed: 46 additions & 0 deletions
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+
return (
13+
<div className="animated fadeIn">
14+
<Row>
15+
<Col lg={6}>
16+
<Card>
17+
<CardHeader>
18+
<i className="fa fa-align-justify"></i> User id: {this.props.match.params.id}
19+
</CardHeader>
20+
<CardBody>
21+
<Table responsive striped hover>
22+
<tbody>
23+
<tr>
24+
<td>id:</td>
25+
<td><strong>{user.id}</strong></td>
26+
</tr>
27+
<tr>
28+
<td>name:</td>
29+
<td><strong>{user.name}</strong></td>
30+
</tr>
31+
<tr>
32+
<td>genre:</td>
33+
<td><strong>{user.genre}</strong></td>
34+
</tr>
35+
</tbody>
36+
</Table>
37+
</CardBody>
38+
</Card>
39+
</Col>
40+
</Row>
41+
</div>
42+
)
43+
}
44+
}
45+
46+
export default User;

‎React_Full_Project/src/views/Users/Users.js

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import React, { Component } from 'react';
2+
import { 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+
return (
10+
<tr key={user.id.toString()}>
11+
<td><a href={userLink}>{user.id}</a></td>
12+
<td><a href={userLink}>{user.name}</a></td>
13+
<td>{user.genre}</td>
14+
</tr>
15+
)
16+
}
17+
18+
class Users extends Component {
19+
20+
render() {
21+
22+
const userList = usersData
23+
24+
return (
25+
<div className="animated fadeIn">
26+
<Row>
27+
<Col lg={6}>
28+
<Card>
29+
<CardHeader>
30+
<i className="fa fa-align-justify"></i> Users
31+
</CardHeader>
32+
<CardBody>
33+
<Table responsive hover>
34+
<thead>
35+
<tr>
36+
<th>id</th>
37+
<th>name</th>
38+
<th>genre</th>
39+
</tr>
40+
</thead>
41+
<tbody>
42+
{userList.map((user, index) =>
43+
<UserRow key={index} user={user}/>
44+
)}
45+
</tbody>
46+
</Table>
47+
</CardBody>
48+
</Card>
49+
</Col>
50+
</Row>
51+
</div>
52+
)
53+
}
54+
}
55+
56+
export default Users;

‎React_Full_Project/src/views/Users/UsersData.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
const usersData = [
2+
{id: 1, name: 'John Doe', genre: 'unknown'},
3+
{id: 2, name: 'Frank Sinatra', genre: 'swing'},
4+
{id: 3, name: 'B.B. King', genre: 'blues'},
5+
{id: 4, name: 'George Michael', genre: 'pop'},
6+
{id: 5, name: 'Michael Jackson', genre: 'R&B'},
7+
{id: 6, name: 'John Lennon', genre: 'rock'},
8+
{id: 7, name: 'Lemmy Kilmister', genre: 'heavy metal'},
9+
{id: 8, name: 'James Brown', genre: 'funk'}
10+
];
11+
12+
export default usersData;

‎React_Full_Project/src/views/Users/package.json

Lines changed: 6 additions & 0 deletions
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)
0