From 7a9b972fb54ddeae10356d24164e6ddfbdd814a1 Mon Sep 17 00:00:00 2001
From: cristhianzl <cristhian.lousa@gmail.com>
Date: Tue, 31 Oct 2023 20:08:27 -0300
Subject: [PATCH] feat(API): add support for filtering store components by
 is_component flag in getStoreComponents function

feat(StorePage): add support for filtering components by type (Flow or Component) in handleGetComponents and handleChangePagination functions
---
 src/frontend/src/controllers/API/index.ts  | 26 ++++++++++++++++++----
 src/frontend/src/pages/StorePage/index.tsx | 18 ++++++++-------
 2 files changed, 32 insertions(+), 12 deletions(-)

diff --git a/src/frontend/src/controllers/API/index.ts b/src/frontend/src/controllers/API/index.ts
index cdb659164..238451647 100644
--- a/src/frontend/src/controllers/API/index.ts
+++ b/src/frontend/src/controllers/API/index.ts
@@ -589,11 +589,29 @@ export async function getFlowsStore(): Promise<AxiosResponse<FlowType[]>> {
   return await api.get(`${BASE_URL_API}store/`);
 }
 
-export async function getStoreComponents(page: number = 1, limit: number = 10) {
+export async function getStoreComponents(
+  page: number = 1,
+  limit: number = 10,
+  is_component?: boolean | null
+) {
   try {
-    const res = await api.get(
-      `${BASE_URL_API}store/components/?page=${page}&limit=${limit}`
-    );
+    let url = `${BASE_URL_API}store/components/`;
+    const queryParams: any = [];
+    if (page !== undefined) {
+      queryParams.push(`page=${page}`);
+    }
+    if (limit !== undefined) {
+      queryParams.push(`limit=${limit}`);
+    }
+    if (is_component !== null && is_component !== undefined) {
+      queryParams.push(`is_component=${is_component}`);
+    }
+    if (queryParams.length > 0) {
+      url += `?${queryParams.join("&")}`;
+    }
+
+    const res = await api.get(url);
+
     if (res.status === 200) {
       return res.data;
     }
diff --git a/src/frontend/src/pages/StorePage/index.tsx b/src/frontend/src/pages/StorePage/index.tsx
index 2aabb7f7d..82d862e96 100644
--- a/src/frontend/src/pages/StorePage/index.tsx
+++ b/src/frontend/src/pages/StorePage/index.tsx
@@ -49,6 +49,7 @@ export default function StorePage(): JSX.Element {
   const [tags, setTags] = useState<{ id: string; name: string }[]>([]);
   const tagListId = useRef<{ id: string; name: string }[]>([]);
   const [renderPagination, setRenderPagination] = useState(false);
+  const filterComponent = useRef<boolean | null>(null);
 
   useEffect(() => {
     getStoreTags().then((res) => {
@@ -82,7 +83,8 @@ export default function StorePage(): JSX.Element {
   const handleGetComponents = () => {
     setLoading(true);
     setRenderPagination(true);
-    getStoreComponents(index - 1, size)
+
+    getStoreComponents(index - 1, size, filterComponent.current)
       .then((res) => {
         setSearchData(res);
         setData(res);
@@ -121,7 +123,7 @@ export default function StorePage(): JSX.Element {
   function handleChangePagination(pageIndex: number, pageSize: number) {
     setLoading(true);
     setRenderPagination(true);
-    getStoreComponents(pageIndex, pageSize)
+    getStoreComponents(pageIndex, pageSize, filterComponent.current)
       .then((res) => {
         setData(res);
         setSearchData(res);
@@ -218,15 +220,15 @@ export default function StorePage(): JSX.Element {
               <Select
                 onValueChange={(value) => {
                   if (value === "Flow") {
-                    setSearchData(data.filter((f) => f.is_component === false));
-                    setRenderPagination(false);
+                    filterComponent.current = false;
                   } else if (value === "Component") {
-                    setSearchData(data.filter((f) => f.is_component === true));
-                    setRenderPagination(false);
+                    filterComponent.current = true;
                   } else {
-                    setSearchData(data);
-                    setRenderPagination(true);
+                    filterComponent.current = null;
                   }
+                  setPageIndex(1);
+                  setPageSize(10);
+                  handleGetComponents();
                 }}
               >
                 <SelectTrigger className="w-[180px]">