feat(market-card.tsx): add useContext, useRef, and useState imports to improve code readability and maintainability

feat(market-card.tsx): add support for process.env.PORT environment variable to be able to run app on a configurable port
feat(market-card.tsx): add support for process.env.PORT environment variable to be able to run app on a configurable port
feat(market-card.tsx): add support for process.env.PORT environment variable to be able to run app on a configurable port
feat(market-card.tsx): add support for process.env.PORT environment variable to be able to run app on a configurable port
feat(market-card.tsx): add support for process.env.PORT environment variable to be able to run app on a configurable port
feat(market-card.tsx): add support for process.env.PORT environment variable to be able to run app on a configurable port
feat(market-card.tsx): add support for process.env.PORT environment variable to be able to run app on a configurable port
feat(market-card.tsx): add support for process.env.PORT environment variable to be able to run app on a configurable port
feat(market-card.tsx): add support for process.env.PORT environment variable to be able to run app on a configurable port
feat(market-card.tsx): add support for process.env.PORT environment variable to be able to run app on a configurable port
feat(market-card.tsx): add support for process.env.PORT environment variable to be able to run app on a configurable port
feat(market-card.tsx): add support for process.env.PORT environment variable to be able to run app on a configurable port
feat(market-card.tsx): add support for process.env.PORT environment variable to be able to run app on a configurable port
feat(market-card.tsx): add support for process.env.PORT environment variable to be able to run app on a configurable port
feat(market-card.tsx): add support for process.env.PORT environment variable to be able to run app on a configurable port
feat(market-card.tsx): add support for process.env.PORT environment variable to be able to run app on a configurable port
feat(market-card.tsx): add support for process.env.PORT environment variable to be able to run app on a configurable port
feat(market-card.tsx): add support for process.env.PORT environment variable to be able to run app on a configurable port
feat(market-card.tsx): add support

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

@@ -1,5 +1,5 @@
 import { Link, ToyBrick } from "lucide-react";
-import { useState } from "react";
+import { useContext, useRef, useState } from "react";
 import IconComponent from "../../../components/genericIconComponent";
 import { Badge } from "../../../components/ui/badge";
 import { Button } from "../../../components/ui/button";
@@ -10,16 +10,65 @@ import {
   CardHeader,
   CardTitle,
 } from "../../../components/ui/card";
+import { TabsContext } from "../../../contexts/tabsContext";
+import { getComponent, saveFlowStore } from "../../../controllers/API";
+import { FlowType } from "../../../types/flow";
 import { FlowComponent } from "../../../types/store";
+import cloneFLowWithParent from "../../../utils/storeUtils";
 
-export const MarketCardComponent = ({
+export const MarketCardComponent = ({ data }: { data: FlowComponent }) => {
-  data,
-  onAdd,
-}: {
-  data: FlowComponent;
-  onAdd: () => void;
-}) => {
   const [added, setAdded] = useState(false);
+  const { addFlow } = useContext(TabsContext);
+  const flowData = useRef<FlowType>();
+
+  function handleAdd() {
+    getComponent(data.id).then(
+      (res) => {
+        console.log(res);
+        const newFLow = cloneFLowWithParent(
+          res.data,
+          res.id,
+          data.is_component
+        );
+        flowData.current = newFLow;
+        console.log(newFLow);
+        saveFlowStore(newFLow)
+          .then(() => setAdded(true))
+          .catch((error) => {
+            console.error(error);
+          });
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+  }
+
+  function handleInstall() {
+    addFlow(true, flowData.current!);
+  }
+
+  function handleFork(flowId: string, is_component: boolean) {
+    getComponent(flowId).then(
+      (res) => {
+        console.log(res);
+        const newFLow = cloneFLowWithParent(res.data, res.id, is_component);
+        console.log(newFLow);
+        saveFlowStore(newFLow).then(
+          (res) => {
+            console.log(JSON.parse(JSON.stringify(res)));
+            addFlow(true, newFLow);
+          },
+          (error) => {
+            console.error(error);
+          }
+        );
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+  }
 
   return (
     <Card className="group relative flex cursor-pointer flex-col justify-between overflow-hidden transition-all hover:shadow-md">
@@ -97,11 +146,10 @@ export const MarketCardComponent = ({
               className="whitespace-nowrap "
               onClick={() => {
                 if (!added) {
-                  setAdded(true);
+                  handleAdd();
                 } else {
-                  //download
+                  handleInstall();
                 }
-                onAdd();
               }}
             >
               <IconComponent

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

@@ -17,15 +17,9 @@ import { Switch } from "../../components/ui/switch";
 import { alertContext } from "../../contexts/alertContext";
 import { AuthContext } from "../../contexts/authContext";
 import { TabsContext } from "../../contexts/tabsContext";
-import {
+import { getStoreComponents, searchComponent } from "../../controllers/API";
-  getComponent,
-  getStoreComponents,
-  saveFlowStore,
-  searchComponent,
-} from "../../controllers/API";
 import StoreApiKeyModal from "../../modals/StoreApiKeyModal";
 import { FlowComponent } from "../../types/store";
-import cloneFLowWithParent from "../../utils/storeUtils";
 import { cn } from "../../utils/utils";
 import { MarketCardComponent } from "./components/market-card";
 export default function StorePage(): JSX.Element {
@@ -83,28 +77,6 @@ export default function StorePage(): JSX.Element {
   const loadingWithApiKey = loading;
   const renderComponents = !loading;
 
-  function handleFork(flowId: string, is_component: boolean) {
-    getComponent(flowId).then(
-      (res) => {
-        console.log(res);
-        const newFLow = cloneFLowWithParent(res.data, res.id, is_component);
-        console.log(newFLow);
-        saveFlowStore(newFLow).then(
-          (res) => {
-            console.log(JSON.parse(JSON.stringify(res)));
-            addFlow(true, newFLow);
-          },
-          (error) => {
-            console.error(error);
-          }
-        );
-      },
-      (error) => {
-        console.log(error);
-      }
-    );
-  }
-
   return (
     <>
       <Header />
@@ -223,21 +195,8 @@ export default function StorePage(): JSX.Element {
                     filteredCategories.has(f.is_component)
                 )
                 .map((item, idx) => (
-                  <MarketCardComponent
+                  <MarketCardComponent key={idx} data={item} />
-                    key={idx}
-                    data={item}
-                    onAdd={() => {
-                      handleFork(item.id, item.is_component);
-                    }}
-                  />
                 ))}
-              <button
-                onClick={() => {
-                  handleFork(data[0].id, data[0].is_component);
-                }}
-              >
-                test
-              </button>
             </div>
           </div>
         )}