Skip to content

Commit 68dfb6b

Browse files
author
maharshi
committed
User module with pagination
1 parent a5577e1 commit 68dfb6b

File tree

8 files changed

+982
-27
lines changed

8 files changed

+982
-27
lines changed

‎app/Http/Controllers/APIController.php

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<?php
22

33
namespace App\Http\Controllers;
4+
use Exception;
45
use Illuminate\Http\Request;
56
use App\User;
67
use Illuminate\Support\Facades\Hash;
@@ -16,9 +17,9 @@ class APIController extends Controller
1617
public function users()
1718
{
1819
try{
19-
$users = User::latest()->paginate(5);
20+
$users = User::paginate(5);
2021
$response = ['success'=>true,'message' => 'user list !!','data'=>$users];
21-
}catch (\Exception $e){
22+
}catch (Exception $e){
2223
return [
2324
'success' => false,
2425
'message' => $e->getMessage()
@@ -32,7 +33,7 @@ public function profile()
3233
try{
3334
$user = JWTAuth::parseToken()->authenticate();
3435
$response = ['success'=> true,'message' => 'user profile !!','data'=> $user];
35-
}catch (\Exception $e){
36+
}catch (Exception $e){
3637
$response = ['success'=> false,'message' => '','data'=> $e->getMessage()];
3738
}
3839
return response()->json($response, 201);
@@ -79,7 +80,7 @@ public function updateProfile(Request $request)
7980
$user->save();
8081

8182
$response = ['success'=> true,'message' => 'Profile updated !!','data'=> $user];
82-
}catch (\Exception $e){
83+
}catch (Exception $e){
8384
$response = ['success'=> false,'message' => '','data'=> $e->getMessage()];
8485
}
8586
return response()->json($response, 201);

‎public/js/app.js

Lines changed: 797 additions & 14 deletions
Large diffs are not rendered by default.

‎resources/js/Index.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,11 @@ import { Provider } from 'react-redux';
44
import thunk from 'redux-thunk';
55
import ReactDOM from 'react-dom';
66
import LoginModule from './components/Login/Reducer/Data';
7+
import UserModule from './components/User/UserList/Reducer/UserData';
78
import axios from "axios";
89
import Header from "./components/Layout/Menu";
910

1011
let AuthToken = localStorage.getItem('token');
11-
1212
window.axios = axios.create({
1313
baseURL: 'http://127.0.0.1:8000/api',
1414
timeout: 10000,
@@ -26,7 +26,8 @@ const enhancer = composeEnhancers(
2626
);
2727

2828
const rootReducer = combineReducers({
29-
LoginSection: LoginModule
29+
LoginSection: LoginModule,
30+
UserSection: UserModule
3031
});
3132

3233
const store = createStore(rootReducer, enhancer);

‎resources/js/components/Layout/TopNav.js

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -45,9 +45,9 @@ class TopNav extends Component{
4545
<a href="#" data-toggle="dropdown"
4646
className="nav-link dropdown-toggle nav-link-lg nav-link-user">
4747
<div className="avatar mr-1">
48-
<img src={this.props.avatar} alt={'Admin'}/>
48+
<img src={this.props.loginAvatar} alt={'Admin'}/>
4949
</div>
50-
<div className="d-none d-md-block d-lg-inline-block">{this.props.username}</div>
50+
<div className="d-none d-md-block d-lg-inline-block">{this.props.loginUsername}</div>
5151
</a>
5252
<div className="dropdown-menu dropdown-menu-right">
5353
<Link to="/profile" className="dropdown-item">
@@ -69,9 +69,8 @@ class TopNav extends Component{
6969

7070
const mapStateToProps = state => {
7171
return {
72-
username : state.LoginSection.username,
73-
email : state.LoginSection.email,
74-
avatar : state.LoginSection.avatar,
72+
loginUsername : state.LoginSection.username,
73+
loginAvatar : state.LoginSection.avatar,
7574
}
7675
};
7776

‎resources/js/components/User/UserList/Container/UserController.js

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
export const USERLIST = "USER_DATA";
2+
3+
export const userList = (data) => {
4+
let link;
5+
if(data === 1){
6+
link = 'users/list';
7+
}else{
8+
link = 'users/list'+data;
9+
}
10+
const request = axios.get(link);
11+
return dispatch =>
12+
{
13+
request.then(({ data }) => {
14+
dispatch({
15+
type: USERLIST,
16+
payload: data
17+
});
18+
});
19+
}
20+
};

‎resources/js/components/User/UserList/Index.js

Lines changed: 96 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,60 @@
11
import React ,{Component} from 'react';
22
import SideMenu from "../../Layout/SideMenu";
33
import Navigation from "../../Layout/TopNav";
4+
import Pagination from "react-js-pagination";
5+
import * as UserAction from "./Container/UserController";
6+
import UserList from "./UserList";
7+
import {connect} from "react-redux";
8+
49
const UserIcon = require('react-feather/dist/icons/users').default;
510

611
class Index extends Component{
712
constructor(props) {
813
super(props);
914
this.state = {
1015
data: [],
16+
activePage: 1,
17+
totalData: 0,
18+
per_page: 5,
19+
recordList: false,
1120
};
1221
}
1322

23+
componentDidMount() {
24+
this.props.userList(this.state.activePage);
25+
}
26+
27+
componentWillReceiveProps(nextProps) {
28+
if(nextProps.totalData !== undefined) {
29+
this.setState({
30+
data: nextProps.userListData,
31+
activePage: nextProps.current_page,
32+
totalData: nextProps.totalData,
33+
per_page: nextProps.per_page,
34+
recordList: nextProps.recordList,
35+
});
36+
}
37+
}
38+
39+
handlePageChange(pageNumber) {
40+
this.setState({activePage: 'page='+pageNumber});
41+
this.props.userList('?page='+pageNumber);
42+
}
43+
1444
render() {
45+
let userList,statusMessage;
46+
if(this.state.totalData !== 0) {
47+
statusMessage = '';
48+
userList = this.props.userListData.map((user,key) =>
49+
<UserList key={key} id={user.id} name={user.name} email={user.email} avatar={user.avatar}/>
50+
);
51+
}else{
52+
statusMessage = <h4 className={'text-center'}>Record not found</h4>;
53+
userList = [];
54+
}
55+
1556
return (
16-
<div className="UserIndexLayout" >
57+
<div className="UserIndexLayout">
1758
<div id="app">
1859
<SideMenu/>
1960
<div id="main">
@@ -24,7 +65,45 @@ class Index extends Component{
2465
<hr/>
2566
</div>
2667
<section id="basic-horizontal-layouts">
68+
<div className="row" id="table-hover-row">
69+
<div className="col-12">
70+
<div className="card">
71+
<div className="card-content">
72+
{statusMessage}
73+
<div className="table-responsive">
74+
<table className="table table-hover table-striped mb-0">
75+
<thead>
76+
<tr>
77+
<th>Image</th>
78+
<th>Name</th>
79+
<th>Email</th>
80+
<th>#</th>
81+
</tr>
82+
</thead>
83+
<tbody>
84+
{userList}
85+
</tbody>
86+
</table>
87+
</div>
88+
89+
</div>
90+
</div>
91+
</div>
92+
</div>
2793

94+
<nav aria-label="Page navigation example">
95+
<ul className={"pagination pagination-primary justify-content-center"}>
96+
<Pagination
97+
activePage={this.state.activePage}
98+
itemsCountPerPage={this.state.per_page}
99+
totalItemsCount={this.state.totalData}
100+
onChange={this.handlePageChange.bind(this)}
101+
itemClass="page-item"
102+
linkClass="page-link"
103+
pageRangeDisplayed={8}
104+
/>
105+
</ul>
106+
</nav>
28107
</section>
29108
</div>
30109

@@ -35,5 +114,20 @@ class Index extends Component{
35114
}
36115
}
37116

38-
export default Index;
117+
const mapStateToProps = state => {
118+
return {
119+
current_page : state.UserSection.current_page,
120+
per_page : state.UserSection.per_page,
121+
totalData : state.UserSection.totalData,
122+
userListData : state.UserSection.userList,
123+
recordList : state.UserSection.recordList,
124+
}
125+
};
126+
127+
const mapDispatchToProps = dispatch => {
128+
return {
129+
userList: (data) => dispatch(UserAction.userList(data)),
130+
};
131+
};
39132

133+
export default connect(mapStateToProps,mapDispatchToProps)(Index);

‎resources/js/components/User/UserList/Reducer/UserData.js

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import * as UserAction from '../Container/UserController';
2+
3+
const initialStateData = {
4+
current_page : 1,
5+
per_page : 5,
6+
totalData : 0,
7+
userList : [],
8+
recordList : false,
9+
};
10+
11+
const UserData = (state = initialStateData,action) => {
12+
13+
if(action.type === UserAction.USERLIST){
14+
if(action.payload.success) {
15+
return {
16+
...state,
17+
current_page : action.payload.data.current_page,
18+
per_page : action.payload.data.per_page,
19+
totalData : action.payload.data.total,
20+
userList: action.payload.data.data,
21+
recordList: true,
22+
}
23+
}else{
24+
return {
25+
...state,
26+
message: action.payload.message,
27+
status : 'alert alert-danger alert-dismissible show fade',
28+
}
29+
}
30+
}
31+
32+
return state;
33+
};
34+
35+
export default UserData;

‎resources/js/components/User/UserList/UserList.js

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import React from 'react';
2+
3+
const UserList = (props) => {
4+
return (
5+
<tr>
6+
<td>
7+
<div className="avatar avatar-lg mr-3">
8+
<img src={props.avatar} alt="{props.name}" />
9+
</div>
10+
</td>
11+
<td className="text-bold-500">{props.name}</td>
12+
<td className="text-bold-500">{props.email}</td>
13+
<td>
14+
<a href="#">
15+
{props.id}
16+
</a>
17+
</td>
18+
</tr>
19+
);
20+
};
21+
22+
export default UserList;

0 commit comments

Comments
 (0)