aswi2022code-of-duty-gitlab/frontend/src/features/TrackingTool/Controls/PathPagination.tsx @ fc8a530f

import { Pagination } from '@mui/material'
import { ChangeEvent, Fragment } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { RootState } from '../../redux/store'
import { setDisplayedPathIdx } from '../trackingToolSlice'

const PathPagination = () => {
    const dispatch = useDispatch()
    const pathVariants = useSelector(
        (state: RootState) => state.trackingTool.pathVariants
    )
    const currentPathIdx = useSelector(
        (state: RootState) => state.trackingTool.displayedPathIdx
    )

    const onPageChange = (event: ChangeEvent<unknown>, value: number) => {
        dispatch(setDisplayedPathIdx(value))
    }

    return (
        <Fragment>
            {pathVariants && (
                <Pagination
                    count={pathVariants.length}
                    page={currentPathIdx + 1}
                    onChange={onPageChange}
                    color="primary"
                />
            )}
        </Fragment>
    )
}

export default PathPagination