Merge pull request #136 from CodeForStartup/feat/scroll-to-load-more

feat: home page - scroll to load more

Author: luannguyenQV

apps/web/@/hooks/useInfinityScroll.ts

@@ -7,6 +7,7 @@ const useInfiniteScroll = (callback: () => void, root: HTMLElement | null, isFet
 
   const handleIntersection = useCallback(
     (entries: IntersectionObserverEntry[]) => {
+      console.log("entries", entries)
       if (entries[0].isIntersecting && !isFetching) {
         callback?.()
       }
@@ -15,12 +16,13 @@ const useInfiniteScroll = (callback: () => void, root: HTMLElement | null, isFet
   )
 
   useEffect(() => {
-    if (!root || !node || isFetching) return
+    if (!node || isFetching) return
 
     if (observer.current) {
       observer.current.disconnect()
     }
 
+    console.log("observer.current", observer.current)
     observer.current = new IntersectionObserver(handleIntersection, {
       root,
       rootMargin: "100px",

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

@@ -0,0 +1,50 @@
+"use client"
+
+import { useCallback, useState } from "react"
+import { useSearchParams } from "next/navigation"
+
+import { getPosts, PostStatus, TPostItem } from "database"
+
+import useInfiniteScroll from "@/hooks/useInfinityScroll"
+
+import PostItem from "../posts/post-item"
+
+export default function PostList() {
+  const searchParams = useSearchParams()
+  const [page, setPage] = useState(1)
+  const [hasMore, setHasMore] = useState(true)
+  const [loading, setLoading] = useState(false)
+  const [posts, setPosts] = useState<TPostItem[]>([])
+
+  const loadMoreBooks = useCallback(async () => {
+    setLoading(true)
+    const newPosts = await getPosts({
+      ...searchParams,
+      postStatus: PostStatus.PUBLISHED,
+      page: page.toString(),
+    })
+    setPosts((prevPosts) => [...prevPosts, ...newPosts?.data?.data])
+    setHasMore(page < newPosts?.data?.pagination?.totalPages)
+    setLoading(false)
+  }, [page, searchParams])
+
+  const { setNode } = useInfiniteScroll(loadMoreBooks, null, loading)
+
+  return (
+    <div>
+      {posts?.map((post) => (
+        <PostItem
+          key={post.id}
+          post={post}
+        />
+      ))}
+
+      <div
+        ref={setNode}
+        className="h-10 w-full"
+      >
+        {loading && <div>Loading...</div>}
+      </div>
+    </div>
+  )
+}

apps/web/app/[lang]/(public)/page.tsx

@@ -2,7 +2,9 @@ import { Metadata } from "next"
 
 import { getPosts, PostStatus } from "database"
 
+import useInfiniteScroll from "@/hooks/useInfinityScroll"
 import Filter from "@/molecules/home/filter"
+import PostList from "@/molecules/post-list"
 import PostItem from "@/molecules/posts/post-item"
 
 export const metadata: Metadata = {
@@ -15,22 +17,11 @@ export default async function Page({
 }: {
   searchParams: { [key: string]: string | string[] | undefined }
 }) {
-  const posts = await getPosts({
-    ...searchParams,
-    postStatus: PostStatus.PUBLISHED,
-  })
-
   return (
     <div className="">
       <Filter />
-      <div className="mt-4">
-        {posts?.data?.data?.map((post) => (
-          <PostItem
-            key={post.id}
-            post={post}
-          />
-        ))}
-      </div>
+
+      <PostList />
     </div>
   )
 }

apps/web/app/[lang]/(public-fullwidth)/author/[authorId]/page.tsx

@@ -14,10 +14,8 @@ export const metadata = {
 
 export default async function Page({ params, searchParams }) {
   const { data, total } = await getPosts({
-    searchParams: {
-      authorId: params?.authorId,
-      ...searchParams,
-    },
+    authorId: params?.authorId,
+    ...searchParams,
   })
 
   return (