Skip to content

Commit

Permalink
pagination implemented
Browse files Browse the repository at this point in the history
JaberHPranto committed Jul 7, 2021
1 parent 323bcd4 commit 72dd65c
Showing 8 changed files with 69 additions and 20 deletions.
22 changes: 22 additions & 0 deletions client/src/components/Ecommerce/Paginate.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import React from 'react'
import { Pagination } from 'react-bootstrap'
import { LinkContainer } from 'react-router-bootstrap'

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

)
}

export default Paginate
32 changes: 20 additions & 12 deletions client/src/components/Ecommerce/Screen/HomeScreen.js
Original file line number Diff line number Diff line change
@@ -4,35 +4,43 @@ import { useDispatch, useSelector } from 'react-redux'
import { fetchProducts } from '../../../redux/actions/productActions'
import Loader from '../Loader'
import Message from '../Message'
import Paginate from '../Paginate'
import Product from '../Product'


function HomeScreen({match}) {

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

const keyword = match.params.keyword
console.log(keyword);
const pageNumber = match.params.pageNumber || 1

useEffect(() => {
dispatch(fetchProducts(keyword))
}, [dispatch,keyword])
dispatch(fetchProducts(keyword,pageNumber))
}, [dispatch,keyword,pageNumber])


return (
<div>
<h2>Latest Products</h2>
{loading ? <Loader /> : error ? <Message variant="danger">{error}</Message> : (
<Row>
{products.map(product => (
<Col key={product._id} xs={12} md={6} lg={4} xl={3}>
<Product product={product} />
</Col>
))}
</Row>
)}
<>
<Row>
{products.map(product => (
<Col key={product._id} xs={12} md={6} lg={4} xl={3}>
<Product product={product} />
</Col>
))}
</Row>
<Paginate numOfPages={numOfPages} page={page} keyword={keyword ? keyword : ''} />
</>

)}




</div>
)
4 changes: 3 additions & 1 deletion client/src/pages/EcommercePage.js
Original file line number Diff line number Diff line change
@@ -18,7 +18,9 @@ function EcommercePage() {
<main>
<Container>
<Route path="/" exact component={HomeScreen} />
<Route path="/search/:keyword" component={HomeScreen} />
<Route path="/search/:keyword" component={HomeScreen} exact/>
<Route path="/search/:keyword/page/:pageNumber" component={HomeScreen} />
<Route path="/page/:pageNumber" component={HomeScreen} />
<Route path="/login" component={LoginScreen} />
<Route path="/register" component={RegisterScreen} />
<Route path="/profile" component={ProfileScreen} />
4 changes: 2 additions & 2 deletions client/src/redux/actions/productActions.js
Original file line number Diff line number Diff line change
@@ -2,11 +2,11 @@ import axios from 'axios';
import { PRODUCT_CREATE_REVIEW_FAIL, PRODUCT_CREATE_REVIEW_REQUEST, PRODUCT_CREATE_REVIEW_SUCCESS, PRODUCT_DETAILS_FAIL, PRODUCT_DETAILS_REQUEST, PRODUCT_DETAILS_SUCCESS, PRODUCT_LIST_FAIL, PRODUCT_LIST_REQUEST, PRODUCT_LIST_SUCCESS } from '../../constants/productConstants';

// @ GET products
export const fetchProducts = (keyword='') => async (dispatch) => {
export const fetchProducts = (keyword='',pageNumber='') => async (dispatch) => {
try {
dispatch({ type: PRODUCT_LIST_REQUEST })

const { data } = await axios.get(`/api/products?keyword=${keyword}`)
const { data } = await axios.get(`/api/products?keyword=${keyword}&pageNumber=${pageNumber}`)
dispatch({
type: PRODUCT_LIST_SUCCESS,
payload: data
2 changes: 1 addition & 1 deletion client/src/redux/reducers/productReducers.js
Original file line number Diff line number Diff line change
@@ -6,7 +6,7 @@ export const productListReducer = (state = { products: [] }, action) => {
return { loading: true, products: [] }

case PRODUCT_LIST_SUCCESS:
return { loading: false, products: action.payload }
return { loading: false, products: action.payload.products,page:action.payload.page,numOfPages:action.payload.numOfPages }

case PRODUCT_LIST_FAIL:
return { loading: false, error: action.payload }
8 changes: 8 additions & 0 deletions client/src/styles/index.css
Original file line number Diff line number Diff line change
@@ -43,6 +43,14 @@ code {
.form-control {
opacity: 0.8;
}
.page-link:hover {
background-color: lightblue;
border-color: lightblue;
}
.page-item.active .page-link {
background-color: lightgreen;
border-color: lightgreen;
}

/* Google button */
.login-with-google-btn {
14 changes: 12 additions & 2 deletions server/controller/productController.js
Original file line number Diff line number Diff line change
@@ -5,15 +5,25 @@ import User from '../models/userModel.js'
// getting all products @route -> api/products
export const getProducts = asyncHandler(async (req, res) => {

// for pagination
const pageSize = 2
const page = req.query.pageNumber || 1

const keyword = req.query.keyword ? {
name: {
$regex: req.query.keyword,
$options:'i'
}
}:{}

const products = await Product.find({...keyword})
res.json(products)
const count = await Product.countDocuments({ ...keyword })
const products = await Product.find({ ...keyword })
.limit(pageSize) // how many product will be shown
.skip(pageSize * (page - 1)) // skipping products to be shown on next page; skip till

const numOfPages = Math.ceil(count/pageSize)

res.json({ products, page, numOfPages })
})


3 changes: 1 addition & 2 deletions server/controller/userController.js
Original file line number Diff line number Diff line change
@@ -51,8 +51,7 @@ export const registerUser = async (req,res) => {

// generate the token
const token = jwt.sign({ email: result.email, id: result._id },
process.env.JWT_SECRET,
{ expiresIn: '1h' })
process.env.JWT_SECRET)

res.status(201).json({user:result,token})

0 comments on commit 72dd65c

Please sign in to comment.