feat(saved-components): add pagination functionality to the saved components page

- Add `PaginatorComponent` import to the `saved-components` file to use for pagination.
- Add `totalRowsCount`, `size`, and `index` state variables to manage pagination.
- Modify the `handleGetComponents` function to fetch components based on the current `index` and `size` values.
- Add `handleChangePagination` function to handle pagination changes and fetch components accordingly.
- Render the `PaginatorComponent` below the list of components if there are components to display and the loading state is false.

feat(store-page): add pagination functionality to the store page

- Remove the `loadingWithApiKey` variable as it is no longer needed.
- Remove the `renderComponents` variable as it is no longer needed.
- Add `renderPagination` variable to determine if pagination should be rendered based on the search data, loading state, and search state.
- Render the `PaginatorComponent` below the list of components if there are components to display, the loading state is false, and the search state is false.

src/frontend/src/pages/MainPage/components/saved-components/index.tsx

@@ -1,5 +1,7 @@
 import { useContext, useEffect, useState } from "react";
 
+import PaginatorComponent from "../../../../components/PaginatorComponent";
+import { SkeletonCardComponent } from "../../../../components/skeletonCardComponent";
 import { alertContext } from "../../../../contexts/alertContext";
 import { AuthContext } from "../../../../contexts/authContext";
 import { TabsContext } from "../../../../contexts/tabsContext";
@@ -20,6 +22,9 @@ export default function SavedComponents(): JSX.Element {
   const [loading, setLoading] = useState(false);
   const [filteredCategories, setFilteredCategories] = useState(new Set());
   const { setErrorData } = useContext(alertContext);
+  const [totalRowsCount, setTotalRowsCount] = useState(0);
+  const [size, setPageSize] = useState(10);
+  const [index, setPageIndex] = useState(1);
 
   useEffect(() => {
     handleGetComponents();
@@ -27,10 +32,11 @@ export default function SavedComponents(): JSX.Element {
 
   const handleGetComponents = () => {
     setLoading(true);
-    getStoreComponents(1, 10)
+    getStoreComponents(index - 1, 10000)
       .then((res) => {
-        setLoading(false);
+        setTotalRowsCount(res.length);
         setData(res);
+        setLoading(false);
       })
       .catch((err) => {
         setLoading(false);
@@ -41,12 +47,37 @@ export default function SavedComponents(): JSX.Element {
       });
   };
 
-  const loadingWithApiKey = loading;
-  const renderComponents = !loading;
+  function handleChangePagination(pageIndex: number, pageSize: number) {
+    setLoading(true);
+    getStoreComponents(pageIndex, pageSize)
+      .then((res) => {
+        setData(res);
+        setPageIndex(pageIndex);
+        setPageSize(pageSize);
+        setLoading(false);
+      })
+      .catch((err) => {
+        setLoading(false);
+        setErrorData({
+          title: "Error to get components.",
+          list: [err["response"]["data"]["detail"]],
+        });
+      });
+  }
+
+  const renderPagination = data.length > 0 && !loading;
 
   return (
     <>
-      {renderComponents && (
+      {loading ? (
+        <>
+          <div className="mt-6 grid w-full gap-4 md:grid-cols-2 lg:grid-cols-3">
+            <SkeletonCardComponent />
+            <SkeletonCardComponent />
+            <SkeletonCardComponent />
+          </div>
+        </>
+      ) : (
         <div className="flex w-full flex-col gap-4 p-4">
           <div className="mt-6 grid w-full gap-4 md:grid-cols-2 lg:grid-cols-3">
             {data
@@ -62,8 +93,18 @@ export default function SavedComponents(): JSX.Element {
         </div>
       )}
 
-      {loadingWithApiKey && (
-        <div className="flex w-full flex-col gap-4 p-4">Loading...</div>
+      {renderPagination && (
+        <div className="relative mt-3">
+          <PaginatorComponent
+            storeComponent={true}
+            pageIndex={index}
+            pageSize={size}
+            totalRowsCount={totalRowsCount}
+            paginate={(pageSize, pageIndex) => {
+              handleChangePagination(pageIndex, pageSize);
+            }}
+          ></PaginatorComponent>
+        </div>
       )}
     </>
   );

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

@@ -118,8 +118,6 @@ export default function StorePage(): JSX.Element {
       });
   }
 
-  const loadingWithApiKey = loading;
-  const renderComponents = !loading;
   const renderPagination = searchData.length > 0 && !loading && !search;
 
   return (
@@ -198,7 +196,7 @@ export default function StorePage(): JSX.Element {
             </div>
           </div>
           <div className="flex h-2 items-center justify-center gap-4">
-            {renderComponents &&
+            {!loading &&
               Array.from(new Set(searchData.map((i) => i.is_component))).map(
                 (i, idx) => (
                   <Badge
@@ -231,7 +229,7 @@ export default function StorePage(): JSX.Element {
               )}
           </div>
           <div className="mt-6 grid w-full gap-4 md:grid-cols-2 lg:grid-cols-3">
-            {loadingWithApiKey ? (
+            {loading ? (
               <>
                 <SkeletonCardComponent />
                 <SkeletonCardComponent />
@@ -252,7 +250,7 @@ export default function StorePage(): JSX.Element {
         </div>
 
         {renderPagination && (
-          <div className="relative bottom-2">
+          <div className="relative mt-3">
             <PaginatorComponent
               storeComponent={true}
               pageIndex={index}