resources api integration

src/Redux/slice/resources.js

@@ -0,0 +1,13 @@
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
+
+export const resourcesApi = createApi({
+    reducerPath: 'resources-page',
+    baseQuery: fetchBaseQuery({ baseUrl: 'https://rubix.betadelivery.com/api/' }),
+    endpoints: (builder) => ({
+        getResources: builder.query({
+            query: () => 'admin/whitepaper',
+        }),
+    }),
+});
+
+export const { useGetResourcesQuery } = resourcesApi;

src/Redux/store/store.js

@@ -3,6 +3,7 @@ import { api } from '../slice/communitySlice';
 import { blogApi } from '../slice/blogsSlice';
 import { communitiesBanner } from '../slice/communityBannerSlice';
 import { newsApi } from '../slice/newsSlice';
+import { resourcesApi } from '../slice/resources';
 
 const store = configureStore({
     reducer: {
@@ -10,13 +11,15 @@ const store = configureStore({
         [blogApi.reducerPath]: blogApi.reducer,
         [communitiesBanner.reducerPath]: communitiesBanner.reducer,
         [newsApi.reducerPath]: newsApi.reducer,
+        [resourcesApi.reducerPath]: resourcesApi.reducer,
     },
     middleware: (getDefaultMiddleware) =>
         getDefaultMiddleware().concat(
             api.middleware,
             blogApi.middleware,
             communitiesBanner.middleware,
-            newsApi.middleware
+            newsApi.middleware,
+            resourcesApi.middleware
         ), // Add blogApi.middleware here
 });
 

src/components/Contact/Form.jsx

@@ -416,7 +416,7 @@ const Contact = () => {
                         placeholder
                         type="tel"
                         enableSearch={true}
-                        // country={"in"}
+                        country={"in"}
                         inputStyle={{
                           display: "block",
                           marginBottom: "5px !important",

src/components/NewsPage/NewsContent.jsx

@@ -77,20 +77,31 @@ const contents = [
 const NewsContent = () => {
   const { data } = useGetNewsQuery();
   const newsCard = data?.data?.rows;
-  console.log(newsCard);
+  console.log(data?.data);
 
-  // const [currentPage, setCurrentPage] = useState(1);
-  // const itemsPerPage = 9;
-  // const totalPages = Math.ceil(newsCard.length / itemsPerPage);
+  let currentPage = data?.data?.currentPage;
+  const totalItems = data?.data?.totalItems;
+  console.log(currentPage);
 
-  // const handlePageChange = (newPage) => {
-  //   setCurrentPage(newPage);
-  //   window.scrollTo({ top: 0, behavior: "smooth" });
-  // };
+  const pageSize = 10;
+
+  const totalPages = Math.ceil(totalItems / pageSize);
+
+  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
+  }
+
+  function goToPage(page) {
+    if (page >= 1 && page <= totalPages) {
+      currentPage = page;
+      displayCurrentPageItems();
+    }
+  }
 
-  // const startIndex = (currentPage - 1) * itemsPerPage;
-  // const endIndex = Math.min(startIndex + itemsPerPage, contents.length);
-  // const currentPageContents = contents.slice(startIndex, endIndex);
   return (
     <>
       <Container
@@ -106,8 +117,8 @@ const NewsContent = () => {
           margin={"4rem 0"}
           display={"flex"}
           flexWrap={"wrap"}
-          rowGap={"3rem"}
-          justifyContent={"space-between"}
+          gap={"3rem"}
+          // justifyContent={"space-between"}
           alignItems={"center"}
           sx={{
             "@media (max-width: 1024px)": {
@@ -117,54 +128,92 @@ const NewsContent = () => {
         >
           {newsCard?.map((content) => (
             <>
-              <Box
-                width={"340px"}
-                background={"#15181E"}
-                borderRadius={"10px"}
-                sx={{
-                  "@media (max-width: 600px)": {
-                    width: "100%",
-                    minHeight: "0",
-                  },
-                }}
-              >
-                <Image
-                  src={`https://rubix.betadelivery.com/${content.banner_image}`}
-                  height={"240px"}
-                  width={"100%"}
-                  objectFit={"cover"}
-                  borderTopLeftRadius={"10px"}
-                  borderTopRightRadius={"10px"}
+              <Link>
+                <Box
+                  key={content.id}
+                  width={"340px"}
+                  background={"#15181E"}
+                  borderRadius={"10px"}
                   sx={{
                     "@media (max-width: 600px)": {
                       width: "100%",
                       minHeight: "0",
                     },
                   }}
-                />
-                <Box padding={"1rem"}>
-                  <Text
-                    color={"#fff"}
-                    fontSize={"17px"}
-                    marginBottom={"20px"}
-                    minHeight={"40px"}
-                    maxWidth={"420px"}
-                  >
-                    {content.title}
-                  </Text>
+                >
+                  <Image
+                    src={`https://rubix.betadelivery.com/${content.banner_image}`}
+                    height={"240px"}
+                    width={"100%"}
+                    objectFit={"cover"}
+                    borderTopLeftRadius={"10px"}
+                    borderTopRightRadius={"10px"}
+                    sx={{
+                      "@media (max-width: 600px)": {
+                        width: "100%",
+                        minHeight: "0",
+                      },
+                    }}
+                  />
+
+                  <Box padding={"1rem"}>
+                    {(function () {
+                      const createdAtDate = new Date(content.release_date);
+                      const formattedDate = createdAtDate
+                        .toLocaleDateString("en-GB", {
+                          day: "2-digit",
+                          month: "2-digit",
+                          year: "2-digit",
+                        })
+                        .replace(/\//g, "-"); // Replace '/' with '-'
+                      return (
+                        <Text
+                          textAlign={"left"}
+                          className="rubix-text-xsmall rubix-fw-500"
+                          fontFamily={"Poppins !important"}
+                          color={"#A4A4A4 !important"}
+                          marginBottom={"15px"}
+                          sx={{
+                            "@media (max-width: 600px)": {
+                              fontSize: "35px",
+                            },
+                          }}
+                        >
+                          <Text
+                            as={"span"}
+                            fontFamily={"Poppins"}
+                            color={"#A4A4A4"}
+                          >
+                            {" "}
+                            Released On,
+                          </Text>{" "}
+                          {formattedDate}
+                        </Text>
+                      );
+                    })()}
 
-                  <Box>
                     <Text
                       color={"#fff"}
-                      fontSize={"15px"}
+                      fontSize={"17px"}
                       marginBottom={"20px"}
                       minHeight={"40px"}
                       maxWidth={"420px"}
                     >
-                      {content.content}
+                      {content.title}
                     </Text>
-                  </Box>
-                  {/* <Box
+
+                    <Box>
+                      <Text
+                        color={"#fff"}
+                        fontSize={"15px"}
+                        marginBottom={"20px"}
+                        minHeight={"40px"}
+                        maxWidth={"420px"}
+                      >
+                        {content.content}
+                      </Text>
+                    </Box>
+                    {/* <Box
                     display={"flex"}
                     alignItems={"center"}
                     _hover={
@@ -201,17 +250,18 @@ const NewsContent = () => {
                       </Button>
                     </Link>
                   </Box> */}
+                  </Box>
                 </Box>
-              </Box>
+              </Link>
             </>
           ))}
         </Box>
       </Container>
-      {/* <Pagination
+      <Pagination
         currentPage={currentPage}
         totalPages={totalPages}
-        onPageChange={handlePageChange}
-      /> */}
+        onPageChange={goToPage}
+      />
     </>
   );
 };

src/components/NewsPage/NewsHeader.jsx

@@ -1,6 +1,11 @@
 import { Badge, Box, Container, Text } from "@chakra-ui/react";
+import { useGetNewsQuery } from "../../Redux/slice/newsSlice";
 
 const NewsHeader = () => {
+  const { data } = useGetNewsQuery();
+  const newsCard = data?.data?.rows;
+  console.log(newsCard);
+
   return (
     <Box
       height={"80vh"}

src/components/ResourcesPage/Content.jsx

@@ -5,8 +5,12 @@ 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/tableContent/VideoTable.jsx

@@ -104,7 +104,7 @@ const VideoTable = () => {
                   color={"#fff"}
                   fontSize={"25px"}
                   marginBottom={"20px"}
-                  minHeight={"40px"}
+                  minHeight={"70px"}
                   maxWidth={"420px"}
                 >
                   {content.title}