37 lines
1.2 KiB
TypeScript
37 lines
1.2 KiB
TypeScript
import { useGetCoinsCountQuery } from '../coinApi';
|
|
import { useNavigate } from "react-router-dom";
|
|
|
|
import Button from '@mui/material/Button';
|
|
import ButtonGroup from '@mui/material/ButtonGroup';
|
|
import Typography from '@mui/material/Typography';
|
|
|
|
|
|
const Pager = (props:any): JSX.Element => {
|
|
|
|
console.log("page props", props)
|
|
|
|
const { page, per_page, } = props;
|
|
|
|
const { data, error, isLoading, isSuccess, refetch } = useGetCoinsCountQuery();
|
|
const navigate = useNavigate();
|
|
|
|
const lastPage = Math.ceil(data / per_page)
|
|
|
|
function handlePager(page: number) {
|
|
const url = `/?page=${page}`
|
|
navigate(url)
|
|
}
|
|
|
|
return (
|
|
<ButtonGroup variant="contained" aria-label="outlined primary button group">
|
|
<Button disabled={page === 1} onClick={() => navigate("/")}>First</Button>
|
|
<Button disabled={page === 1} onClick={() => handlePager(page - 1)}>Prev</Button>
|
|
<Typography style={{ padding: 10}}>Page {page} from {lastPage}</Typography>
|
|
<Button disabled={page === lastPage} onClick={() => handlePager(page + 1)}>Next</Button>
|
|
<Button disabled={page === lastPage} onClick={() => handlePager(lastPage)}>Last</Button>
|
|
</ButtonGroup>
|
|
)
|
|
}
|
|
|
|
export default Pager;
|