Implementing advanced pagination to my react site using react-bootstrap

Question

I have been trying to achieve this

For a while now but don't know how to. There is no clear instruction in react-bootstrap site: https://react-bootstrap.github.io/components/pagination/ as to what to do with <Pagination.First />, <Pagination.Prev />, <Pagination.Ellipsis />, <Pagination.Next />, <Pagination.Last />

i currently have this simple pagination:

Please help me with implementing the advanced. My codes:

Paginate.js

import React from 'react'
import { Button, Pagination } from 'react-bootstrap'
import { LinkContainer } from 'react-router-bootstrap'

const Paginate = ({ pages, page, isAdmin = false, keyword = '' }) => {
  return (
    pages > 1 && (
      <Pagination>
        {[...Array(pages).keys()].map((x) => (
          <LinkContainer
            key={x + 1}
            to={
              !isAdmin
                ? keyword
                  ? `/search/${keyword}/page/${x + 1}`
                  : `/page/${x + 1}`
                : `/admin/productlist/${x + 1}`
            }
          >
            
            <Pagination.Item active={x + 1 === page}>{x + 1}</Pagination.Item>
          </LinkContainer>
        ))}
      </Pagination>
    )
  )
}

export default Paginate

productAction.js

export const listProducts = (platform = '', keyword = '', pageNumber = '', sortOrder = '') => async (
  dispatch
) => {
  try {
    dispatch({ type: PRODUCT_LIST_REQUEST })

    const { data } = await axios.get(
      `/api/products?platform=${platform}&keyword=${keyword}&pageNumber=${pageNumber}&sortOrder=${sortOrder}`
    )

    dispatch({
      type: PRODUCT_LIST_SUCCESS,
      payload: data,
    })
  } catch (error) {
    dispatch({
      type: PRODUCT_LIST_FAIL,
      payload:
        error.response && error.response.data.message
          ? error.response.data.message
          : error.message,
    })
  }
}

HomeScreen.js:

import React, { useState, useEffect } from 'react'
import { Link, useParams } from 'react-router-dom'
import { useDispatch, useSelector } from 'react-redux'
import { Row, Col } from 'react-bootstrap'
import Product from '../components/Product'
import Message from '../components/Message'
import Loader from '../components/Loader'
import Paginate from '../components/Paginate'
import ProductCarousel from '../components/ProductCarousel'
import Meta from '../components/Meta'
import { listProducts } from '../actions/productActions'

const HomeScreen = ({ match }) => {
  
  const { platformId } = useParams();
  
  const keyword = match.params.keyword
  const [sortOrder, setSortOrder] = useState('');
  //const category = match.params.id ? match.params.id : '';
  const platform = match.params.id ? match.params.id : ''; 
  const pageNumber = match.params.pageNumber || 1

  const dispatch = useDispatch()

  useEffect(() => {
    dispatch(listProducts(platformId, keyword, pageNumber, sortOrder))
  }, [dispatch, keyword, platformId, pageNumber, sortOrder])
  

  const productList = useSelector((state) => state.productList)
  const { loading, error, products, page, pages } = productList

  const sortHandler = (e) => {
    setSortOrder(e.target.value);
    dispatch(listProducts(platformId, keyword, sortOrder));
  };


  return (
    <>
      <Meta />
      {!keyword ? (
        <ProductCarousel />
      ) : (
        <Link to='/' className='btn btn-light'>
          Go Back
        </Link>
      )}
      {/*category && <h2>{category}</h2>*/}
      <ul className="filter">
        <li>
          Sort By{' '}
          <select name="sortOrder" onChange={sortHandler}>
            <option value="">Newest</option>
            <option value="lowest">Lowest</option>
            <option value="highest">Highest</option>
          </select>
        </li>
      </ul>
      {loading ? (
        <Loader></Loader>
      ) : error ? (
        <Message>{error}</Message> 
      ) : (
        <>
          <Row>
            {products.map((product) => (
              <Col key={product._id} xs={6} md={6} lg={4} xl={3} height='100'>
                <Product product={product} />
              </Col>
            ))}
          </Row>
          <Paginate
            pages={pages}
            page={page}
            keyword={keyword ? keyword : ''}
          />
        </>
      )}
    </>
  )
}

export default HomeScreen

Thank you

Answer 1

I suggest you to check this repo: https://github.com/lukaaspl/ellipsis-pagination