diff --git a/src/Redux/slice/resources.js b/src/Redux/slice/resources.js index 2f3ce45..9a5beff 100644 --- a/src/Redux/slice/resources.js +++ b/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}`, }), }), }); diff --git a/src/Redux/slice/videoTable.js b/src/Redux/slice/videoTable.js new file mode 100644 index 0000000..99c2025 --- /dev/null +++ b/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; \ No newline at end of file diff --git a/src/Redux/store/store.js b/src/Redux/store/store.js index e02c49c..36332d2 100644 --- a/src/Redux/store/store.js +++ b/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 }); diff --git a/src/components/NewsPage/NewsContent.jsx b/src/components/NewsPage/NewsContent.jsx index 8754dd2..d18d65e 100644 --- a/src/components/NewsPage/NewsContent.jsx +++ b/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 ( +
+ +
+ ); + } - 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 ( <> { }, }} > - {newsCard?.map((content) => ( + {currentPageItems?.map((content) => ( <> { {content.content} - {/* - - - - - */} @@ -257,11 +231,13 @@ const NewsContent = () => { ))} - + {data?.data?.totalPages > 0 && ( + + )} ); }; diff --git a/src/components/ResourcesPage/Content.jsx b/src/components/ResourcesPage/Content.jsx index 218f255..3380c4c 100644 --- a/src/components/ResourcesPage/Content.jsx +++ b/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 ( diff --git a/src/components/ResourcesPage/tabInsideContent/WhitepaperDocs.jsx b/src/components/ResourcesPage/tabInsideContent/WhitepaperDocs.jsx index 5e8502b..9461268 100644 --- a/src/components/ResourcesPage/tabInsideContent/WhitepaperDocs.jsx +++ b/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 ( { 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 ( +
+ +
+ ); + } + + if (error) { + return
Error: {error.message}
; + } + + 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
Loading...
; + } + + function goToPage(page) { + if (page >= 1 && page <= totalPages) { + setCurrentPage(page); + displayCurrentPageItems(); + } + } + + const currentPageItems = displayCurrentPageItems(); return ( @@ -83,7 +118,7 @@ const VideoTable = () => { justifyContent={"space-between"} alignItems={"center"} > - {currentPageContents.map((content) => ( + {currentPageItems.map((content) => ( <> { zIndex: "2", }} > - +