From 13a60c872f01e34664c13a6e1a9b2155c12d78df Mon Sep 17 00:00:00 2001
From: igorrCarvalho <igorsilvabhz6@gmail.com>
Date: Wed, 23 Aug 2023 19:26:25 -0300
Subject: [PATCH] Fix: Node deleted when press backspace on tweaks page

---
 .../src/components/codeTabsComponent/index.tsx     | 12 ++++++++++++
 src/frontend/src/types/utils/reactflowUtils.ts     |  7 ++++++-
 src/frontend/src/utils/reactflowUtils.ts           | 14 +++++++++++++-
 3 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/components/codeTabsComponent/index.tsx b/src/frontend/src/components/codeTabsComponent/index.tsx
index 25fe48a8f..cdb2ec0ed 100644
--- a/src/frontend/src/components/codeTabsComponent/index.tsx
+++ b/src/frontend/src/components/codeTabsComponent/index.tsx
@@ -32,6 +32,8 @@ import { darkContext } from "../../contexts/darkContext";
 import { codeTabsPropsType } from "../../types/components";
 import { classNames } from "../../utils/utils";
 import IconComponent from "../genericIconComponent";
+import { unselectAllNodes } from "../../utils/reactflowUtils";
+import { typesContext } from "../../contexts/typesContext";
 
 export default function CodeTabsComponent({
   flow,
@@ -45,12 +47,22 @@ export default function CodeTabsComponent({
   const [data, setData] = useState(flow ? flow["data"]!["nodes"] : null);
   const [openAccordion, setOpenAccordion] = useState<string[]>([]);
   const { dark } = useContext(darkContext);
+  const { reactFlowInstance } = useContext(typesContext);
 
   useEffect(() => {
     if (flow && flow["data"]!["nodes"]) {
       setData(flow["data"]!["nodes"]);
     }
   }, [flow]);
+  
+  useEffect(() => {
+    unselectAllNodes({
+      data,
+      updateNodes: (nodes) => {
+        reactFlowInstance?.setNodes(nodes);
+      }
+    });
+  }, [])
 
   const copyToClipboard = () => {
     if (!navigator.clipboard || !navigator.clipboard.writeText) {
diff --git a/src/frontend/src/types/utils/reactflowUtils.ts b/src/frontend/src/types/utils/reactflowUtils.ts
index ecbbda4e4..6ec40512d 100644
--- a/src/frontend/src/types/utils/reactflowUtils.ts
+++ b/src/frontend/src/types/utils/reactflowUtils.ts
@@ -1,4 +1,4 @@
-import { Edge } from "reactflow";
+import { Edge, Node } from "reactflow";
 import { NodeType } from "../flow";
 
 export type cleanEdgesType = {
@@ -8,3 +8,8 @@ export type cleanEdgesType = {
   };
   updateEdge: (edge: Edge[]) => void;
 };
+
+export type unselectAllNodesType = {
+  updateNodes: (nodes: Node[]) => void,
+  data: Node[] | null
+};
diff --git a/src/frontend/src/utils/reactflowUtils.ts b/src/frontend/src/utils/reactflowUtils.ts
index 1d74d14fe..999f45ecb 100644
--- a/src/frontend/src/utils/reactflowUtils.ts
+++ b/src/frontend/src/utils/reactflowUtils.ts
@@ -2,14 +2,18 @@ import _ from "lodash";
 import {
   Connection,
   Edge,
+  Node,
   ReactFlowInstance,
   ReactFlowJsonObject,
+  useNodesState,
 } from "reactflow";
 import { specialCharsRegex } from "../constants/constants";
 import { APITemplateType } from "../types/api";
 import { FlowType, NodeType } from "../types/flow";
-import { cleanEdgesType } from "../types/utils/reactflowUtils";
+import { cleanEdgesType, unselectAllNodesType } from "../types/utils/reactflowUtils";
 import { toNormalCase } from "./utils";
+import { useContext } from "react";
+import { typesContext } from "../contexts/typesContext";
 
 export function cleanEdges({
   flow: { edges, nodes },
@@ -55,6 +59,14 @@ export function cleanEdges({
   updateEdge(newEdges);
 }
 
+export function unselectAllNodes({ updateNodes, data }: unselectAllNodesType) {
+  let newNodes = _.cloneDeep(data);
+  newNodes!.forEach((node: Node) => {
+    node.selected = false;
+  });
+  updateNodes(newNodes!);
+}
+
 export function isValidConnection(
   { source, target, sourceHandle, targetHandle }: Connection,
   reactFlowInstance: ReactFlowInstance