fix: scroll to load more pagination

Author: luannguyenQV

apps/web/@/hooks/useInfinityScroll.ts

@@ -1,7 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from "react"
 
 const useInfiniteScroll = (callback: () => void, root: HTMLElement | null, isFetching: boolean) => {
-  // const [isFetching, setIsFetching] = useState(false)
   const observer = useRef<IntersectionObserver | null>(null)
   const [node, setNode] = useState<HTMLElement | null>(null)
 
@@ -22,7 +21,6 @@ const useInfiniteScroll = (callback: () => void, root: HTMLElement | null, isFet
       observer.current.disconnect()
     }
 
-    console.log("observer.current", observer.current)
     observer.current = new IntersectionObserver(handleIntersection, {
       root,
       rootMargin: "100px",

apps/web/@/molecules/post-list/index.tsx

@@ -5,7 +5,6 @@ import { useSearchParams } from "next/navigation"
 
 import { getPosts, PostStatus, TPostItem } from "database"
 import { Loader } from "lucide-react"
-import { PostSkeleton } from "ui"
 
 import useInfiniteScroll from "@/hooks/useInfinityScroll"
 
@@ -22,19 +21,27 @@ export default function PostList({ containerClassName }: PostListProps) {
   const [loading, setLoading] = useState(false)
   const [posts, setPosts] = useState<TPostItem[]>([])
 
-  const loadMoreBooks = useCallback(async () => {
+  const loadMorePosts = useCallback(async () => {
+    console.log("hasMore", hasMore)
+    if (!hasMore) return
+
     setLoading(true)
     const newPosts = await getPosts({
       ...searchParams,
       postStatus: PostStatus.PUBLISHED,
       page: page.toString(),
     })
+    console.log("newPosts", newPosts)
     setPosts((prevPosts) => [...prevPosts, ...newPosts?.data?.data])
-    setHasMore(page < newPosts?.data?.pagination?.totalPages)
+    setHasMore(page < newPosts?.data?.totalPages)
+    setPage((prevPage) => prevPage + 1)
     setLoading(false)
   }, [page, searchParams])
 
-  const { setNode } = useInfiniteScroll(loadMoreBooks, null, loading)
+  const { setNode } = useInfiniteScroll(loadMorePosts, null, loading)
+
+  console.log("hasMore", hasMore)
+  console.log("page", page)
 
   return (
     <div className={containerClassName}>