🔧 Update docker-compose for better port management

docker-compose.yml

@@ -20,7 +20,7 @@ services:
       context : ./frontend
       dockerfile : Dockerfile
     ports:
-      - "3000:3000"
+      - "3001:3000"
     volumes:
       - './frontend/src:/app/src'
       - './frontend/public:/app/public'

frontend/src/components/Nodes/Custom.js

@@ -15,7 +15,7 @@ import { useSpring, animated } from 'react-spring'
 const MINIMUM_HEIGHT = 600;
 const MINIMUM_WIDTH = 540; 
 
-export default function CustomNodeIframe({id, data}){
+export default function CustomNodeIframe({id, data, handleAddEmbed}){
     const [collapsed, setCollapsible] = useState(true)
     const [{width, height}, api] = useSpring(() => ({width: MINIMUM_WIDTH, height: MINIMUM_HEIGHT }))
     const [sizeAdjuster, setSizeAdjuster] = useState(false)
@@ -106,3 +106,4 @@ const addIframeNode = () => {
         }
       </div>)
 }
+

frontend/src/components/ReactFlow/ReactFlowEnv.js

@@ -1,3 +1,4 @@
+import Custom from "../Nodes/Custom.js";
 import CustomNodeIframe from "../Nodes/Custom.js";
 import '../../css/dist/output.css'
 import ReactFlow, { Background,
@@ -73,15 +74,16 @@ export default function ReactEnviorment() {
       setNodes((nds) => nds.concat(newNode));
     };
 
-    const handleAddEmbed = useCallback((embedData) => {
-      const newNode = {
-        id: `embed-${nodes.length + 1}`,
-        type: 'embed',
-        position: reactFlowInstance.project({ x: 0, y: 0 }), // Adjust position as needed
-        data: { url: embedData.url, width: embedData.width || '100%', height: embedData.height || '400px' },
-      };
-      setNodes((nds) => nds.concat(newNode));
-    }, [nodes, reactFlowInstance]);
+  const handleAddEmbed = useCallback((embedData) => {
+    const newNode = {
+      id: `embed-${nodes.length + 1}`,
+      type: 'embed',
+      position: reactFlowInstance.project({ x: 0, y: 0 }), // Adjust position as needed
+      data: { url: embedData.url, width: embedData.width || '100%', height: embedData.height || '400px' },
+    };
+    setNodes((nds) => nds.concat(newNode));
+    console.log(`Adding embed with URL: ${embedData.url} and Label: ${embedData.label}`);
+  }, [nodes, reactFlowInstance]);
 
     const onNodesChange = useCallback(
       (changes) => setNodes((nds) => applyNodeChanges(changes, nds)),