1 |
fc8a530f
|
Vaclav Honzik
|
import { Pagination } from '@mui/material'
|
2 |
|
|
import { ChangeEvent, Fragment } from 'react'
|
3 |
|
|
import { useDispatch, useSelector } from 'react-redux'
|
4 |
|
|
import { RootState } from '../../redux/store'
|
5 |
|
|
import { setDisplayedPathIdx } from '../trackingToolSlice'
|
6 |
|
|
|
7 |
|
|
const PathPagination = () => {
|
8 |
|
|
const dispatch = useDispatch()
|
9 |
|
|
const pathVariants = useSelector(
|
10 |
|
|
(state: RootState) => state.trackingTool.pathVariants
|
11 |
|
|
)
|
12 |
|
|
const currentPathIdx = useSelector(
|
13 |
|
|
(state: RootState) => state.trackingTool.displayedPathIdx
|
14 |
|
|
)
|
15 |
|
|
|
16 |
|
|
const onPageChange = (event: ChangeEvent<unknown>, value: number) => {
|
17 |
|
|
dispatch(setDisplayedPathIdx(value))
|
18 |
|
|
}
|
19 |
|
|
|
20 |
|
|
return (
|
21 |
|
|
<Fragment>
|
22 |
|
|
{pathVariants && (
|
23 |
|
|
<Pagination
|
24 |
|
|
count={pathVariants.length}
|
25 |
|
|
page={currentPathIdx + 1}
|
26 |
|
|
onChange={onPageChange}
|
27 |
|
|
color="primary"
|
28 |
|
|
/>
|
29 |
|
|
)}
|
30 |
|
|
</Fragment>
|
31 |
|
|
)
|
32 |
|
|
}
|
33 |
|
|
|
34 |
|
|
export default PathPagination
|