video api called in resources page

src/Redux/slice/resources.js

@@ -5,7 +5,7 @@ export const resourcesApi = createApi({
     baseQuery: fetchBaseQuery({ baseUrl: 'https://rubix.betadelivery.com/api/' }),
     endpoints: (builder) => ({
         getResources: builder.query({
-            query: () => 'admin/whitepaper',
+            query: ({ page, pageSize }) => `admin/whitepaper?page=${page}&pageSize=${pageSize}`,
         }),
     }),
 });

src/Redux/slice/videoTable.js

@@ -0,0 +1,13 @@
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
+
+export const videoTableApi = createApi({
+    reducerPath: 'resources-page',
+    baseQuery: fetchBaseQuery({ baseUrl: 'https://rubix.betadelivery.com/api/' }),
+    endpoints: (builder) => ({
+        getVideoTable: builder.query({
+            query: ({ page, pageSize }) => `admin/video?page=${page}&pageSize=${pageSize}`,
+        }),
+    }),
+});
+
+export const { useGetVideoTableQuery } = videoTableApi;

src/Redux/store/store.js

@@ -4,6 +4,7 @@ import { blogApi } from '../slice/blogsSlice';
 import { communitiesBanner } from '../slice/communityBannerSlice';
 import { newsApi } from '../slice/newsSlice';
 import { resourcesApi } from '../slice/resources';
