feat: fixed filter functionality

packages/apsara-ui/src/Listing/InfiniteScroll.tsx

@@ -4,8 +4,10 @@ import React, { useState, useEffect } from "react";
 interface InfiniteScrollProps<T> {
     fetchMoreData: (page: number, pageSize: number, filters: any) => Promise<T[]>;
     contentRef: React.RefObject<HTMLDivElement>;
+    page: number;
     pageSize?: number;
     filters?: any;
+    threshold?: number;
     renderItem: (item: T) => React.ReactNode;
     loadingComponent?: React.ReactNode;
     noMoreDataComponent?: React.ReactNode;
@@ -14,50 +16,48 @@ interface InfiniteScrollProps<T> {
 const InfiniteScroll: React.FC<InfiniteScrollProps<any>> = ({
     fetchMoreData,
     contentRef,
+    page,
     pageSize = 10,
+    threshold = 0,
     filters,
     renderItem,
     loadingComponent,
     noMoreDataComponent,
 }) => {
     const [data, setData] = useState<any[]>([]);
-    const [page, setPage] = useState(1);
     const [isLoading, setIsLoading] = useState(false);
     const [hasMoreData, setHasMoreData] = useState(true);
-    const [isFirstFetch, setIsFirstFetch] = useState(true);
 
-    const onBottomHit = debounce(async () => {
+    useEffect(() => {
+        setData([]);
+        setHasMoreData(true);
+    }, [filters]);
+
+    const fetchMore = debounce(async () => {
         if (!isLoading && hasMoreData && isBottom(contentRef)) {
             setIsLoading(true);
             try {
                 const newData = await fetchMoreData(page, pageSize, filters);
                 setData((prevData) => prevData.concat(newData));
-                setPage((prevPage) => prevPage + 1);
-                setHasMoreData(newData.length > 0);
+                setHasMoreData(newData.length < pageSize ? false : true);
             } finally {
                 setIsLoading(false);
             }
         }
     }, 200);
 
     useEffect(() => {
-        setPage(1);
-        setHasMoreData(true);
-        setData([]);
-    }, [filters]);
-
-    useEffect(() => {
-        if (isFirstFetch) {
-            onBottomHit();
+        if (page == 1 && !data.length) {
+            fetchMore();
         }
-        setIsFirstFetch(false);
 
         const onScroll = () => {
-            onBottomHit();
+            if (page != 1) {
+                fetchMore();
+            }
         };
 
         const currentContentRef = contentRef.current;
-
         if (currentContentRef) {
             currentContentRef.addEventListener("scroll", onScroll);
         }
@@ -67,19 +67,7 @@ const InfiniteScroll: React.FC<InfiniteScrollProps<any>> = ({
                 currentContentRef.removeEventListener("scroll", onScroll);
             }
         };
-    }, [
-        contentRef,
-        isLoading,
-        hasMoreData,
-        page,
-        filters,
-        fetchMoreData,
-        setData,
-        setPage,
-        setHasMoreData,
-        isFirstFetch,
-        onBottomHit,
-    ]);
+    }, [contentRef, fetchMore, page, filters]);
 
     const isBottom = (ref: React.RefObject<HTMLDivElement>) => {
         if (!ref.current) {
@@ -88,7 +76,7 @@ const InfiniteScroll: React.FC<InfiniteScrollProps<any>> = ({
 
         const { scrollTop, scrollHeight, clientHeight } = ref.current;
 
-        return scrollTop + clientHeight >= scrollHeight;
+        return scrollTop + clientHeight >= scrollHeight - threshold;
     };
 
     return (

packages/apsara-ui/src/Listing/Listing.stories.tsx

@@ -1,8 +1,9 @@
-import React, { useRef, useState } from "react";
+import React, { FormEvent, useRef, useState } from "react";
 import Listing from "./Listing";
 import InfiniteListing from "./InfiniteListing";
 import { ScrollableList, UserCard } from "./Listing.styles";
 import InfiniteScroll from "./InfiniteScroll";
+import Search from "../Search";
 
 export default {
     title: "Data Display/Listing",
@@ -194,18 +195,20 @@ export const infiniteListingWithApply = () => {
 export const infiniteListWithCustomComponent = () => {
     const pageSize = 10;
     const contentRef = useRef<HTMLDivElement>(null);
-    const fetchRecords = (page: number, pageSize: number) => {
-        return Array.from({ length: pageSize }, (_, i) => ({
-            name: `user ${page * pageSize + i}`,
-            index: page * pageSize + i,
-            age: Math.floor(Math.random() * 41) + 20, // Random age between 20 and 60
-        }));
-    };
+    const [searchTerm, setSearchTerm] = useState("");
+    const [filter, setFilter] = useState<string>();
+    const [page, setPage] = useState<number>(1);
 
     const fetchMore = async (page: number, pageSize: number, filter: string) => {
-        console.log(filter);
-        const records = fetchRecords(page, pageSize);
+        if (page === 4) return [];
+
+        let records = getData(page);
+        if (filter) {
+            records = records.filter((record) => record.name.toLowerCase().includes(filter.toLowerCase()));
+        }
 
+        setPage((prevPage) => prevPage + 1);
+        records = records.slice(0, pageSize);
         return records;
     };
 
@@ -224,11 +227,31 @@ export const infiniteListWithCustomComponent = () => {
         );
     };
 
+    const onSubmit = (e: FormEvent) => {
+        e.preventDefault();
+        setPage(1);
+        setFilter(searchTerm);
+    };
+
     return (
         <div style={{ display: "flex", justifyContent: "center" }}>
+            <form onSubmit={onSubmit}>
+                <Search
+                    style={{ width: "90vw", height: "100%" }}
+                    value={searchTerm}
+                    onChange={(e) => {
+                        return setSearchTerm(e.target.value);
+                    }}
+                    placeholder="Type your search query here.."
+                    // @ts-ignore
+                    secondary={true}
+                />
+            </form>
             <ScrollableList className="results-list" ref={contentRef}>
                 <InfiniteScroll
+                    page={page}
                     fetchMoreData={fetchMore}
+                    filters={filter}
                     pageSize={pageSize}
                     contentRef={contentRef}
                     renderItem={(user: User) => <Card user={user} />}