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

@@ -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(
+    let url = `${BASE_URL_API}store/components/`;
-      `${BASE_URL_API}store/components/?page=${page}&limit=${limit}`
+    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;
     }

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));
+                    filterComponent.current = false;
-                    setRenderPagination(false);
                   } else if (value === "Component") {
-                    setSearchData(data.filter((f) => f.is_component === true));
+                    filterComponent.current = true;
-                    setRenderPagination(false);
                   } else {
-                    setSearchData(data);
+                    filterComponent.current = null;
-                    setRenderPagination(true);
                   }
+                  setPageIndex(1);
+                  setPageSize(10);
+                  handleGetComponents();
                 }}
               >
                 <SelectTrigger className="w-[180px]">