hw-react-1/src/components/Categories/Categories.tsx

import { useEffect, useState } from 'react';
import { Route } from 'react-router-dom';
import { connect } from 'react-redux';

import s from './Categories.module.css';
import { asyncGetCategories } from '../../redux/categories/operation';
import {
  ICategoriesProps,
  ICategoriesState,
} from '../../typescript/components/Categories/interfaces';

import Category from './Category/Category';
import Pagination from '../PaginationBar/PaginationBar';

const Categories = ({ categoriesArr, getCategories }: ICategoriesProps) => {
  useEffect(() => {
    getCategories();
  }, [getCategories]);

  const [page, setPage] = useState(1);
  const handlePageChange = (page: number) => setPage(page);

  return categoriesArr ? (
    <Route>
      <ul className={s.categories_list}>
        {categoriesArr.length !== 0 &&
          categoriesArr
            .slice((page - 1) * 5, page * 5)
            .map((category, i: number) => (
              <Category key={i} category={category} />
            ))}
      </ul>
      <Pagination
        page={page}
        total={Math.ceil(categoriesArr.length / 5)}
        handlePageChange={handlePageChange}
      />
    </Route>
  ) : null;
};

const mapStateToProps = (state: ICategoriesState) => ({
  categoriesArr: state.categories.categoriesArr,
});

const mapDispatchToProps = (
  dispatch: (dispatchAction: any) => Promise<void>,
) => ({
  getCategories: () => dispatch(asyncGetCategories()),
});

export default connect(mapStateToProps, mapDispatchToProps)(Categories);