Removed unused API callouts and get saved components transplanted into context

src/frontend/src/contexts/storeContext.tsx

@@ -1,5 +1,9 @@
 import { createContext, useEffect, useState } from "react";
-import { checkHasApiKey, checkHasStore } from "../controllers/API";
+import {
+  checkHasApiKey,
+  checkHasStore,
+  getStoreComponents,
+} from "../controllers/API";
 import { storeContextType } from "../types/contexts/store";
 
 //store context to share user components and update them
@@ -10,6 +14,9 @@ const initialValue = {
   setHasStore: () => {},
   hasApiKey: false,
   setHasApiKey: () => {},
+  getSavedComponents: () => {},
+  errorApiKey: false,
+  loadingSaved: false,
 };
 
 export const StoreContext = createContext<storeContextType>(initialValue);
@@ -20,6 +27,8 @@ export function StoreProvider({ children }) {
   const [hasStore, setHasStore] = useState(true);
   const [hasApiKey, setHasApiKey] = useState(false);
   const [storeChecked, setStoreChecked] = useState(false);
+  const [loadingSaved, setLoadingSaved] = useState(false);
+  const [errorApiKey, setErrorApiKey] = useState(false);
 
   useEffect(() => {
     const fetchStoreData = async () => {
@@ -34,8 +43,33 @@ export function StoreProvider({ children }) {
     };
 
     fetchStoreData();
+    getSavedComponents();
   }, []);
 
+  function getSavedComponents() {
+    setLoadingSaved(true);
+    getStoreComponents(null, null, null, null, null, true)
+      .then((data) => {
+        if (data?.authorized === false) {
+          setErrorApiKey(true);
+          setSavedFlows(new Set<string>());
+        } else {
+          let savedIds = new Set<string>();
+          let results = data?.results ?? [];
+          results.forEach((flow) => {
+            savedIds.add(flow.id);
+          });
+          setSavedFlows(savedIds);
+          setErrorApiKey(false);
+          setLoadingSaved(false);
+        }
+      })
+      .catch((err) => {
+        setSavedFlows(new Set<string>());
+        setErrorApiKey(true);
+      });
+  }
+
   useEffect(() => {
     const fetchStoreData = async () => {
       try {
@@ -59,6 +93,9 @@ export function StoreProvider({ children }) {
         setHasStore,
         hasApiKey,
         setHasApiKey,
+        getSavedComponents,
+        errorApiKey,
+        loadingSaved,
       }}
     >
       {children}

src/frontend/src/controllers/API/index.ts

@@ -591,8 +591,8 @@ export async function getFlowsStore(): Promise<AxiosResponse<FlowType[]>> {
 }
 
 export async function getStoreComponents(
-  page: number = 1,
+  page?: number | null,
-  limit: number = 10,
+  limit?: number | null,
   is_component?: boolean | null,
   sort?: string | null,
   tags?: string[] | null,
@@ -624,10 +624,10 @@ export async function getStoreComponents(
     }
 
     if (page !== undefined) {
-      queryParams.push(`page=${page}`);
+      queryParams.push(`page=${page ?? 1}`);
     }
     if (limit !== undefined) {
-      queryParams.push(`limit=${limit}`);
+      queryParams.push(`limit=${limit ?? 9999999}`);
     }
     if (is_component !== null && is_component !== undefined) {
       queryParams.push(`is_component=${is_component}`);
@@ -647,22 +647,6 @@ export async function getStoreComponents(
   }
 }
 
-export async function getStoreSavedComponents(): Promise<
-  StoreComponentResponse | undefined
-> {
-  try {
-    const res = await api.get(
-      `${BASE_URL_API}store/components/?filter_by_user=true`
-    );
-    if (res.status === 200) {
-      return res.data;
-    }
-  } catch (error) {
-    console.log("Error:", error);
-    throw error;
-  }
-}
-
 export async function postStoreComponents(component: Component) {
   try {
     const res = await api.post(`${BASE_URL_API}store/components/`, component);

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

@@ -1,17 +1,13 @@
 import { useContext, useEffect, useState } from "react";
 import CardsWrapComponent from "../../../../components/cardsWrapComponent";
 import { alertContext } from "../../../../contexts/alertContext";
-import {
+import { getStoreComponents } from "../../../../controllers/API";
-  getStoreComponents,
-  getStoreSavedComponents,
-} from "../../../../controllers/API";
 import { storeComponent } from "../../../../types/store";
 import { MarketCardComponent } from "../../../StorePage/components/market-card";
 
 export default function AddedComponents(): JSX.Element {
   const [data, setData] = useState<storeComponent[]>([]);
   const [loading, setLoading] = useState(false);
-  const [filteredCategories, setFilteredCategories] = useState(new Set());
   const { setErrorData } = useContext(alertContext);
 
   useEffect(() => {
@@ -20,11 +16,13 @@ export default function AddedComponents(): JSX.Element {
 
   const handleGetComponents = () => {
     setLoading(true);
-    getStoreComponents(0, 10000)
+    getStoreComponents(null, null, true, "name", null, true)
       .then((res) => {
-        handleAddedOnly(res);
+        setLoading(false);
+        setData(res?.results ?? []);
       })
       .catch((err) => {
+        setData([]);
         setLoading(false);
         setErrorData({
           title: "Error to get components.",
@@ -33,34 +31,11 @@ export default function AddedComponents(): JSX.Element {
       });
   };
 
-  function handleAddedOnly(components: storeComponent[]) {
-    getStoreSavedComponents()
-      .then((res) => {
-        const idSet = new Set(res.map((item) => item.id));
-        const filteredArray = components.filter((item) => idSet.has(item.id));
-        setData(filteredArray);
-        setLoading(false);
-      })
-      .catch((err) => {
-        setLoading(false);
-        setErrorData({
-          title: "Error to get components.",
-          list: [err["response"]["data"]["detail"]],
-        });
-      });
-  }
-
   return (
     <CardsWrapComponent isLoading={loading}>
-      {data
+      {data.map((item, idx) => (
-        .filter(
+        <MarketCardComponent key={idx} data={item} />
-          (f) =>
+      ))}
-            Array.from(filteredCategories).length === 0 ||
-            filteredCategories.has(f.is_component)
-        )
-        .map((item, idx) => (
-          <MarketCardComponent key={idx} data={item} />
-        ))}
     </CardsWrapComponent>
   );
 }

src/frontend/src/pages/StorePage/components/market-card.tsx

@@ -25,11 +25,11 @@ import { classNames } from "../../../utils/utils";
 
 export const MarketCardComponent = ({
   data,
-  authorized,
+  authorized = true,
   disabled = false,
 }: {
   data: storeComponent;
-  authorized: boolean;
+  authorized?: boolean;
   disabled?: boolean;
 }) => {
   const { savedFlows } = useContext(StoreContext);

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

@@ -17,11 +17,7 @@ import {
 import { alertContext } from "../../contexts/alertContext";
 import { StoreContext } from "../../contexts/storeContext";
 import { TabsContext } from "../../contexts/tabsContext";
-import {
+import { getStoreComponents, getStoreTags } from "../../controllers/API";
-  getStoreComponents,
-  getStoreSavedComponents,
-  getStoreTags,
-} from "../../controllers/API";
 import StoreApiKeyModal from "../../modals/StoreApiKeyModal";
 import { storeComponent } from "../../types/store";
 import { cn } from "../../utils/utils";
@@ -31,11 +27,11 @@ export default function StorePage(): JSX.Element {
   useEffect(() => {
     setTabId("");
   }, []);
-  const { setSavedFlows, hasApiKey } = useContext(StoreContext);
+  const { getSavedComponents, loadingSaved, errorApiKey, hasApiKey } =
+    useContext(StoreContext);
   const { setErrorData } = useContext(alertContext);
   const [loading, setLoading] = useState(true);
   const [loadingTags, setLoadingTags] = useState(true);
-  const [loadingSaved, setLoadingSaved] = useState(false);
   const [filteredCategories, setFilterCategories] = useState<any[]>([]);
   const [inputText, setInputText] = useState<string>("");
   const [searchData, setSearchData] = useState<storeComponent[]>([]);
@@ -43,13 +39,11 @@ export default function StorePage(): JSX.Element {
   const [pageSize, setPageSize] = useState(12);
   const [pageIndex, setPageIndex] = useState(1);
   const [pageOrder, setPageOrder] = useState("Popular");
-  const [errorApiKey, setErrorApiKey] = useState(false);
   const [tags, setTags] = useState<{ id: string; name: string }[]>([]);
   const [tabActive, setTabActive] = useState("Flows");
   const [searchText, setSearchText] = useState("");
 
   useEffect(() => {
-    handleGetSavedComponents();
     handleGetTags();
   }, []);
 
@@ -72,30 +66,6 @@ export default function StorePage(): JSX.Element {
     });
   }
 
-  function handleGetSavedComponents() {
-    setLoadingSaved(true);
-    getStoreSavedComponents()
-      .then((data) => {
-        if (data?.authorized === false) {
-          setErrorApiKey(true);
-          setSavedFlows(new Set<string>());
-        } else {
-          let savedIds = new Set<string>();
-          let results = data?.results ?? [];
-          results.forEach((flow) => {
-            savedIds.add(flow.id);
-          });
-          setSavedFlows(savedIds);
-          setErrorApiKey(false);
-          setLoadingSaved(false);
-        }
-      })
-      .catch((err) => {
-        setSavedFlows(new Set<string>());
-        setErrorApiKey(true);
-      });
-  }
-
   const handleGetComponents = () => {
     setLoading(true);
     getStoreComponents(
@@ -112,7 +82,6 @@ export default function StorePage(): JSX.Element {
         setLoading(false);
         setSearchData(res?.results ?? []);
         setTotalRowsCount(Number(res?.count ?? 0));
-        setErrorApiKey(true);
       })
       .catch((err) => {
         setSearchData([]);
@@ -151,7 +120,7 @@ export default function StorePage(): JSX.Element {
             <div className="community-page-nav-button">
               <StoreApiKeyModal
                 onCloseModal={() => {
-                  handleGetSavedComponents();
+                  getSavedComponents();
                   handleGetTags();
                   handleGetComponents();
                 }}

src/frontend/src/types/contexts/store.ts

@@ -5,4 +5,7 @@ export type storeContextType = {
   hasStore: boolean;
   setHasApiKey: (key: boolean) => void;
   hasApiKey: boolean;
+  getSavedComponents: () => void;
+  errorApiKey: boolean;
+  loadingSaved: boolean;
 };