fix(saved-components): remove unused variables and pagination component

fix(market-card): refactor totalComponentsMetadata function to improve readability
fix(StorePage): remove unused import and add logic to handle pagination rendering based on search and loading status

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

@@ -1,11 +1,13 @@
 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";
-import { getStoreComponents } from "../../../../controllers/API";
+import {
+  getStoreComponents,
+  getStoreSavedComponents,
+} from "../../../../controllers/API";
 import { storeComponent } from "../../../../types/store";
 import { MarketCardComponent } from "../../../StorePage/components/market-card";
 
@@ -22,9 +24,6 @@ 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();
@@ -32,11 +31,9 @@ export default function SavedComponents(): JSX.Element {
 
   const handleGetComponents = () => {
     setLoading(true);
-    getStoreComponents(index - 1, 10000)
+    getStoreComponents(0, 10000)
       .then((res) => {
-        setTotalRowsCount(res.length);
-        setData(res);
-        setLoading(false);
+        handleAddedOnly(res);
       })
       .catch((err) => {
         setLoading(false);
@@ -47,13 +44,12 @@ export default function SavedComponents(): JSX.Element {
       });
   };
 
-  function handleChangePagination(pageIndex: number, pageSize: number) {
-    setLoading(true);
-    getStoreComponents(pageIndex, pageSize)
+  function handleAddedOnly(components: storeComponent[]) {
+    getStoreSavedComponents()
       .then((res) => {
-        setData(res);
-        setPageIndex(pageIndex);
-        setPageSize(pageSize);
+        const idSet = new Set(res.map((item) => item.id));
+        const filteredArray = components.filter((item) => idSet.has(item.id));
+        setData(filteredArray);
         setLoading(false);
       })
       .catch((err) => {
@@ -65,8 +61,6 @@ export default function SavedComponents(): JSX.Element {
       });
   }
 
-  const renderPagination = data.length > 0 && !loading;
-
   return (
     <>
       {loading ? (
@@ -92,20 +86,6 @@ export default function SavedComponents(): JSX.Element {
           </div>
         </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/components/market-card.tsx

@@ -77,6 +77,10 @@ export const MarketCardComponent = ({ data }: { data: storeComponent }) => {
     }
   }
 
+  const totalComponentsMetadata = () => {
+    return data?.metadata ? data.metadata["total"] : 0;
+  };
+
   return (
     <Card className="group relative flex flex-col justify-between overflow-hidden transition-all hover:shadow-md">
       <div>
@@ -147,7 +151,7 @@ export const MarketCardComponent = ({ data }: { data: storeComponent }) => {
               <ShadTooltip content="Components">
                 <span className="flex items-center gap-1.5 text-xs text-foreground">
                   <IconComponent name="ToyBrick" className="h-4 w-4" />
-                  123
+                  {totalComponentsMetadata()}
                 </span>
               </ShadTooltip>
               <ShadTooltip content="Favorites">

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

@@ -15,7 +15,6 @@ import {
   SelectTrigger,
   SelectValue,
 } from "../../components/ui/select";
-import { Switch } from "../../components/ui/switch";
 import { alertContext } from "../../contexts/alertContext";
 import { StoreContext } from "../../contexts/storeContext";
 import { TabsContext } from "../../contexts/tabsContext";
@@ -47,9 +46,12 @@ export default function StorePage(): JSX.Element {
   const [size, setPageSize] = useState(10);
   const [index, setPageIndex] = useState(1);
   const [errorApiKey, setErrorApiKey] = useState(false);
-  const { setSavedFlows } = useContext(StoreContext);
+  const { setSavedFlows, savedFlows } = useContext(StoreContext);
   const [tags, setTags] = useState<string[]>([]);
   const tagListId = useRef<{ id: string; name: string }[]>([]);
+  const [renderPagination, setRenderPagination] = useState(
+    searchData?.length > 0 && !loading && !search
+  );
 
   useEffect(() => {
     getStoreTags().then((res) => {
@@ -59,6 +61,10 @@ export default function StorePage(): JSX.Element {
     });
   }, []);
 
+  useEffect(() => {
+    setRenderPagination(searchData?.length > 0 && !loading && !search);
+  }, [loading, search]);
+
   async function getSavedComponents() {
     setLoading(true);
     const result = await getStoreSavedComponents();
@@ -110,8 +116,10 @@ export default function StorePage(): JSX.Element {
     setLoading(true);
     searchComponent(inputText).then(
       (res) => {
-        setLoading(false);
         setSearchData(res);
+        setData(res);
+        setRenderPagination(false);
+        setLoading(false);
       },
       (error) => {
         setLoading(false);
@@ -124,9 +132,11 @@ export default function StorePage(): JSX.Element {
     getStoreComponents(pageIndex, pageSize)
       .then((res) => {
         setData(res);
+        setSearchData(res);
         setPageIndex(pageIndex);
         setPageSize(pageSize);
         setLoading(false);
+        setRenderPagination(true);
       })
       .catch((err) => {
         setSearchData([]);
@@ -138,8 +148,6 @@ export default function StorePage(): JSX.Element {
       });
   }
 
-  const renderPagination = searchData.length > 0 && !loading && !search;
-
   return (
     <>
       <Header />
@@ -171,9 +179,6 @@ export default function StorePage(): JSX.Element {
         </span>
         <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">
-              Added Only <Switch />
-            </div>
             <div className="relative h-12 w-[35%]">
               <Input
                 placeholder="Search Flows and Components"
@@ -200,7 +205,21 @@ export default function StorePage(): JSX.Element {
               </Button>
             </div>
             <div className="flex w-[13%] items-center justify-center gap-3 text-sm">
-              <Select onValueChange={(value) => {}}>
+              <Select
+                onValueChange={(value) => {
+                  setFilteredCategories(new Set());
+                  if (value === "Flow") {
+                    setSearchData(data.filter((f) => f.is_component === false));
+                    setRenderPagination(false);
+                  } else if (value === "Component") {
+                    setSearchData(data.filter((f) => f.is_component === true));
+                    setRenderPagination(false);
+                  } else {
+                    setSearchData(data);
+                    setRenderPagination(true);
+                  }
+                }}
+              >
                 <SelectTrigger className="w-[180px]">
                   <SelectValue placeholder="Both" />
                 </SelectTrigger>
@@ -264,7 +283,7 @@ export default function StorePage(): JSX.Element {
         </div>
 
         {renderPagination && (
-          <div className="relative mt-3">
+          <div className="relative my-3">
             <PaginatorComponent
               storeComponent={true}
               pageIndex={index}