feat: refactor scroll to load more

Author: luannguyenQV

apps/web/@/hooks/useInfinityScroll.ts

@@ -1,12 +1,11 @@
 import { useCallback, useEffect, useRef, useState } from "react"
 
-const useInfiniteScroll = (callback: () => void, root: HTMLElement | null, isFetching: boolean) => {
+const useInfiniteScroll = (callback: Function, root: HTMLElement | null, isFetching: boolean) => {
   const observer = useRef<IntersectionObserver | null>(null)
   const [node, setNode] = useState<HTMLElement | null>(null)
 
   const handleIntersection = useCallback(
     (entries: IntersectionObserverEntry[]) => {
-      console.log("entries", entries)
       if (entries[0].isIntersecting && !isFetching) {
         callback?.()
       }

apps/web/@/molecules/infinite-scroll/index.tsx

@@ -0,0 +1,38 @@
+"use client"
+
+import { Loader } from "lucide-react"
+
+import useInfiniteScroll from "@/hooks/useInfinityScroll"
+
+interface InfiniteScrollProps {
+  containerClassName?: string
+  children: React.ReactNode
+  hasMore?: boolean
+  root?: HTMLElement | null
+  loading: boolean
+  nextPage: (params: Record<string, any>) => Promise<any>
+}
+
+export default function InfiniteScroll({
+  containerClassName,
+  children,
+  hasMore,
+  root,
+  nextPage,
+  loading,
+}: InfiniteScrollProps) {
+  const { setNode } = useInfiniteScroll(nextPage, root, loading)
+
+  return (
+    <div className={containerClassName}>
+      {children}
+
+      <div
+        ref={setNode}
+        className="flex h-10 w-full items-center justify-center"
+      >
+        {loading && <Loader className="animate-spin" />}
+      </div>
+    </div>
+  )
+}

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

@@ -48,7 +48,7 @@ export default function PostItem({ post }: { post: TPostItem }) {
           </div>
         </div>
       </div>
-      {post.image && (
+      {post.image && post.image.previewUrl && (
         <div className="flex items-center">
           <Image
             src={post.image.previewUrl}

apps/web/@/molecules/posts/post-item/index.tsx

@@ -0,0 +1,47 @@
+"use client"
+
+import React, { useCallback, useState } from "react"
+import { useParams } from "next/navigation"
+
+import { getPosts, TPostItem } from "database"
+
+import InfiniteScroll from "@/molecules/infinite-scroll"
+
+import PostItem from "../post-item"
+
+export default function PostList() {
+  const searchParams = useParams()
+  const [isLoading, setIsLoading] = useState(false)
+  const [posts, setPosts] = useState<TPostItem[]>([])
+  const [page, setPage] = useState(1)
+  const [hasNextPage, setHasNextPage] = useState(true)
+
+  const loadPosts = useCallback(async () => {
+    if (!hasNextPage) return
+
+    setIsLoading(true)
+    const { data } = await getPosts({
+      ...searchParams,
+      page: page.toString(),
+    })
+
+    setPosts((prev) => [...prev, ...data?.data])
+    setHasNextPage(data?.totalPages > page)
+    setIsLoading(false)
+    setPage((prev) => prev + 1)
+  }, [searchParams, page])
+
+  return (
+    <InfiniteScroll
+      loading={isLoading}
+      nextPage={loadPosts}
+    >
+      {posts?.map((post) => (
+        <PostItem
+          key={post.id}
+          post={post}
+        />
+      ))}
+    </InfiniteScroll>
+  )
+}

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

@@ -4,7 +4,7 @@ import { Metadata } from "next"
 import { PostSkeleton } from "ui"
 
 import Filter from "@/molecules/home/filter"
-import PostList from "@/molecules/post-list"
+import PostList from "@/molecules/posts/post-list"
 
 export const metadata: Metadata = {
   title: "Next-forum - Share the best things",
@@ -16,7 +16,7 @@ export default async function Page() {
     <div>
       <Filter />
       <Suspense fallback={<PostSkeleton total={10} />}>
-        <PostList containerClassName="mt-4" />
+        <PostList />
       </Suspense>
     </div>
   )