Fixed white paper docs api/ Error in videos apicall

src/Redux/slice/whitePaperSlice.js

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

src/Redux/store/store.js

@@ -6,6 +6,7 @@ import { newsApi } from '../slice/newsSlice';
 import { resourcesApi } from '../slice/resources';
 import { videoTableApi } from '../slice/videoTable';
 import { newsLetterApi } from '../slice/newsLetter';
+import { whitePaper } from '../slice/whitePaperSlice';
 
 const store = configureStore({
     reducer: {
@@ -16,6 +17,7 @@ const store = configureStore({
         [resourcesApi.reducerPath]: resourcesApi.reducer,
         [videoTableApi.reducerPath]: videoTableApi.reducer,
         [newsLetterApi.reducerPath]: newsLetterApi.reducer,
+        [whitePaper.reducerPath]: whitePaper.reducer,
     },
     middleware: (getDefaultMiddleware) =>
         getDefaultMiddleware().concat(
@@ -26,6 +28,7 @@ const store = configureStore({
             resourcesApi.middleware,
             videoTableApi.middleware,
             newsLetterApi.middleware,
+            whitePaper.middleware,
         ), // Add blogApi.middleware here
 });
 

src/components/NewsPage/NewsContent.jsx

@@ -112,24 +112,12 @@ const NewsContent = () => {
     );
   }
 
-  function displayCurrentPageItems() {
-    const startIndex = (currentPage - 1) * pageSize;
-    const endIndex = Math.min(startIndex + pageSize, totalItems);
-
-    const currentPageItems = newsCard.slice(startIndex, endIndex);
-    return currentPageItems;
-  }
-
   function goToPage(page) {
     if (page >= 1 && page <= totalPages) {
       setCurrentPage(page);
-      displayCurrentPageItems();
     }
   }
 
-  const currentPageItems = displayCurrentPageItems();
-  console.log(currentPageItems);
-
   return (
     <>
       <Container

src/components/ResourcesPage/tabInsideContent/WhitepaperDocs.jsx

@@ -4,78 +4,125 @@ 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";
+import { useGetWhitePaperQuery } from "../../../Redux/slice/whitePaperSlice";
+import Loader from "../../Loader/Loader";
 
 const WhitepaperDocs = () => {
-  // const [currentPage, setCurrentPage] = useState(1);
-  // const pageSize = 5;
-  // const { data } = useGetResourcesQuery({ page: currentPage, pageSize });
-  // console.log(data);
+  const [currentPage, setCurrentPage] = useState(1);
+  const pageSize = 5;
+
+  const { data, isLoading, error } = useGetWhitePaperQuery({
+    page: currentPage,
+    pageSize,
+  });
+
+  if (isLoading) {
+    return (
+      <div>
+        <Loader />
+      </div>
+    );
+  }
+
+  if (error) {
+    return <div>Error: {error.message}</div>;
+  }
+
+  const docs = data?.data?.data?.rows;
+  const totalPages = data?.data?.totalPages;
+  // console.log(docs);
+
+  function goToPage(page) {
+    if (page >= 1 && page <= totalPages) {
+      setCurrentPage(page);
+    }
+  }
+
   return (
-    <Box marginBottom={"2rem"}>
-      <Box
-        width={"420px"}
-        background={"#404040"}
-        borderRadius={"10px"}
-        minHeight={"340px"}
-        padding={"15px"}
-        sx={{
-          "@media (max-width: 600px)": {
-            width: "100%",
-            minHeight: "0",
-          },
-        }}
-      >
-        <Image src={cardimg} />
-        <Box padding={"1rem"}>
-          <Text
-            color={"#fff"}
-            fontSize={"25px"}
-            marginBottom={"20px"}
-            minHeight={"40px"}
-            maxWidth={"420px"}
-          >
-            The Proofchain Technical Whitepaper
-          </Text>
+    <Box
+      display={"flex"}
+      flexWrap={"wrap"}
+      justifyContent={"space-between"}
+      width={"100%"}
+      sx={{
+        "@media (max-width: 1024px)": {
+          justifyContent: "space-around",
+        },
+      }}
+    >
+      {docs?.map((item) => (
+        <Box marginBottom={"2rem"} key={item.id}>
           <Box
-            display={"flex"}
-            alignItems={"center"}
-            _hover={
-              {
-                //   flexDirection: "column-reverse",
-              }
-            }
-          >
-            <Box
-              position={"relative"}
-              width={"10%"}
-              _before={{
-                content: '""',
+            width={"360px"}
+            background={"#404040"}
+            borderRadius={"10px"}
+            minHeight={"362px"}
+            padding={"15px"}
+            sx={{
+              "@media (max-width: 600px)": {
                 width: "100%",
-                position: "absolute",
-                left: "0",
-                borderBottom: "2px solid #DE858E",
-                borderRadius: "5px",
-                zIndex: "2",
-              }}
-            ></Box>
-            <a download="RubiX_WhitePaper.pdf" href={pdf}>
-              <Button
-                position={"relative"}
-                backgroundColor={"transparent"}
+                minHeight: "0",
+              },
+            }}
+          >
+            <Image
+              src={`https://rubix.betadelivery.com/${item.bannerImage}`}
+              maxHeight={"160px"}
+              width={"100%"}
+              objectFit={"cover"}
+              objectPosition={"center"}
+            />
+            <Box padding={"1rem"}>
+              <Text
                 color={"#fff"}
-                fontFamily={"Poppins"}
-                fontWeight={"400"}
-                _hover={{
-                  backgroundColor: "transparent",
-                }}
+                fontSize={"25px"}
+                marginBottom={"20px"}
+                minHeight={"40px"}
+                maxWidth={"420px"}
               >
-                View Document
-              </Button>
-            </a>
+                {item.title}
+              </Text>
+              <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>
+                <a download="RubiX_WhitePaper.pdf" href={pdf}>
+                  <Button
+                    position={"relative"}
+                    backgroundColor={"transparent"}
+                    color={"#fff"}
+                    fontFamily={"Poppins"}
+                    fontWeight={"400"}
+                    _hover={{
+                      backgroundColor: "transparent",
+                    }}
+                  >
+                    View Document
+                  </Button>
+                </a>
+              </Box>
+            </Box>
           </Box>
         </Box>
-      </Box>
+      ))}
     </Box>
   );
 };

src/components/ResourcesPage/tableContent/VideoTable.jsx

@@ -83,31 +83,17 @@ const VideoTable = () => {
     return <div>Error: {error.message}</div>;
   }
 
-  const videos = data?.data?.data?.rows;
-  console.log(videos);
+  const videos = data;
+  console.log(data);
   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">
       <Box
@@ -118,7 +104,7 @@ const VideoTable = () => {
         justifyContent={"space-between"}
         alignItems={"center"}
       >
-        {currentPageItems.map((content) => (
+        {videos.map((content) => (
           <>
             <Box
               width={"340px"}