feat(mainvideos.js): added pagination

src/components/marketing/LearningHub/MainVideos.js

@@ -1,29 +1,71 @@
 /**
  * MUI Imports
  */
-import { Box, Grid, Typography } from '@mui/material';
+import {
+  Box,
+  Grid,
+  Pagination,
+  Stack,
+  ThemeProvider,
+  Typography,
+} from '@mui/material';
 import { useTheme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
 /**
  * Components Imports
  */
-
+import VideoCard from './FeaturedCard';
+import { LearningHubVideosContext } from './context/LearningHubVideosContext';
 /**
  * React Imports
  */
-import { useContext, memo } from 'react';
-import { LearningHubVideosContext } from './context/LearningHubVideosContext';
-import VideoCard from './FeaturedCard';
+import { useContext, memo, useState, useEffect } from 'react';
+import revampTheme from 'theme/revampTheme';
 
-const MainVideos = () => {
+const MainVideos = ({ withPagination = false }) => {
   const { entities, searchKey } = useContext(LearningHubVideosContext);
 
   const theme = useTheme();
   const isExtraSmall = useMediaQuery(theme.breakpoints.between('xs', 600));
+  const scrollTo = (id) => {
+    setTimeout(() => {
+      const element = document.querySelector(`#${id}`);
+      if (!element) {
+        return;
+      }
+
+      window.scrollTo({
+        left: 0,
+        top: element.offsetTop,
+        behavior: 'smooth',
+      });
+    });
+  };
+
+  // Pagination
+  const [currentPage, setCurrentPage] = useState(1);
+  const [postPerPage] = useState(9);
+  const indexOfLast = currentPage * postPerPage;
+  const indexOfFirst = indexOfLast - postPerPage;
+  const pageNum = [];
+  const videoList = !withPagination
+    ? entities
+    : entities.slice(indexOfFirst, indexOfLast);
+  for (let i = 1; i <= Math.ceil(entities.length / postPerPage); i++) {
+    pageNum.push(i);
+  }
+  const handlePageChange = (_event, value) => {
+    setCurrentPage(value);
+  };
+
+  useEffect(() => {
+    if (videoList?.length <= postPerPage) setCurrentPage(1);
+  }, [entities]);
 
   return (
     <>
       <Box
+        id="scrollTop"
         sx={{
           pt: 10,
           px: 4,
@@ -51,7 +93,7 @@ const MainVideos = () => {
             {searchKey !== '' ? 'Results' : 'All Videos'}
           </Typography>
           <Grid container spacing={2}>
-            {entities?.map((item, idx) => {
+            {videoList?.map((item, idx) => {
               return (
                 <Grid key={idx} item xs={12} md={6} lg={4}>
                   <Box sx={{ textDecoration: 'none' }}>
@@ -63,6 +105,32 @@ const MainVideos = () => {
           </Grid>
         </Box>
       </Box>
+
+      {withPagination && videoList?.length ? (
+        <Stack
+          sx={(theme) => ({
+            [theme.breakpoints.up('xs')]: {
+              py: 3,
+              mx: 'auto',
+              maxWidth: theme.maxWidth,
+              alignItems: 'center',
+            },
+          })}
+        >
+          <ThemeProvider theme={() => revampTheme(theme.palette.mode)}>
+            <Pagination
+              onClick={() => scrollTo('scrollTop')}
+              count={pageNum?.length}
+              page={currentPage}
+              onChange={handlePageChange}
+              size={'large'}
+              color="primary"
+            />
+          </ThemeProvider>
+        </Stack>
+      ) : (
+        ''
+      )}
     </>
   );
 };

src/views/zesty/LearningHub.js

@@ -56,7 +56,7 @@ function LearningHub({ content }) {
       <LearningHubVideosProvider inititalEntities={videos?.data}>
         <Hero {...heroProps} />
         <FeaturedVideos featuredVideos={content?.featured_videos?.data} />
-        <MainVideos />
+        <MainVideos withPagination={true} />
       </LearningHubVideosProvider>
     </>
   );