first implementation, working but not stable

src/frontend/src/components/cardComponent/index.tsx

@@ -18,6 +18,8 @@ import {
   CardHeader,
   CardTitle,
 } from "../ui/card";
+import IOModal from "../../modals/IOModal";
+import useFlowStore from "../../stores/flowStore";
 
 export default function CollectionCardComponent({
   data,
@@ -31,7 +33,7 @@ export default function CollectionCardComponent({
   authorized?: boolean;
   disabled?: boolean;
   button?: JSX.Element;
-  playground?:JSX.Element;
+  playground?: boolean;
   onDelete?: () => void;
 }) {
   const addFlow = useFlowsManagerStore((state) => state.addFlow);
@@ -48,9 +50,24 @@ export default function CollectionCardComponent({
   const [downloads_count, setDownloads_count] = useState(
     data?.downloads_count ?? 0
   );
+  const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
+  const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId);
+  const setNodes = useFlowStore((state) => state.setNodes);
+  const setEdges = useFlowStore((state) => state.setEdges);
+  const [openPlayground, setOpenPlayground] = useState(false);
+  const setCurrentFlowId = useFlowsManagerStore((state) => state.setCurrentFlowId);
+
+
 
   const name = data.is_component ? "Component" : "Flow";
 
+  useEffect(() => {
+    if (currentFlowId && playground) {
+      setNodes(currentFlow?.data?.nodes ?? []);
+      setEdges(currentFlow?.data?.edges ?? []);
+    }
+  }, [currentFlowId]);
+
   useEffect(() => {
     if (data) {
       setLiked_by_user(data?.liked_by_user ?? false);
@@ -69,8 +86,7 @@ export default function CollectionCardComponent({
         addFlow(true, newFlow)
           .then((id) => {
             setSuccessData({
-              title: `${name} ${
+              title: `${name} ${isStore ? "Downloaded" : "Installed"
-                isStore ? "Downloaded" : "Installed"
                 } Successfully.`,
             });
             setLoading(false);
@@ -78,8 +94,7 @@ export default function CollectionCardComponent({
           .catch((error) => {
             setLoading(false);
             setErrorData({
-              title: `Error ${
+              title: `Error ${isStore ? "downloading" : "installing"
-                isStore ? "downloading" : "installing"
                 } the ${name}`,
               list: [error["response"]["data"]["detail"]],
             });
@@ -347,7 +362,30 @@ export default function CollectionCardComponent({
               </div>
             )}
             {button && button}
-            {playground && playground}
+            {playground &&
+              <Button
+                tabIndex={-1}
+                variant="outline"
+                size="sm"
+                className="whitespace-nowrap "
+                data-testid={
+                  "playground-flow-button-" + data.id
+                }
+                onClick={() => {
+                  setCurrentFlowId(data.id);
+                  setOpenPlayground(true);
+                }}
+              >
+                <IconComponent
+                  name="ExternalLink"
+                  className="main-page-nav-button select-none"
+                />
+                Playground
+                {openPlayground && < IOModal open={openPlayground} setOpen={setOpenPlayground}>
+                  <></>
+                </IOModal>}
+              </Button>
+            }
           </div>
         </div>
       </CardFooter>

src/frontend/src/modals/IOModal/index.tsx

@@ -78,6 +78,7 @@ export default function IOModal({
   const isBuilding = useFlowStore((state) => state.isBuilding);
   const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
   const setNode = useFlowStore((state) => state.setNode);
+  console.log(nodes)
 
   async function updateVertices() {
     return updateVerticesOrder(currentFlow!.id, null);

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

@@ -14,15 +14,12 @@ import {
 import useAlertStore from "../../../../stores/alertStore";
 import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
 import { FlowType } from "../../../../types/flow";
-import IOModal from "../../../../modals/IOModal";
-
 export default function ComponentsComponent({
   is_component = true,
 }: {
   is_component?: boolean;
 }) {
   const addFlow = useFlowsManagerStore((state) => state.addFlow);
-  const setCurrentFlowId = useFlowsManagerStore((state) => state.setCurrentFlowId);
   const uploadFlow = useFlowsManagerStore((state) => state.uploadFlow);
   const removeFlow = useFlowsManagerStore((state) => state.removeFlow);
   const isLoading = useFlowsManagerStore((state) => state.isLoading);
@@ -33,8 +30,6 @@ export default function ComponentsComponent({
   const [pageSize, setPageSize] = useState(20);
   const [pageIndex, setPageIndex] = useState(1);
   const [loadingScreen, setLoadingScreen] = useState(true);
-  const [openPlayground, setOpenPlayground] = useState(false);
-
   const navigate = useNavigate();
 
   useEffect(() => {
@@ -175,33 +170,7 @@ export default function ComponentsComponent({
                         <></>
                       )
                     }
-                    playground={
+                    playground={!is_component}
-                      !is_component ? (
-                        <IOModal open={openPlayground} setOpen={setOpenPlayground}>
-                          <Button
-                            tabIndex={-1}
-                            variant="outline"
-                            size="sm"
-                            className="whitespace-nowrap "
-                            data-testid={
-                              "playground-flow-button-" + item.id + "-" + idx
-                            }
-                            onClick={() => {
-                              setCurrentFlowId(item.id);
-                              setOpenPlayground(true);
-                            }}
-                          >
-                            <IconComponent
-                              name="ExternalLink"
-                              className="main-page-nav-button select-none"
-                            />
-                            Playground
-                          </Button>
-                        </IOModal>
-                      ) : (
-                        <></>
-                      )
-                    }
                   />
                 ))
               ) : (