feat: add scroll to load more

Author: luannguyenQV

apps/web/@/hooks/useGetImages.ts

@@ -1,18 +1,9 @@
-import { TImageFilter } from "database"
-import useSWR from "swr"
+import { useMemo } from "react"
 
-const getImages = async (filter: TImageFilter) => {
-  const queryParams = new URLSearchParams()
-
-  // TODO: will update filter params later
-  // Add filter parameters to the query string
-  if (filter.search) queryParams.append("search", filter.search)
-  if (filter.order) queryParams.append("order", filter.order)
-  if (filter.orderBy) queryParams.append("orderBy", filter.orderBy)
-  // Add any other filter parameters as needed
-
-  const url = `/api/protected/images?${queryParams.toString()}`
+import { TImageFilter, TListImageResponse } from "database"
+import useSWRInfinite from "swr/infinite"
 
+const getImages = async (url): Promise<TListImageResponse> => {
   const response = await fetch(url, {
     method: "GET",
     headers: {
@@ -28,14 +19,36 @@ const getImages = async (filter: TImageFilter) => {
 }
 
 export function useGetImages(filter: TImageFilter) {
-  const { data, error, isLoading, mutate } = useSWR(["/api/protected/images", filter], () =>
-    getImages(filter)
+  const { data, mutate, size, setSize, isLoading, error } = useSWRInfinite(
+    (index) => {
+      const queryParams = new URLSearchParams()
+
+      if (filter.search) queryParams.append("search", filter.search)
+      // if (filter.order) queryParams.append("order", filter.order)
+      // if (filter.orderBy) queryParams.append("orderBy", filter.orderBy)
+      queryParams.append("page", (index + 1).toString())
+
+      return `/api/protected/images?${queryParams.toString()}`
+    },
+    (url) => getImages(url)
   )
 
+  const images = useMemo(() => (data || []).flatMap((page) => page.data.data.data), [data])
+  const totalPages = useMemo(() => data?.[0]?.data?.data?.totalPages, [data])
+
+  const fetchMore = () => {
+    if (size >= totalPages) {
+      return
+    }
+
+    setSize(size + 1)
+  }
+
   return {
-    images: data?.data?.data?.data,
+    images,
     isLoading,
     isError: error,
     mutate,
+    fetchMore,
   }
 }

apps/web/@/hooks/useInfinityScroll.ts

@@ -0,0 +1,43 @@
+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)
+
+  const handleIntersection = useCallback(
+    (entries: IntersectionObserverEntry[]) => {
+      if (entries[0].isIntersecting && !isFetching) {
+        console.log("isIntersecting", entries[0])
+        callback?.()
+      }
+    },
+    [callback, isFetching]
+  )
+
+  useEffect(() => {
+    if (!root || !node || isFetching) return
+
+    if (observer.current) {
+      observer.current.disconnect()
+    }
+
+    observer.current = new IntersectionObserver(handleIntersection, {
+      root,
+      rootMargin: "100px",
+      threshold: 0.1,
+    })
+
+    observer.current.observe(node)
+
+    return () => {
+      if (observer.current) {
+        observer.current.disconnect()
+      }
+    }
+  }, [handleIntersection, root, node])
+
+  return { setNode }
+}
+
+export default useInfiniteScroll

apps/web/@/molecules/upload/AssetsManagement.tsx

@@ -1,30 +1,38 @@
-import { useMemo } from "react"
+import { useMemo, useRef } from "react"
 
 import { useGetImages } from "@/hooks/useGetImages"
+import useInfiniteScroll from "@/hooks/useInfinityScroll"
 
 import { useFileManager } from "./FileManagerContainer"
 import ImageList from "./ImageList"
 import ImageSearchBar from "./ImageSearchBar"
 
 const AssetManagement = () => {
   const { search } = useFileManager()
+  const imageListRef = useRef<HTMLDivElement>(null)
 
   const filterParams = useMemo(() => {
     return {
       search,
     }
   }, [search])
 
-  const { images, isLoading, isError } = useGetImages(filterParams)
+  const { images, isLoading, fetchMore } = useGetImages(filterParams)
+  const { setNode } = useInfiniteScroll(fetchMore, imageListRef.current, isLoading)
 
   return (
-    <div className="h-[400px] overflow-scroll px-4 py-4">
-      <ImageSearchBar />
-
+    <div
+      ref={imageListRef}
+      className="h-[400px] overflow-scroll px-4 py-4"
+    >
       <ImageList
         isLoading={isLoading}
         images={images}
       />
+
+      <div ref={setNode}>
+        <div className="h-10 w-full bg-transparent" />
+      </div>
     </div>
   )
 }

apps/web/@/molecules/upload/ImageSearchBar.tsx

@@ -14,7 +14,7 @@ export default function ImageSearchBar() {
   }
 
   return (
-    <div className="flex gap-4">
+    <div className="flex gap-4 px-4 py-2">
       <Input
         value={search}
         onChange={(e) => setSearch(e.target.value)}
@@ -23,14 +23,13 @@ export default function ImageSearchBar() {
 
       <Select>
         <SelectTrigger className="w-[180px]">
-          <SelectValue placeholder="Select a fruit" />
+          <SelectValue placeholder={t("common.sort_by")} />
         </SelectTrigger>
         <SelectContent>
-          <SelectItem value="apple">Apple</SelectItem>
-          <SelectItem value="banana">Banana</SelectItem>
-          <SelectItem value="blueberry">Blueberry</SelectItem>
-          <SelectItem value="grapes">Grapes</SelectItem>
-          <SelectItem value="pineapple">Pineapple</SelectItem>
+          <SelectItem value="apple">Name A → Z</SelectItem>
+          <SelectItem value="banana">Name Z → A</SelectItem>
+          <SelectItem value="blueberry">Recent created</SelectItem>
+          <SelectItem value="grapes">Last created</SelectItem>
         </SelectContent>
       </Select>
 

apps/web/@/molecules/upload/index.tsx

@@ -18,6 +18,7 @@ import { truncateFileName } from "@/utils/text"
 
 import AssetManagement from "./AssetsManagement"
 import FileManagerContainer, { useFileManager } from "./FileManagerContainer"
+import ImageSearchBar from "./ImageSearchBar"
 import UploadImageButton from "./UploadImageButton"
 
 interface UploadProps {
@@ -103,6 +104,8 @@ const Upload: React.FC<UploadProps> = ({ children, onSelect }) => {
             <UploadImageButton />
           </DialogHeader>
 
+          <ImageSearchBar />
+
           <AssetManagement />
 
           <DialogFooter className="mt-0 flex flex-row items-center justify-between border-t px-4 py-2">

packages/database/src/images/queries.ts

@@ -57,6 +57,7 @@ export const getImages = async (
       data: {
         data,
         total,
+        totalPages: Math.ceil(total / (options.limit ?? DEFAULT_LIMIT)),
         page: options.page ?? DEFAULT_PAGE,
         limit: options.limit ?? DEFAULT_LIMIT,
       },

packages/database/src/shared/type.ts

@@ -25,5 +25,6 @@ export type TGetListResponse<T> = {
   data: T[]
   total: number
   page: number
+  totalPages: number
   limit: number
 }