[text] ReviewsPage Pagination with OG design

Viewer

copydownloadembedprintName: ReviewsPage Pagination with OG design
  1. import React, { useState } from 'react';
  2. import Image from 'next/image';
  3. import Reviewitem from 'src/components/home/reviewitem';
  4. import { usePostStore } from 'src/stores/Post/post-store';
  5. import { useToasts } from 'react-toast-notifications';
  6. import { useTranslation } from 'react-i18next';
  7. import { recentReviewListAction } from 'src/stores/Post/post-actions';
  8. import { useRouter } from 'next/router';
  9.  
  10. const ReviewsPage = () => {
  11.   const { t } = useTranslation();
  12.   const { addToast } = useToasts();
  13.   const router = useRouter();
  14.   const [currentPage, setCurrentPage] = useState(1);
  15.   const totalPages = 5;
  16.   const { recentReview, totalCount, loading } = usePostStore();
  17.   console.log('recentReview', (totalCount / 5).toString()?.split('.')[0]);
  18.  
  19.   React.useEffect(() => {
  20.     recentReviewListAction(addToast, currentPage, 5, 'Review', router);
  21.   }, [currentPage]);
  22.  
  23.   const handlePageChange = (page: any) => {
  24.     setCurrentPage(page);
  25.   };
  26.  
  27.   return (
  28.     <>
  29.       <div className="container">
  30.         <div className="main-wraper">
  31.           <div className="main-title"> {t('Reviews')}</div>
  32.           <div className="review-list">
  33.             <Reviewitem postsList={recentReview} />
  34.           </div>
  35.           <ul className="pagination mt-4 mb-4">
  36.             <li>
  37.               <a
  38.                 href="#"
  39.                 onClick={(e) => {
  40.                   e.preventDefault();
  41.                   if (currentPage > 1) handlePageChange(currentPage - 1);
  42.                 }}
  43.                 title=""
  44.               >
  45.                 <i className="icofont-arrow-left"></i>
  46.               </a>
  47.             </li>
  48.             {[...Array(Number((totalCount / 5).toString()?.split('.')[0]))].map(
  49.               (_, index) => (
  50.                 <li key={index}>
  51.                   <a
  52.                     className={currentPage === index + 1 ? 'active' : ''}
  53.                     href="#"
  54.                     onClick={(e) => {
  55.                       e.preventDefault();
  56.                       handlePageChange(index + 1);
  57.                     }}
  58.                     title=""
  59.                   >
  60.                     {index + 1}
  61.                   </a>
  62.                 </li>
  63.               )
  64.             )}
  65.             <li>
  66.               <a
  67.                 href="#"
  68.                 onClick={(e) => {
  69.                   e.preventDefault();
  70.                   if (
  71.                     currentPage <
  72.                     Number((totalCount / 5).toString()?.split('.')[0])
  73.                   )
  74.                     handlePageChange(currentPage + 1);
  75.                 }}
  76.                 title=""
  77.               >
  78.                 <i className="icofont-arrow-right"></i>
  79.               </a>
  80.             </li>
  81.           </ul>
  82.         </div>
  83.       </div>
  84.     </>
  85.   );
  86. };
  87.  
  88. export default ReviewsPage;
  89.  

Editor

You can edit this paste and save as new:


File Description
  • ReviewsPage Pagination with OG design
  • Paste Code
  • 29 Mar-2024
  • 2.79 Kb
You can Share it: