refactor: implement blog fetching and pagination in BlogsPage component

2025-11-19 10:55:26 +03:30
parent 4651ae534d
commit 235a64c378
6 changed files with 106 additions and 31 deletions
@@ -1,15 +1,55 @@
 "use client";

+import { useState, useEffect } from "react";
 import Head from "./Head";
 import Title from "./title";
 import LatestArticles from "./latestArticles";
+import { request } from "@/services/response";
+
+function BlogsPage() {
+  const [blogs, setBlogs] = useState([]);
+  const [page, setPage] = useState(1);
+  const [totalPages, setTotalPages] = useState(1);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchBlogs = async () => {
+      try {
+        setIsLoading(true);
+        const params = {
+          page: page,
+          limit: 10,
+        };
+        const response = await request.getBlogs(params);
+        setBlogs(response.blogs || []);
+        setTotalPages(response.page?.totalPages || 1);
+      } catch (error) {
+        console.error("Error fetching blogs:", error);
+        setBlogs([]);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchBlogs();
+  }, [page]);
+
+  const handlePageChange = (event, value) => {
+    setPage(value);
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  };

-function BlogsPage({ blogs }) {
  return (
    <div className="padding-responsive pt-[84px] sm:pt-[110px] md:pt-[140px] lg:pt-[168px]">
      <Title />
      <Head />
-      <LatestArticles blogs={blogs} />
+      <LatestArticles
+        blogs={blogs}
+        page={page}
+        totalPages={totalPages}
+        onPageChange={handlePageChange}
+        isLoading={isLoading}
+      />
    </div>
  );
 }