meabhisingh / mernProjectEcommerce

This is MERN Stack Ecommerce Project Made to Teach MERN Stack on YouTube
1.15k stars 828 forks source link

Pagination not working #58

Closed adit26data closed 1 year ago

adit26data commented 1 year ago

The pagination component is not working as its not switching and the 1 and 2 options are not coming as per your code this is the code:

import React, { Fragment, useEffect, useState } from 'react' import "./Products.css" import { useSelector, useDispatch } from 'react-redux' import { clearErrors, getProduct } from '../../actions/productAction' import Loader from '../layout/Loader/Loader' import ProductCard from '../Home/ProductCard' import Pagination from "react-js-pagination" import { useAlert } from 'react-alert' function Products({ match }) {

const dispatch = useDispatch();

const [currentPage, setCurrentPage] = useState(1);
const { products, loading, error, productsCount, resultPerPage } = useSelector((state) => state.products);
const keyword = match.params.keyword;
const setCurrentPageNo = (e) => {
    setCurrentPage(e);
}
useEffect(() => {
    dispatch(getProduct(keyword, currentPage));
}, [dispatch, keyword, currentPage])
return (
    <Fragment>
        {loading ? (<Loader />) : (
            <Fragment>
                <h2 className='productsHeading'>Products</h2>
                <div className="products">
                    {products &&
                        products.map((product) => (
                            <ProductCard key={product._id} product={product} />
                        ))}
                </div>
                <div className="paginationBox">
                    <Pagination
                        activePage={match.params.page}
                        itemsCountPerPage={resultPerPage}
                        totalItemsCount={productsCount}
                        onChange={setCurrentPageNo}
                        nextPageText="Next"
                        prevPageText="Prev"
                        firstPageText="1st"
                        lastPageText="Last"
                        itemClass="page-item"
                        linkClass="page-link"
                        activeClass="active"
                        activeLinkClass="pageLinkActive"
                    />
                </div>
            </Fragment>

        )}
    </Fragment>
)

}

export default Products

the Pagination links are failing to switch and its only showing 1st prev next and last...1 and 2 are not there

adit26data commented 1 year ago

Got it working...anyway