first attempt playground page

src/frontend/src/pages/Playground/index.tsx

@@ -0,0 +1,58 @@
+import { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import useFlowsManagerStore from "../../stores/flowsManagerStore";
+import { getComponent } from "../../controllers/API";
+import cloneFLowWithParent from "../../utils/storeUtils";
+import LoadingComponent from "../../components/loadingComponent";
+import useFlowStore from "../../stores/flowStore";
+import IOModal from "../../modals/IOModal";
+
+export default function PlaygroundPage() {
+    const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
+    const getFlowById = useFlowsManagerStore((state) => state.getFlowById);
+    const setCurrentFlowId = useFlowsManagerStore((state) => state.setCurrentFlowId);
+    const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId);
+    const setCurrentFlow = useFlowsManagerStore((state) => state.setCurrentFlow);
+    const setNodes = useFlowStore((state) => state.setNodes);
+    const setEdges = useFlowStore((state) => state.setEdges);
+    const cleanFlowPool = useFlowStore((state) => state.CleanFlowPool);
+
+    const { id } = useParams();
+    const [loading, setLoading] = useState(true);
+    async function getFlowData() {
+        const res = await getComponent(id!);
+        const newFlow = cloneFLowWithParent(res, res.id, false, true);
+        return newFlow;
+    }
+
+    // Set flow tab id
+    useEffect(() => {
+        if (getFlowById(id!)) {
+            setCurrentFlowId(id!);
+        }
+        else {
+            getFlowData().then((flow) => {
+                setCurrentFlow(flow);
+            });
+        }
+    }, [id]);
+
+    useEffect(() => {
+        if (currentFlow) {
+            setNodes(currentFlow?.data?.nodes ?? [], true);
+            setEdges(currentFlow?.data?.edges ?? [], true);
+            cleanFlowPool();
+            setLoading(false);
+        }
+    }, [currentFlowId]);
+
+
+    return (
+        <div className="w-full h-full flex flex-col align-middle items-center justify-center">
+            {loading ? <div><LoadingComponent remSize={24}></LoadingComponent></div> :
+                <IOModal open={true}setOpen={()=>{}} isPlayground>
+                    <></>
+                </IOModal>}
+        </div>
+    )
+}

src/frontend/src/routes.tsx

@@ -17,6 +17,7 @@ import ViewPage from "./pages/ViewPage";
 import DeleteAccountPage from "./pages/deleteAccountPage";
 import LoginPage from "./pages/loginPage";
 import SignUp from "./pages/signUpPage";
+import PlaygroundPage from "./pages/Playground";
 
 const Router = () => {
   const navigate = useNavigate();
@@ -65,7 +66,13 @@ const Router = () => {
           </ProtectedRoute>
         }
       />
-
+      <Route path="/playground/:id/">
+        element={
+          <Route path="" element={<ProtectedRoute>
+            <PlaygroundPage />
+          </ProtectedRoute>} />
+        }
+      </Route>
       <Route path="/flow/:id/">
         <Route
           path=""