From 16cb71ebcf4c7da9479f2015401a9cefd0454da7 Mon Sep 17 00:00:00 2001
From: ani-kalpachka <ani_kalpacka888@gmail.com>
Date: Mon, 12 Aug 2024 07:49:16 +0300
Subject: [PATCH 1/2] Add pagination on campaigns page

---
 .../client/campaigns/CampaignsList.tsx        | 185 +++++++++++++-----
 1 file changed, 136 insertions(+), 49 deletions(-)

diff --git a/src/components/client/campaigns/CampaignsList.tsx b/src/components/client/campaigns/CampaignsList.tsx
index a15e56593..221f916f9 100644
--- a/src/components/client/campaigns/CampaignsList.tsx
+++ b/src/components/client/campaigns/CampaignsList.tsx
@@ -1,78 +1,165 @@
-import { useMemo, useState } from 'react'
+import { useMemo, useState, useEffect } from 'react'
 import { CampaignResponse } from 'gql/campaigns'
 import Image from 'next/image'
-import { useTranslation } from 'next-i18next'
-
-import { Box, Button, Grid } from '@mui/material'
-
+import { Box, Button, Grid, IconButton, Typography } from '@mui/material'
+import KeyboardArrowLeftIcon from '@mui/icons-material/KeyboardArrowLeft'
+import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight'
 import useMobile from 'common/hooks/useMobile'
 import theme from 'common/theme'
 import CampaignCard from './CampaignCard/CampaignCard'
 
