Requirement In Material UI, using pagination by click on the digits e.g 1, 2, it should do api call with limit=10 and offset=from 10(after the first call)pagination image
*issue * it working but I need to click two times on the digits, but functionality is working properly as it should.
By clicking on the digits or left/right arrow of pagination, calling handlePageChange method and setting offset state value and putted the offset as useEffect() dependency array so on every change it should make api call with new offset value
/*eslint-disable*/
import { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import PerfectScrollbar from 'react-perfect-scrollbar';
import DeleteIcon from '@material-ui/icons/Delete';
import DescriptionIcon from '@material-ui/icons/Description';
import { useNavigate } from 'react-router-dom';
import Pagination from '@material-ui/lab/Pagination';
import {
Box,
Card,
Table,
TableBody,
TableCell,
TableHead,
TableRow,
createTheme,
Tooltip,
IconButton
} from '@material-ui/core';
import usersServices from 'src/services/usersServices';
const CustomerListResults = (props) => {
const navigate = useNavigate();
const handleExportData = (value) => {
console.log('Value inside handleExportData: ', value);
navigate('/app/exports_device_data', { state: value });
};
const handleDeleteUser = (user) => {
const userId = user._id;
console.log('DELETE USER', userId);
const newUsers = props.users.filter((item) => item._id !== userId);
props.newUsers(newUsers, userId);
};
// --------------------------------Pagination-------------------------------
let limit = 10;
const [users, setUsers] = useState([]);
const [page, setPage] = useState(0);
const [count, setCount] = useState(0);
const [offSet, setOffSet] = useState(0);
const retrieveCustomers = async () => {
if (!count) {
const res = await usersServices.getAllUsersRecordCount();
let dataCnt = res.data.data;
setCount(Math.ceil(dataCnt / 10));
}
console.log('CHEKCING useEffect(): ');
const res = await usersServices.getAllUsers(limit, offSet);
setUsers(res.data.data);
};
const handlePageChange = (event, value) => {
setPage(value);
setOffSet(page * 10);
};
useEffect(retrieveCustomers, [offSet]);
console.log('CHECKING FOR offSet Value: ', offSet);
return (
<Card>
<PerfectScrollbar>
<Box sx={{ minWidth: 64 }}>
<Table>
<TableHead>
<TableRow>
<TableCell>Name</TableCell>
<TableCell>Email</TableCell>
<TableCell>Phone</TableCell>
<TableCell>Type</TableCell>
<TableCell>Status</TableCell>
{/* <TableCell>Data Count</TableCell> */}
<TableCell>Action</TableCell>
</TableRow>
</TableHead>
<TableBody>
{users.map((user) => (
<TableRow hover key={user.email}>
<TableCell>{`${user.first_name} ${user.last_name}`}</TableCell>
<TableCell>{user.email}</TableCell>
<TableCell>{user.phone_number}</TableCell>
<TableCell>{user.user_type}</TableCell>
<TableCell>{user.status}</TableCell>
{/* <TableCell>{user.device_data_count}</TableCell> */}
<TableCell>
<Tooltip title="Delete">
<IconButton
aria-label="delete"
onClick={() => handleDeleteUser(user)}
>
<DeleteIcon />
</IconButton>
</Tooltip>
<Tooltip title="Export">
<IconButton
aria-label="export data"
onClick={() => handleExportData(user)}
>
<DescriptionIcon />
</IconButton>
</Tooltip>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</Box>
</PerfectScrollbar>
<Pagination
component="div"
count={count}
page={page}
siblingCount={1}
boundaryCount={1}
variant="outlined"
// shape="rounded"
onChange={handlePageChange}
/>
</Card>
);
};
CustomerListResults.propTypes = {
users: PropTypes.array.isRequired
};
export default CustomerListResults;
Please help, thanks in advance
Top comments (0)