fix: data references

services/frontend/src/components/Project/Header.tsx

@@ -1,28 +1,32 @@
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { CallbackFunction, IProject } from "../../types";
 import Spinner from "../global/Spinner";
 import VisibilitySwitch from "../global/VisibilitySwitch";
 
-interface IManifestSelectProps {
+interface IHeaderProps {
   onSave: CallbackFunction;
   isLoading: boolean;
   projectData: IProject;
   isAuthenticated: boolean;
 }
 
-const ManifestSelect = (props: IManifestSelectProps) => {
+const Header = (props: IHeaderProps) => {
   const { onSave, isLoading, projectData, isAuthenticated } = props;
   const [visibility, setVisibility] = useState(false);
   const [projectName, setProjectName] = useState("Untitled");
 
+  const visibilityRef = useRef(false);
+  const projectNameRef = useRef("Untitled");
+
   const handleNameChange = useCallback((e: any) => {
     setProjectName(e.target.value);
+    projectNameRef.current = e.target.value;
   }, []);
 
   const handleSave = useCallback(() => {
     const data: any = {
-      name: projectName,
-      visibility: +visibility
+      name: projectNameRef.current,
+      visibility: +visibilityRef.current
     };
 
     onSave(data);
@@ -35,6 +39,9 @@ const ManifestSelect = (props: IManifestSelectProps) => {
 
     setProjectName(projectData.name);
     setVisibility(Boolean(projectData.visibility));
+
+    visibilityRef.current = Boolean(projectData.visibility);
+    projectNameRef.current = projectData.name;
   }, [projectData]);
 
   return (
@@ -81,6 +88,7 @@ const ManifestSelect = (props: IManifestSelectProps) => {
                 isVisible={visibility}
                 onToggle={() => {
                   setVisibility(!visibility);
+                  visibilityRef.current = !visibility;
                 }}
               />
             )}
@@ -103,4 +111,4 @@ const ManifestSelect = (props: IManifestSelectProps) => {
   );
 };
 
-export default ManifestSelect;
+export default Header;

services/frontend/src/components/Project/index.tsx

@@ -1,7 +1,6 @@
 import { useEffect, useState, useRef } from "react";
 import { useParams } from "react-router-dom";
-import { Dictionary, omit } from "lodash";
-import _ from "lodash";
+import { Dictionary, omit, remove } from "lodash";
 import { GlobeAltIcon, CubeIcon, FolderAddIcon } from "@heroicons/react/solid";
 import {
   IServiceNodeItem,
@@ -135,9 +134,9 @@ export default function Project(props: IProjectProps) {
       data: {
         canvas: {
           position: canvasPosition,
-          nodes: nodes,
-          connections: connections,
-          networks: networks
+          nodes: stateNodesRef.current,
+          connections: stateConnectionsRef.current,
+          networks: stateNetworksRef.current
         }
       }
     };
@@ -279,7 +278,7 @@ export default function Project(props: IProjectProps) {
         dependsOnKeys.forEach((key: string) => {
           if (key === targetServiceName) {
             if (Array.isArray(sourceDependsOn)) {
-              _.remove(sourceDependsOn, (key) => key === targetServiceName);
+              remove(sourceDependsOn, (key) => key === targetServiceName);
             }
 
             if (sourceDependsOn && sourceDependsOn.constructor === Object) {