-type Props = { campaignToShow: CampaignResponse[] }
+type Props = { 
+  campaignToShow: CampaignResponse[] 
+}
 
 export default function CampaignsList({ campaignToShow }: Props) {
-  const { t } = useTranslation()
   const { mobile } = useMobile()
-  const numberOfMinimalShownCampaigns = 12
-  const [all, setAll] = useState<boolean>(false)
+  const campaignsPerPage = 20
+  const [currentPage, setCurrentPage] = useState(1)
+  const totalCampaigns = campaignToShow?.length || 0
+  const totalPages = Math.ceil(totalCampaigns / campaignsPerPage)
+
+  useEffect(() => {
+    setCurrentPage(1)
+  }, [campaignToShow])
+
   const campaigns = useMemo<CampaignResponse[]>(() => {
-    if (all) {
-      return campaignToShow ?? []
+    const startIndex = (currentPage - 1) * campaignsPerPage
+    const endIndex = startIndex + campaignsPerPage
+    return campaignToShow?.slice(startIndex, endIndex) ?? []
+  }, [campaignToShow, currentPage])
+
+  const handleNextPage = () => {
+    if (currentPage < totalPages) {
+      setCurrentPage(prev => prev + 1)
+    }
+  }
+
+  const handlePreviousPage = () => {
+    if (currentPage > 1) {
+      setCurrentPage(prev => prev - 1)
     }
-    return campaignToShow?.slice(0, numberOfMinimalShownCampaigns) ?? []
-  }, [campaignToShow, all])
+  }
+
+  const handlePageClick = (pageNumber: number) => {
+    setCurrentPage(pageNumber)
+  }
+
+  const renderPageButtons = () => {
+    const renderPageButton = (pageNumber: number) => (
+      <Button
+        key={pageNumber}
+        onClick={() => handlePageClick(pageNumber)}
+        disabled={pageNumber === currentPage}
+        sx={{
+          fontFamily: "'Lato', sans-serif",
+          fontSize: theme.typography.pxToRem(16),
+          letterSpacing: '0.4px',
+          textDecoration: 'none',
+          minWidth: theme.spacing(5),
+          height: theme.spacing(5),
+          fontWeight: 500,
+          margin: theme.spacing(0, 0.5),
+          backgroundColor: pageNumber === currentPage ? '#b7ddf8' : 'transparent',
+          color: pageNumber === currentPage ? '#41a6ee' : '#212121',
+          '&.Mui-disabled': {
+            color: '#41a6ee',
+            backgroundColor: '#b7ddf8',
+          },
+          '&:hover': {
+            backgroundColor: pageNumber === currentPage ? '#b7ddf8' : theme.palette.secondary.light,
+            color: '#41a6ee',
+          },
+        }}
+      >
+        {pageNumber}
+      </Button>
+    )
+
+    const pageButtons = []
+    const startPage = Math.max(1, currentPage - 2)
+    const endPage = Math.min(totalPages, startPage + 2)
+    const showEllipsis = endPage < totalPages
+
+    if (startPage > 1) {
+      pageButtons.push(renderPageButton(1))
+    }
+
+    for (let i = startPage; i <= endPage; i++) {
+      pageButtons.push(renderPageButton(i))
+    }
+
+    if (showEllipsis) {
+      pageButtons.push(
+        <Typography
+          sx={{
+            fontFamily: "'Lato', sans-serif",
+            fontSize: theme.typography.pxToRem(16),
+            letterSpacing: '0.4px',
+            minWidth: theme.spacing(5),
+            height: theme.spacing(5),
+            fontWeight: 500,
+            margin: theme.spacing(0, 0.5),
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            color: '#212121',
+          }}
+        >
+          ...
+        </Typography>
+      )
+    }
+
+    if (showEllipsis || endPage < totalPages) {
+      pageButtons.push(renderPageButton(totalPages))
+    }
+
+    return pageButtons
+  }
 
   return (
-    <Grid
-      container
-      justifyContent="center"
-      spacing={4}
-      sx={(theme) => ({
-        width: `calc(100% + ${theme.spacing(1.5)})`,
-        marginLeft: `-${theme.spacing(2.75)}`,
-      })}>
+    <Grid container justifyContent="center" spacing={4}>
       {campaigns?.map((campaign, index) => (
         <Grid key={campaign.id} item xs={12} sm={6} lg={3}>
-          <Box
-            sx={{
-              textAlign: 'center',
-            }}>
+          <Box sx={{ textAlign: 'center' }}>
             <CampaignCard index={index} campaign={campaign} />
           </Box>
         </Grid>
       ))}
-      {campaignToShow && campaignToShow?.length > numberOfMinimalShownCampaigns && (
-        <Grid container justifyContent="center">
-          <Button
-            onClick={() => setAll((prev) => !prev)}
+
+      {totalCampaigns > campaignsPerPage && (
+        <Grid container justifyContent="center" sx={{ mt: 4 }} alignItems="center">
+          <IconButton
+            onClick={handlePreviousPage}
+            disabled={currentPage === 1}
+            sx={{
+              color: theme.palette.common.black,
+              marginRight: theme.spacing(2),
+            }}
+          >
+            <KeyboardArrowLeftIcon />
+          </IconButton>
+
+          {renderPageButtons()}
+
+          <IconButton
+            onClick={handleNextPage}
+            disabled={currentPage === totalPages}
             sx={{
-              fontFamily: "'Lato', sans-serif",
-              fontSize: theme.typography.pxToRem(16),
-              fontWeight: 600,
               color: theme.palette.common.black,
-              letterSpacing: '0.4px',
-              textDecoration: 'underline',
-              marginTop: 0,
-
-              '&:hover': {
-                backgroundColor: 'transparent',
-                textDecoration: 'underline',
-              },
-            }}>
-            {all ? t('campaigns:cta.see-less') : t('campaigns:cta.see-all')}
-          </Button>
+              marginLeft: theme.spacing(2),
+            }}
+          >
+            <KeyboardArrowRightIcon />
+          </IconButton>
         </Grid>
       )}
+
       <Grid item xs={12} textAlign="center">
         <Box sx={{ my: 10 }}>
           {mobile ? (
-            <Image
-              alt="Information artboard mobile"
-              src="/img/ArtboardMobile.svg"
-              width={300}
-              height={300}
-            />
+            <Image alt="Information artboard mobile" src="/img/ArtboardMobile.svg" width={300} height={300} />
           ) : (
             <Image alt="Information artboard" src="/img/Artboard.png" width={813} height={358} />
           )}

From d7513850531e7abe05baf3d9dd4a1a2defc3dfe9 Mon Sep 17 00:00:00 2001
From: ani-kalpachka <ani_kalpacka888@gmail.com>
Date: Mon, 12 Aug 2024 19:31:09 +0300
Subject: [PATCH 2/2] update pagination using mui

---
 .../client/campaigns/CampaignsList.tsx        | 147 ++++--------------
 1 file changed, 28 insertions(+), 119 deletions(-)

diff --git a/src/components/client/campaigns/CampaignsList.tsx b/src/components/client/campaigns/CampaignsList.tsx
index 221f916f9..3faff8c83 100644
--- a/src/components/client/campaigns/CampaignsList.tsx
+++ b/src/components/client/campaigns/CampaignsList.tsx
@@ -1,21 +1,25 @@
 import { useMemo, useState, useEffect } from 'react'
+
 import { CampaignResponse } from 'gql/campaigns'
+
 import Image from 'next/image'
-import { Box, Button, Grid, IconButton, Typography } from '@mui/material'
-import KeyboardArrowLeftIcon from '@mui/icons-material/KeyboardArrowLeft'
-import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight'
+
+import { Box, Grid, Pagination } from '@mui/material'
+
 import useMobile from 'common/hooks/useMobile'
-import theme from 'common/theme'
 import CampaignCard from './CampaignCard/CampaignCard'
 
-type Props = { 
-  campaignToShow: CampaignResponse[] 
+type Props = {
+  campaignToShow: CampaignResponse[]
 }
 
 export default function CampaignsList({ campaignToShow }: Props) {
   const { mobile } = useMobile()
-  const campaignsPerPage = 20
+
   const [currentPage, setCurrentPage] = useState(1)
+
+  const campaignsPerPage = 20
+
   const totalCampaigns = campaignToShow?.length || 0
   const totalPages = Math.ceil(totalCampaigns / campaignsPerPage)
 
@@ -29,93 +33,8 @@ export default function CampaignsList({ campaignToShow }: Props) {
     return campaignToShow?.slice(startIndex, endIndex) ?? []
   }, [campaignToShow, currentPage])
 
-  const handleNextPage = () => {
-    if (currentPage < totalPages) {
-      setCurrentPage(prev => prev + 1)
-    }
-  }
-
-  const handlePreviousPage = () => {
-    if (currentPage > 1) {
-      setCurrentPage(prev => prev - 1)
-    }
-  }
-
-  const handlePageClick = (pageNumber: number) => {
-    setCurrentPage(pageNumber)
-  }
-
-  const renderPageButtons = () => {
-    const renderPageButton = (pageNumber: number) => (
-      <Button
-        key={pageNumber}
-        onClick={() => handlePageClick(pageNumber)}
-        disabled={pageNumber === currentPage}
-        sx={{
-          fontFamily: "'Lato', sans-serif",
-          fontSize: theme.typography.pxToRem(16),
-          letterSpacing: '0.4px',
-          textDecoration: 'none',
-          minWidth: theme.spacing(5),
-          height: theme.spacing(5),
-          fontWeight: 500,
-          margin: theme.spacing(0, 0.5),
-          backgroundColor: pageNumber === currentPage ? '#b7ddf8' : 'transparent',
-          color: pageNumber === currentPage ? '#41a6ee' : '#212121',
-          '&.Mui-disabled': {
-            color: '#41a6ee',
-            backgroundColor: '#b7ddf8',
-          },
-          '&:hover': {
-            backgroundColor: pageNumber === currentPage ? '#b7ddf8' : theme.palette.secondary.light,
-            color: '#41a6ee',
-          },
-        }}
-      >
-        {pageNumber}
-      </Button>
-    )
-
-    const pageButtons = []
-    const startPage = Math.max(1, currentPage - 2)
-    const endPage = Math.min(totalPages, startPage + 2)
-    const showEllipsis = endPage < totalPages
-
-    if (startPage > 1) {
-      pageButtons.push(renderPageButton(1))
-    }
-
-    for (let i = startPage; i <= endPage; i++) {
-      pageButtons.push(renderPageButton(i))
-    }
-
-    if (showEllipsis) {
-      pageButtons.push(
-        <Typography
-          sx={{
-            fontFamily: "'Lato', sans-serif",
-            fontSize: theme.typography.pxToRem(16),
-            letterSpacing: '0.4px',
-            minWidth: theme.spacing(5),
-            height: theme.spacing(5),
-            fontWeight: 500,
-            margin: theme.spacing(0, 0.5),
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            color: '#212121',
-          }}
-        >
-          ...
-        </Typography>
-      )
-    }
-
-    if (showEllipsis || endPage < totalPages) {
-      pageButtons.push(renderPageButton(totalPages))
-    }
-
-    return pageButtons
+  const handlePageChange = (event: React.ChangeEvent<unknown>, page: number) => {
+    setCurrentPage(page)
   }
 
   return (
@@ -129,37 +48,27 @@ export default function CampaignsList({ campaignToShow }: Props) {
       ))}
 
       {totalCampaigns > campaignsPerPage && (
-        <Grid container justifyContent="center" sx={{ mt: 4 }} alignItems="center">
-          <IconButton
-            onClick={handlePreviousPage}
-            disabled={currentPage === 1}
-            sx={{
-              color: theme.palette.common.black,
-              marginRight: theme.spacing(2),
-            }}
-          >
-            <KeyboardArrowLeftIcon />
-          </IconButton>
-
-          {renderPageButtons()}
-
-          <IconButton
-            onClick={handleNextPage}
-            disabled={currentPage === totalPages}
-            sx={{
-              color: theme.palette.common.black,
-              marginLeft: theme.spacing(2),
-            }}
-          >
-            <KeyboardArrowRightIcon />
-          </IconButton>
+        <Grid container justifyContent="center" sx={{ mt: 5 }} alignItems="center">
+          <Pagination
+            count={totalPages}
+            page={currentPage}
+            onChange={handlePageChange}
+            siblingCount={1}
+            boundaryCount={1}
+            size="large"
+          />
         </Grid>
       )}
 
       <Grid item xs={12} textAlign="center">
         <Box sx={{ my: 10 }}>
           {mobile ? (
-            <Image alt="Information artboard mobile" src="/img/ArtboardMobile.svg" width={300} height={300} />
+            <Image
+              alt="Information artboard mobile"
+              src="/img/ArtboardMobile.svg"
+              width={300}
+              height={300}
+            />
           ) : (
             <Image alt="Information artboard" src="/img/Artboard.png" width={813} height={358} />
           )}