changed API rate limit to function to return promise, addressed the c…

…omments

plugins/packs-integrations.js

@@ -157,7 +157,7 @@ function generateRoutes(packDataMap, packsData) {
 
 async function fetchPackListItems(queryParams, packDataArr, counter) {
   const payload = { filter: { type: ["spectro", "oci"] } };
-  const response = await callRateLimitAPI("/v1/packs/search" + queryParams, 'post', payload);
+  const response = await callRateLimitAPI(() => api.post(`/v1/packs/search${queryParams}`, payload));
   const tempPackArr = packDataArr.concat(response?.data?.items);
   if (response?.data?.listmeta?.continue) {
     return fetchPackListItems("?limit=100&continue=" + response.data.listmeta.continue, tempPackArr, counter);
@@ -208,7 +208,7 @@ async function pluginPacksAndIntegrationsData(context, options) {
         packMDMap[packData.spec.name] = packData;
         const cloudType = packData.spec.cloudTypes.includes("all") ? "aws" : packData.spec.cloudTypes[0];
         const url = `${packUrl}${packData.spec.name}/registries/${packData.spec.registries[0].uid}?cloudType=${cloudType}&layer=${packData.spec.layer}`;
-        return callRateLimitAPI(url, 'get', {});
+        return callRateLimitAPI(() => api.get(url));
       });
       const results = await Promise.allSettled(promises);
       apiPacksData = results.filter(result => result.status === "fulfilled" && result.value?.data).map((pack) => pack.value?.data);

src/components/Technologies/CategorySelector/FilterSelect.tsx

@@ -1,21 +1,24 @@
 import React from "react";
-import { Select } from "antd";
+import { Select, SelectProps } from "antd";
 import filterStyles from "./CategorySelector.module.scss";
+
 interface FilterSelectProps {
-  selectMode?: string;
+  selectMode?: SelectProps["mode"];
   options: { value: string, label: string }[];
   onChange: (...args: any) => void;
+  value: SelectProps["value"];
 };
 
-export default function FilterSelect({ selectMode, options, onChange }: FilterSelectProps) {
+export default function FilterSelect({ selectMode, options, onChange, value }: FilterSelectProps) {
   return (
     <div className={filterStyles.wrapper}>
       <Select
         className={filterStyles.selectBox}
         mode={selectMode as "tags" | "multiple" | undefined}
         allowClear={true}
         placeholder="Search"
-        onChange={(item: any) => onChange(item)}
+        onChange={onChange}
+        value={value}
       >
         {options.map((item) => {
           return (

src/components/Technologies/PacksFilters.tsx

@@ -1,18 +1,17 @@
 import React from "react";
 import styles from "./PackFilters.module.scss";
-import filterStyles from "./CategorySelector/CategorySelector.module.scss";
 import CustomLabel from "./CategorySelector/CustomLabel";
 import AdditionalFilters from "./CategorySelector/AdditionalFilters";
 import FilterSelect from "./CategorySelector/FilterSelect";
 import { packTypeNames, cloudProviderTypes } from "../../constants/packs";
-import { Select } from "antd";
 interface PackFiltersProps {
   categories: string[];
   registries: any[];
   setSelectedSearchFilters: (...args: any[]) => void;
+  selectedFilters: any;
 }
 
-export default function PacksFilters({ categories, registries, setSelectedSearchFilters }: PackFiltersProps) {
+export default function PacksFilters({ categories, registries, setSelectedSearchFilters, selectedFilters }: PackFiltersProps) {
   const additionalFiltersProps: string[] = [
     "verified", "community"
   ];
@@ -28,11 +27,12 @@ export default function PacksFilters({ categories, registries, setSelectedSearch
       <div className={styles.filterItems}>
         <CustomLabel label="Type" />
         <FilterSelect
-          selectMode="multiple"
+          selectMode="multiple" // Update the type of selectMode prop
           options={categories.map((category) => {
             return { value: category, label: packTypeNames[category as keyof typeof packTypeNames] };
           })}
           onChange={(items) => setSelectedSearchFilters({ category: items })}
+          value={selectedFilters.category}
         />
       </div>
       <div className={styles.filterItems}>
@@ -43,6 +43,7 @@ export default function PacksFilters({ categories, registries, setSelectedSearch
             return { value: registry.uid, label: registry.name };
           })}
           onChange={(items) => setSelectedSearchFilters({ registries: items })}
+          value={selectedFilters.registries}
         />
       </div>
       <div className={styles.filterItems}>
@@ -52,12 +53,13 @@ export default function PacksFilters({ categories, registries, setSelectedSearch
             return { value: provider.name, label: provider.displayName };
           })}
           onChange={(item) => {
-            if(item) {
+            if (item) {
               setSelectedSearchFilters({ cloudTypes: [item] })
             } else {
               setSelectedSearchFilters({ cloudTypes: [] })
             }
           }}
+          value={selectedFilters.cloudTypes.length ? selectedFilters.cloudTypes[0] : ""}
         />
       </div>
       <div className={styles.filterItems}>

src/components/Technologies/Technologies.tsx

@@ -145,7 +145,7 @@ export default function Technologies({ data, repositories }: TechnologiesProps)
       <ConfigProvider theme={{
         algorithm: isDarkTheme ? darkAlgorithm : defaultAlgorithm,
       }}>
-        <PacksFilters categories={[...packTypes]} registries={repositories} setSelectedSearchFilters={setSelectedSearchFilters} />
+        <PacksFilters categories={[...packTypes]} registries={repositories} setSelectedSearchFilters={setSelectedSearchFilters} selectedFilters={selectedFilters} />
         <Search onSearch={setSearchValue} placeholder={"Search for integration..."} />
         <div className={styles.technologyWrapper}>
           <Collapse defaultActiveKey={Array.from(filteredTechCards.keys()) as string[]} expandIconPosition="end" >

src/services/api/index.js

@@ -34,8 +34,8 @@ axiosRetry(api, {
 });
 
 
-function callRateLimitAPI(url, method, payload) {
-  return limit(() => (api[method](url, payload)).catch(e => e));
+function callRateLimitAPI(delayedApiCall) {
+  return limit(delayedApiCall)
 }
 
 module.exports = { api, callRateLimitAPI };