fix(StorePage): fix pagination bug where incorrect index and pageSize were passed to getStoreComponents function

feat(StorePage): add support for dynamic pagination in StorePage by implementing handleChangePagination function
feat(StorePage): add support for resetting filter in StorePage by implementing resetFilter function
feat(StorePage): add support for displaying total rows count in StorePage
feat(StorePage): add support for displaying loading message while fetching data in StorePage
feat(StorePage): add support for displaying error message when there is an error fetching data in StorePage
feat(StorePage): add support for displaying search input and search button in StorePage
feat(StorePage): add support for filtering components by type in StorePage
feat(StorePage): add support for displaying badges for each component type in StorePage
feat(StorePage): add support for displaying market card components in StorePage
feat(StorePage): add support for displaying paginator component in StorePage
feat(StorePage): add support for displaying loading message while fetching data with API key in StorePage
fix(types): add storeComponent property to PaginatorComponentType to differentiate between store and other components

src/frontend/src/pages/StorePage/index.tsx

@@ -45,20 +45,19 @@ export default function StorePage(): JSX.Element {
   const [size, setPageSize] = useState(10);
   const [index, setPageIndex] = useState(1);
 
-  function handleChangePagination(pageIndex: number, pageSize: number) {}
-
   useEffect(() => {
     handleGetComponents();
   }, []);
 
   const handleGetComponents = () => {
     setLoading(true);
-    getStoreComponents(1, 10)
+    getStoreComponents(index - 1, 10000)
       .then((res) => {
-        setSearchData(res);
+        setSearchData(res.slice(0, 10));
         setLoading(false);
         setErrorApiKey(false);
         setData(res);
+        setTotalRowsCount(res.length);
       })
       .catch((err) => {
         setSearchData([]);
@@ -84,6 +83,34 @@ export default function StorePage(): JSX.Element {
     );
   };
 
+  function handleChangePagination(pageIndex: number, pageSize: number) {
+    setLoading(true);
+    getStoreComponents(pageIndex, pageSize)
+      .then((res) => {
+        setPageIndex(pageIndex);
+        setPageSize(pageSize);
+        setSearchData(res);
+        setLoading(false);
+        setErrorApiKey(false);
+        setData(res);
+      })
+      .catch((err) => {
+        setSearchData([]);
+        setLoading(false);
+        setErrorApiKey(true);
+        setErrorData({
+          title: "Error to get components.",
+          list: [err["response"]["data"]["detail"]],
+        });
+      });
+  }
+
+  function resetFilter() {
+    setPageIndex(1);
+    setPageSize(10);
+    handleGetComponents();
+  }
+
   const loadingWithApiKey = loading;
   const renderComponents = !loading;
 
@@ -113,7 +140,6 @@ export default function StorePage(): JSX.Element {
         <span className="community-page-description-text">
           Search flows and components from the community.
         </span>
-        {renderComponents && (
         <div className="flex w-full flex-col gap-4 p-4">
           <div className="flex items-center justify-center gap-4">
             <div className="flex w-[13%] items-center justify-center gap-3 text-sm">
@@ -148,9 +174,7 @@ export default function StorePage(): JSX.Element {
               <Select
                 onValueChange={(value) => {
                   const filter = value === "Flow" ? false : true;
-                    const search = data.filter(
-                      (f) => f.is_component === filter
-                    );
+                  const search = data.filter((f) => f.is_component === filter);
                   value === "" ? setSearchData(data) : setSearchData(search);
                 }}
               >
@@ -197,6 +221,9 @@ export default function StorePage(): JSX.Element {
               )
             )}
           </div>
+
+          {renderComponents && (
+            <>
               <div className="mt-6 grid w-full gap-4 md:grid-cols-2 lg:grid-cols-3">
                 {searchData
                   .filter(
@@ -208,8 +235,13 @@ export default function StorePage(): JSX.Element {
                     <MarketCardComponent key={idx} data={item} />
                   ))}
               </div>
-
+            </>
+          )}
+        </div>
+        {totalRowsCount > 0 && !loading && (
+          <div className="relative bottom-2">
             <PaginatorComponent
+              storeComponent={true}
               pageIndex={index}
               pageSize={size}
               totalRowsCount={totalRowsCount}
@@ -219,7 +251,6 @@ export default function StorePage(): JSX.Element {
             ></PaginatorComponent>
           </div>
         )}
-
         {loadingWithApiKey && (
           <div className="flex w-full flex-col gap-4 p-4">Loading...</div>
         )}

src/frontend/src/types/components/index.ts

@@ -271,6 +271,7 @@ export type PaginatorComponentType = {
   rowsCount?: number[];
   totalRowsCount: number;
   paginate: (pageIndex: number, pageSize: number) => void;
+  storeComponent?: boolean;
 };
 
 export type ConfirmationModalType = {