From a7d0b1a67d0ba8100ec573caf26b92ec642e0350 Mon Sep 17 00:00:00 2001
From: bally <bally.lomibao@howickltd.com>
Date: Wed, 24 Apr 2024 01:30:00 +1200
Subject: [PATCH] TCCPISSUE: Pagination implementation on bootcamp list #149:
 Add pagination to Bootcamp component

---
 src/page/bootcamp/bootcamp.tsx | 31 ++++++++++++++++++++++++++++---
 1 file changed, 28 insertions(+), 3 deletions(-)

diff --git a/src/page/bootcamp/bootcamp.tsx b/src/page/bootcamp/bootcamp.tsx
index 37725ed..18168e0 100644
--- a/src/page/bootcamp/bootcamp.tsx
+++ b/src/page/bootcamp/bootcamp.tsx
@@ -1,6 +1,6 @@
-import { useEffect } from 'react'
+import { useState } from 'react'
 import { m } from 'framer-motion'
-import { Box, Grid } from '@mui/material'
+import { Pagination, Box, Grid } from '@mui/material'
 import { SCard } from 'theme/style'
 import { useGetAllBootcampQuery } from 'store/slice/bootcamp'
 import { BootcampSearch, BootcampCard } from 'section/bootcamp'
@@ -11,8 +11,13 @@ import { ASSET } from 'config'
 import { LABEL, PLACEHOLDER } from 'constant'
 
 function Bootcamp() {
+  const [currentPage, setCurrentPage] = useState(1)
   const { data, error, isLoading } = useGetAllBootcampQuery()
 
+  const handlePageChange = (event: any, value: any) => {
+    setCurrentPage(value)
+  }
+
   return (
     <MotionLazyContainer>
       <Box
@@ -42,6 +47,15 @@ function Bootcamp() {
           </Grid>
 
           <Grid item sm={9}>
+            <Pagination
+              count={Math.ceil(data?.data?.length ?? 0 / 6)}
+              page={currentPage}
+              onChange={handlePageChange}
+              variant='outlined'
+              shape='rounded'
+              color='primary'
+              sx={{ display: 'flex', justifyContent: 'flex-end', mb: 2 }}
+            />
             <SCard
               sx={{
                 width: '100%',
@@ -52,10 +66,21 @@ function Bootcamp() {
                 {isLoading ? (
                   <SkeletonLoader cards={8} />
                 ) : (
-                  data?.data?.map((bootcamp: any, index: number) => <BootcampCard key={index} bootcamp={bootcamp} />)
+                  data?.data
+                    ?.slice((currentPage - 1) * 6, currentPage * 6)
+                    .map((bootcamp: any, index: number) => <BootcampCard key={index} bootcamp={bootcamp} />)
                 )}
               </Grid>
             </SCard>
+            <Pagination
+              count={Math.ceil(data?.data?.length ?? 0 / 6)}
+              page={currentPage}
+              onChange={handlePageChange}
+              variant='outlined'
+              shape='rounded'
+              color='primary'
+              sx={{ display: 'flex', justifyContent: 'flex-end', mt: 2 }}
+            />
           </Grid>
         </Grid>
       </Box>