fix(contexts/index.tsx): move import statement for StoreProvider to the correct position for better organization

fix(contexts/storeContext.tsx): change the type of savedFlows state from an object to a Set to improve data structure
fix(controllers/API/index.ts): add a new function getStoreSavedComponents to fetch saved components from the store
fix(pages/StorePage/components/market-card.tsx): use the savedFlows state from StoreContext to determine if a component is added to the store
fix(pages/StorePage/index.tsx): add a new function getSavedComponents to fetch saved components from the store and update the savedFlows state in StoreContext
fix(types/contexts/store.ts): change the type of savedFlows state in storeContextType from an object to a Set for better data structure

src/frontend/src/contexts/storeContext.tsx

@@ -1,17 +1,16 @@
 import { createContext, useState } from "react";
 import { storeContextType } from "../types/contexts/store";
-import { FlowType } from "../types/flow";
 
 //store context to share user components and update them
 const initialValue = {
-  savedFlows: {},
+  savedFlows: new Set<string>(),
   setSavedFlows: () => {},
 };
 
 export const StoreContext = createContext<storeContextType>(initialValue);
 
 export function StoreProvider({ children }) {
-  const [savedFlows, setSavedFlows] = useState<{ [key: string]: FlowType }>({});
+  const [savedFlows, setSavedFlows] = useState<Set<string>>(new Set());
 
   return (
     <StoreContext.Provider value={{ savedFlows, setSavedFlows }}>

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

@@ -597,6 +597,20 @@ export async function getStoreComponents(page: number = 1, limit: number = 10) {
   }
 }
 
+export async function getStoreSavedComponents() {
+  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/StorePage/components/market-card.tsx

@@ -10,6 +10,7 @@ import {
   CardHeader,
   CardTitle,
 } from "../../../components/ui/card";
+import { StoreContext } from "../../../contexts/storeContext";
 import { TabsContext } from "../../../contexts/tabsContext";
 import { getComponent, saveFlowStore } from "../../../controllers/API";
 import { FlowType } from "../../../types/flow";
@@ -17,7 +18,8 @@ import { FlowComponent } from "../../../types/store";
 import cloneFLowWithParent from "../../../utils/storeUtils";
 
 export const MarketCardComponent = ({ data }: { data: FlowComponent }) => {
-  const [added, setAdded] = useState(false);
+  const { savedFlows } = useContext(StoreContext);
+  const [added, setAdded] = useState(savedFlows.has(data.id) ? true : false);
   const [loading, setLoading] = useState(false);
   const { addFlow } = useContext(TabsContext);
   const flowData = useRef<FlowType>();

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

@@ -16,8 +16,13 @@ import {
 import { Switch } from "../../components/ui/switch";
 import { alertContext } from "../../contexts/alertContext";
 import { AuthContext } from "../../contexts/authContext";
+import { StoreContext } from "../../contexts/storeContext";
 import { TabsContext } from "../../contexts/tabsContext";
-import { getStoreComponents, searchComponent } from "../../controllers/API";
+import {
+  getStoreComponents,
+  getStoreSavedComponents,
+  searchComponent,
+} from "../../controllers/API";
 import StoreApiKeyModal from "../../modals/StoreApiKeyModal";
 import { FlowComponent } from "../../types/store";
 import { cn } from "../../utils/utils";
@@ -39,14 +44,23 @@ export default function StorePage(): JSX.Element {
   const [searchData, setSearchData] = useState(data);
   const [errorApiKey, setErrorApiKey] = useState(false);
   const { setErrorData } = useContext(alertContext);
-  const { addFlow } = useContext(TabsContext);
+  const { setSavedFlows } = useContext(StoreContext);
+
+  async function getSavedComponents() {
+    setLoading(true);
+    const result = await getStoreSavedComponents();
+    let savedIds = new Set<string>();
+    result.forEach((flow) => {
+      savedIds.add(flow.id);
+    });
+    setSavedFlows(savedIds);
+  }
 
   useEffect(() => {
-    handleGetComponents();
+    getSavedComponents().then((_) => handleGetComponents());
   }, []);
 
   const handleGetComponents = () => {
-    setLoading(true);
     getStoreComponents(1, 10)
       .then((res) => {
         setSearchData(res);

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

@@ -1,6 +1,4 @@
-import { FlowType } from "../flow";
-
 export type storeContextType = {
-  savedFlows: { [key: string]: FlowType };
-  setSavedFlows: (newState: { [key: string]: FlowType }) => void;
+  savedFlows: Set<string>;
+  setSavedFlows: (newState: Set<string>) => void;
 };