1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950 |
- 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/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: any, 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: any) => ({
- getCategories: () => dispatch(asyncGetCategories()),
- });
- export default connect(mapStateToProps, mapDispatchToProps)(Categories);
|