Working on News content pagination error

src/Redux/slice/newsSlice.js

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

src/components/NewsPage/NewsContent.jsx

@@ -76,9 +76,32 @@ const contents = [
 ];
 
 const NewsContent = () => {
-  const { data } = useGetNewsQuery();
-  const [currentPage, setCurrentPage] = useState(data?.data?.currentPage ?? 1);
+  const [currentPage, setCurrentPage] = useState(1);
+  const pageSize = 5;
+
+  const { data, isLoading, error } = useGetNewsQuery({
+    page: currentPage,
+    pageSize,
+  });
+
+  console.log(data?.data);
+
+  if (isLoading) {
+    return (
+      <div>
+        <Loader />
+      </div>
+    );
+  }
+
+  if (error) {
+    return <div>Error: {error.message}</div>;
+  }
+
+  const totalItems = data?.data?.totalItems;
+  const totalPages = data?.data?.totalPages;
   const newsCard = data?.data?.rows;
+
   console.log(data?.data?.totalPages);
 
   if (!newsCard) {
@@ -89,12 +112,6 @@ const NewsContent = () => {
     );
   }
 
-  const totalItems = data?.data?.totalItems;
-
-  const pageSize = 5;
-
-  const totalPages = data?.data?.totalPages ?? 1;
-
   function displayCurrentPageItems() {
     const startIndex = (currentPage - 1) * pageSize;
     const endIndex = Math.min(startIndex + pageSize, totalItems);
@@ -111,6 +128,7 @@ const NewsContent = () => {
   }
 
   const currentPageItems = displayCurrentPageItems();
+  console.log(currentPageItems);
 
   return (
     <>
@@ -136,7 +154,7 @@ const NewsContent = () => {
             },
           }}
         >
-          {currentPageItems?.map((content) => (
+          {newsCard?.map((content) => (
             <>
               <Link>
                 <Box

src/routes/_routes.jsx

@@ -24,6 +24,11 @@ import healthTech from "../assets/images/health-tech.png";
 import Form from "../components/Contact/Form";
 import UseCase from "../components/UseCase/UseCase";
 import ResourcesPage from "../pages/ResourcesPage";
+import VideoInternal from "../components/VideoInternal/VideoInternal";
+import Ecosystem from "../pages/Ecosystem";
+import Events from "../pages/Events";
+import NewsPage from "../pages/NewsPage";
+import EventsInternnal from "../pages/EventsInternnal";
 
 export const route = [
   {
@@ -79,6 +84,26 @@ export const route = [
     path: "resources-page",
     element: <ResourcesPage />,
   },
+  {
+    path: "video-page",
+    element: <VideoInternal />,
+  },
+  {
+    path: "ecosystem",
+    element: <Ecosystem />,
+  },
+  {
+    path: "events",
+    element: <Events />,
+  },
+  {
+    path: "news",
+    element: <NewsPage />,
+  },
+  {
+    path: "events-internal",
+    element: <EventsInternnal />,
+  },
   {
     path: "*",
     element: <NotFound />,