hw-js-16-GraphQL-Redux-React-Navigation/src/components/Orders/Orders.jsx

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


import s from './Orders.module.css';
import { asyncGetOrders } from '../../redux/orders/operations';
import {getOrders} from '../../redux/orders/selector';

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

const Orders = () => {
  const dispatch = useDispatch();
  const orders = useSelector(getOrders);
  const [page, setPage] = useState(1);
 

  const handlePageChange = (page) => setPage(page)

   useEffect(() => {
     dispatch(asyncGetOrders())
   }, [dispatch]);

  return (
    <Route>
      <ul className={s.orders_list}>
        {orders.length !== 0 && orders.slice((page-1)*5,(page*5)).map((order,i) => <Order key={i} order={order} />)}
      </ul>
        <Pagination
          page={page}
          total={Math.ceil(orders.length/5)}
          handlePageChange={handlePageChange}
        />

    </Route>
  );
};

export default Orders;