+import { videoTableApi } from '../slice/videoTable';
 
 const store = configureStore({
     reducer: {
@@ -12,6 +13,7 @@ const store = configureStore({
         [communitiesBanner.reducerPath]: communitiesBanner.reducer,
         [newsApi.reducerPath]: newsApi.reducer,
         [resourcesApi.reducerPath]: resourcesApi.reducer,
+        [videoTableApi.reducerPath]: videoTableApi.reducer,
     },
     middleware: (getDefaultMiddleware) =>
         getDefaultMiddleware().concat(
@@ -19,7 +21,8 @@ const store = configureStore({
             blogApi.middleware,
             communitiesBanner.middleware,
             newsApi.middleware,
-            resourcesApi.middleware
+            resourcesApi.middleware,
+            videoTableApi.middleware,
         ), // Add blogApi.middleware here
 });
 

src/components/NewsPage/NewsContent.jsx

@@ -5,6 +5,7 @@ import { Link } from "react-router-dom";
 import { useState } from "react";
 import Pagination from "../Pagination/Pagination";
 import { useGetNewsQuery } from "../../Redux/slice/newsSlice";
+import Loader from "../Loader/Loader";
 
 const contents = [
   {
@@ -76,32 +77,41 @@ const contents = [
 
 const NewsContent = () => {
   const { data } = useGetNewsQuery();
+  const [currentPage, setCurrentPage] = useState(data?.data?.currentPage ?? 1);
   const newsCard = data?.data?.rows;
-  console.log(data?.data);
+  console.log(data?.data?.totalPages);
+
+  if (!newsCard) {
+    return (
+      <div>
+        <Loader />
+      </div>
+    );
+  }
 
-  let currentPage = data?.data?.currentPage;
   const totalItems = data?.data?.totalItems;
-  console.log(currentPage);
 
-  const pageSize = 10;
+  const pageSize = 5;
 
-  const totalPages = Math.ceil(totalItems / pageSize);
+  const totalPages = data?.data?.totalPages ?? 1;
 
   function displayCurrentPageItems() {
     const startIndex = (currentPage - 1) * pageSize;
     const endIndex = Math.min(startIndex + pageSize, totalItems);
 
     const currentPageItems = newsCard.slice(startIndex, endIndex);
-    // Display currentPageItems in your UI
+    return currentPageItems;
   }
 
   function goToPage(page) {
     if (page >= 1 && page <= totalPages) {
-      currentPage = page;
+      setCurrentPage(page);
       displayCurrentPageItems();
     }
   }
 
+  const currentPageItems = displayCurrentPageItems();
+
   return (
     <>
       <Container
@@ -126,12 +136,13 @@ const NewsContent = () => {
             },
           }}
         >
-          {newsCard?.map((content) => (
+          {currentPageItems?.map((content) => (
             <>
               <Link>
                 <Box
                   key={content.id}
                   width={"340px"}
+                  minHeight={"460px"}
                   background={"#15181E"}
                   borderRadius={"10px"}
                   sx={{
@@ -213,43 +224,6 @@ const NewsContent = () => {
                         {content.content}
                       </Text>
                     </Box>
-                    {/* <Box
-                    display={"flex"}
-                    alignItems={"center"}
-                    _hover={
-                      {
-                        //   flexDirection: "column-reverse",
-                      }
-                    }
-                  >
-                    <Box
-                      position={"relative"}
-                      width={"10%"}
-                      _before={{
-                        content: '""',
-                        width: "100%",
-                        position: "absolute",
-                        left: "0",
-                        borderBottom: "2px solid #DE858E",
-                        borderRadius: "5px",
-                        zIndex: "2",
-                      }}
-                    ></Box>
-                    <Link>
-                      <Button
-                        position={"relative"}
-                        backgroundColor={"transparent"}
-                        color={"#fff"}
-                        fontFamily={"Poppins"}
-                        fontWeight={"400"}
-                        _hover={{
-                          backgroundColor: "transparent",
-                        }}
-                      >
-                        View Video
-                      </Button>
-                    </Link>
-                  </Box> */}
                   </Box>
                 </Box>
               </Link>
@@ -257,11 +231,13 @@ const NewsContent = () => {
           ))}
         </Box>
       </Container>
-      <Pagination
-        currentPage={currentPage}
-        totalPages={totalPages}
-        onPageChange={goToPage}
-      />
+      {data?.data?.totalPages > 0 && (
+        <Pagination
+          currentPage={currentPage}
+          totalPages={totalPages}
+          onPageChange={goToPage}
+        />
+      )}
     </>
   );
 };

src/components/ResourcesPage/Content.jsx

@@ -5,12 +5,8 @@ import TabsVideo from "./tabInsideContent/TabsVideo";
 import WhitepaperDocs from "./tabInsideContent/WhitepaperDocs";
 import ArticlesTable from "./tableContent/ArticlesTable";
 import VideoTable from "./tableContent/VideoTable";
-import { useGetResourcesQuery } from "../../Redux/slice/resources";
 
 const Content = ({ tab }) => {
-  const { data } = useGetResourcesQuery();
-  console.log(data);
-
   switch (tab) {
     case "The Rubix whitepapers":
       return (

src/components/ResourcesPage/tabInsideContent/WhitepaperDocs.jsx

@@ -3,8 +3,14 @@ import { Box, Button, Image, Text } from "@chakra-ui/react";
 import { Link } from "react-router-dom";
 import cardimg from "../../../assets/images/CardImg.png";
 import pdf from "../../../assets/pdf/Rubix.pdf";
+import { useState } from "react";
+import { useGetResourcesQuery } from "../../../Redux/slice/resources";
 
 const WhitepaperDocs = () => {
+  // const [currentPage, setCurrentPage] = useState(1);
+  // const pageSize = 5;
+  // const { data } = useGetResourcesQuery({ page: currentPage, pageSize });
+  // console.log(data);
   return (
     <Box marginBottom={"2rem"}>
       <Box

src/components/ResourcesPage/tableContent/VideoTable.jsx

@@ -1,8 +1,11 @@
+/* eslint-disable no-unused-vars */
 import { Box, Button, Container, Image, Text } from "@chakra-ui/react";
 import cardimg from "../../../assets/images/CardImg.png";
 import { Link } from "react-router-dom";
 import { useState } from "react";
 import Pagination from "../../Pagination/Pagination";
+import Loader from "../../Loader/Loader";
+import { useGetVideoTableQuery } from "../../../Redux/slice/videoTable";
 
 const contents = [
   {
@@ -61,17 +64,49 @@ const contents = [
 
 const VideoTable = () => {
   const [currentPage, setCurrentPage] = useState(1);
-  const itemsPerPage = 9;
-  const totalPages = Math.ceil(contents.length / itemsPerPage);
+  const pageSize = 5;
 
-  const handlePageChange = (newPage) => {
-    setCurrentPage(newPage);
-    window.scrollTo({ top: 0, behavior: "smooth" });
-  };
+  const { data, isLoading, error } = useGetVideoTableQuery({
+    page: currentPage,
+    pageSize,
+  });
 
-  const startIndex = (currentPage - 1) * itemsPerPage;
-  const endIndex = Math.min(startIndex + itemsPerPage, contents.length);
-  const currentPageContents = contents.slice(startIndex, endIndex);
+  if (isLoading) {
+    return (
+      <div>
+        <Loader />
+      </div>
+    );
+  }
+
+  if (error) {
+    return <div>Error: {error.message}</div>;
+  }
+
+  const videos = data?.data?.data?.rows;
+  console.log(videos);
+  const totalItems = data?.data?.data?.totalItems;
+  const totalPages = data?.data?.data?.totalPages;
+
+  function displayCurrentPageItems() {
+    const startIndex = (currentPage - 1) * pageSize;
+    const endIndex = Math.min(startIndex + pageSize, totalItems);
+    const currentPageItems = videos.slice(startIndex, endIndex);
+    return currentPageItems;
+  }
+
+  if (!videos) {
+    return <div>Loading...</div>;
+  }
+
+  function goToPage(page) {
+    if (page >= 1 && page <= totalPages) {
+      setCurrentPage(page);
+      displayCurrentPageItems();
+    }
+  }
+
+  const currentPageItems = displayCurrentPageItems();
 
   return (
     <Container maxW="container.xl">
@@ -83,7 +118,7 @@ const VideoTable = () => {
         justifyContent={"space-between"}
         alignItems={"center"}
       >
-        {currentPageContents.map((content) => (
+        {currentPageItems.map((content) => (
           <>
             <Box
               width={"340px"}
@@ -131,7 +166,7 @@ const VideoTable = () => {
                       zIndex: "2",
                     }}
                   ></Box>
-                  <Link>
+                  <Link to="/video-page">
                     <Button
                       position={"relative"}
                       backgroundColor={"transparent"}
@@ -154,7 +189,7 @@ const VideoTable = () => {
       <Pagination
         currentPage={currentPage}
         totalPages={totalPages}
-        onPageChange={handlePageChange}
+        onPageChange={goToPage}
       />
     </Container>
   );

src/components/VideoInternal/VideoInternal.jsx

@@ -1,9 +1,25 @@
 /* eslint-disable no-unused-vars */
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { Box, Text, Image } from "@chakra-ui/react";
 import { AspectRatio } from "@chakra-ui/react";
 
 const VideoInternal = () => {
+  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setWindowWidth(window.innerWidth);
+    };
+
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
+  const isMobile = windowWidth <= 996;
+
   useEffect(() => {
     window.scrollTo(0, 0);
   }, []);
@@ -104,32 +120,61 @@ const VideoInternal = () => {
             },
           }}
         >
-          <div
-            style={{
-              position: "relative",
-              width: "100%",
-              paddingBottom: "56.25%" /* 16:9 aspect ratio */,
-              className: "iframeContainer",
-            }}
-          >
-            <iframe
-              src="https://www.youtube.com/embed/EUJBd2fP5TA?rel=0"
-              title="YouTube video player"
-              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-              allowFullScreen
+          {!isMobile ? (
+            <div
               style={{
-                position: "absolute",
-                width: "70%",
-                height: "70%",
-                marginLeft: "auto",
-                marginRight: "auto",
-                transform: "translateY(22%)",
-                left: 0,
-                right: 0,
-                border: "none",
+                position: "relative",
+                width: "100%",
+                paddingBottom: "56.25%" /* 16:9 aspect ratio */,
+                className: "iframeContainer",
               }}
-            ></iframe>
-          </div>
+            >
+              <iframe
+                src="https://www.youtube.com/embed/EUJBd2fP5TA?rel=0"
+                title="YouTube video player"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                allowFullScreen
+                style={{
+                  position: "absolute",
+                  width: "70%",
+                  height: "70%",
+                  marginLeft: "auto",
+                  marginRight: "auto",
+                  transform: "translateY(22%)",
+                  left: 0,
+                  right: 0,
+                  border: "none",
+                }}
+              ></iframe>
+            </div>
+          ) : (
+            <div
+              style={{
+                position: "relative",
+                width: "100%",
+                paddingBottom: "56.25%" /* 16:9 aspect ratio */,
+                className: "iframeContainer",
+              }}
+            >
+              <iframe
+                src="https://www.youtube.com/embed/EUJBd2fP5TA?rel=0"
+                title="YouTube video player"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                allowFullScreen
+                style={{
+                  position: "absolute",
+                  width: "95%",
+                  height: "85%",
+                  marginLeft: "auto",
+                  marginRight: "auto",
+                  transform: "translateY(10%)",
+                  left: 0,
+                  right: 0,
+                  border: "none",
+                }}
+              ></iframe>
+            </div>
+          )}
         </Box>
       </Box>
     </>