chore: fix pagination

Author: Davidthecode

backend/controllers/blogController.ts

@@ -34,7 +34,11 @@ function generateBlogId(title: string): string {
 export const getBlogs = async (req: NextRequest) => {
     const getSkip = req.nextUrl.searchParams.get("skip");
     let parsedSkip = 0;
-    if (getSkip) parsedSkip = parseInt(getSkip)
+    if (getSkip) {
+        parsedSkip = parseInt(getSkip);
+    }
+
+    console.log("parsedSkip ==>", parsedSkip);
 
     try {
         const limit = parsedSkip === 0 ? 8 : 4;

components/blog/main/blogfeed/blogFeed.tsx

@@ -31,11 +31,26 @@ const BlogFeed = () => {
     onLoadMore: () => loadMoreBlogs(),
   });
 
-  const loadMoreBlogs = () => {
-    setLoading((prev) => ({ ...prev, more: true }));
-    setPagination((prev) => ({ ...prev, fetchedCount: prev.fetchedCount + 4 }));
+  const loadMoreBlogs = async () => {
+    if (loading.more || !pagination.hasMore) return;  // Prevent multiple calls
+
+    setLoading((prev) => ({ ...prev, more: true })); // set loading to be true
+
+    try {
+      const res = await getBlogs(pagination.fetchedCount); //fetch new blogs
+      setBlogs((prevBlogs) => [...prevBlogs, ...res.blogs]); // add new blogs with previous blogs
+      setPagination((prev) => ({
+        fetchedCount: prev.fetchedCount + res.blogs.length, // increase fetched blogs count
+        hasMore: res.hasMore, //update hasMore state
+      }));
+    } catch (error) {
+      console.error("Error loading more blogs", error);
+    } finally {
+      setLoading((prev) => ({ ...prev, more: false })); //set loading to be false
+    }
   };
 
+  //function to fetch blogs based on category
   const fetchBlogs = useCallback(async () => {
     if (!userInfo) return;
 
@@ -48,8 +63,12 @@ const BlogFeed = () => {
       switch (activeCategory) {
         case "Personalized":
           const res = await getBlogs(pagination.fetchedCount);
-          fetchedBlogs = res.blogs;
-          hasMoreBlogs = res.hasMore;
+          fetchedBlogs = res.blogs; // set blogs to *fetchedBlogs* array
+          setPagination((prev) => ({
+            ...prev,
+            fetchedCount: prev.fetchedCount + res.blogs.length // increase fetched blogs count
+          }));
+          hasMoreBlogs = res.hasMore; //update hasMore state
           break;
         case "Following":
           fetchedBlogs = await getFollowingBlogs(userInfo._id);
@@ -71,7 +90,9 @@ const BlogFeed = () => {
   }, [activeCategory, pagination.fetchedCount, userInfo?._id]);
 
   useEffect(() => {
-    fetchBlogs();
+    if (pagination.fetchedCount === 0) {
+      fetchBlogs();
+    }
   }, [fetchBlogs]);
 
   const handleCategoryChange = (category: string) => {
@@ -101,7 +122,11 @@ const BlogFeed = () => {
 
       <div className="flex flex-col pt-2">
         {blogs.map((blog, index) => (
-          <div key={blog._id} ref={index === blogs.length - 1 ? infiniteRef : null}>
+          <div
+            key={blog._id}
+            // assign *infiniteRef* to the last blog so that when the blog is in view, it would trigger a fetch for more blogs
+            ref={index === blogs.length - 1 ? infiniteRef : null}
+          >
             <BlogItem
               blog={blog}
               handleDeletePopup={() => setDeleteBlogPopup(true)}

components/blog/main/blogfeed/blogItem.tsx

@@ -1,4 +1,4 @@
-import { Dispatch, SetStateAction, useState, useRef } from "react";
+import { Dispatch, SetStateAction, useState } from "react";
 import Image from "next/image";
 import Link from "next/link";
 import { Heart, MessageCircle, Bookmark, Ellipsis } from "lucide-react";
@@ -31,7 +31,6 @@ const BlogItem = ({ blog, handleDeletePopup, openBlogId, setOpenBlogId, isLastBl
     const { isBookmarked, isBookmarkLoading, handleBookmarkToggle } = useBookmarks();
     const { following, isLoading, handleFollow, handleUnfollow } = useFollowStatus(blog.authorId._id);
     const [provider, setProvider] = useState<TiptapCollabProvider | null>(null);
-    const tagColors = ['#6941C6', '#026AA2', '#C11574'];
 
     const { previewText, timePublished } = handleBlogContentPreview({
         blogContent: blog.content,
@@ -67,6 +66,7 @@ const BlogItem = ({ blog, handleDeletePopup, openBlogId, setOpenBlogId, isLastBl
                     <p className="text-xs text-black hover:underline">{blog.authorId.name}</p>
                 </Link>
             </div>
+
             {/* Blog content preview */}
             <Link href={`/${blog.authorId.username}/${blog.blogId}`}>
                 <div className="flex items-start justify-between">
@@ -85,6 +85,7 @@ const BlogItem = ({ blog, handleDeletePopup, openBlogId, setOpenBlogId, isLastBl
                     )}
                 </div>
             </Link>
+
             {/* Blog metadata and actions */}
             <div className="flex items-center text-sm justify-between max-w-[65%]">
                 <Link href={`/${blog.authorId.username}/${blog.blogId}`} className="w-full">
@@ -105,18 +106,6 @@ const BlogItem = ({ blog, handleDeletePopup, openBlogId, setOpenBlogId, isLastBl
                     </div>
                 </Link>
                 <div className="flex items-center space-x-6">
-                    <div className="hidden sm:flex items-center space-x-2">
-                        {/* TODO: add more tags support*/}
-                        {blog.tags.slice(0, 1).map((tag, index) => (
-                            <p
-                                key={tag}
-                                className="text-[11px] opacity-90 border rounded-3xl px-2 py-[1px]"
-                                style={{ color: tagColors[index % tagColors.length], borderColor: tagColors[index % tagColors.length] }}
-                            >
-                                {tag}
-                            </p>
-                        ))}
-                    </div>
                     <button onClick={() => handleBookmarkToggle(blog._id)} disabled={isBookmarkLoading}>
                         <Bookmark size={18} strokeWidth={1} fill={isBookmarked[blog._id] ? "black" : "none"} />
                     </button>