fix(typesContext.tsx): import the missing removeCountFromString function from utils/utils to fix a reference error

fix(typesContext.tsx): update the display name of the component node to remove the count and add the increment value
fix(typesContext.tsx): clone the component node before assigning it to newData to prevent reference error
fix(extraSidebarComponent/index.tsx): import the missing removeCountFromString function from utils/utils to fix a reference error
fix(extraSidebarComponent/index.tsx): update the type of the dragged item to remove the count from the name
feat(utils.ts): add removeCountFromString function to remove the count from a string

src/frontend/src/contexts/typesContext.tsx

@@ -12,7 +12,11 @@ import { APIKindType } from "../types/api";
 import { localStorageUserType } from "../types/entities";
 import { NodeDataType } from "../types/flow";
 import { typesContextType } from "../types/typesContext";
-import { checkLocalStorageKey, IncrementObjectKey } from "../utils/utils";
+import {
+  checkLocalStorageKey,
+  IncrementObjectKey,
+  removeCountFromString,
+} from "../utils/utils";
 import { alertContext } from "./alertContext";
 import { AuthContext } from "./authContext";
 
@@ -129,20 +133,27 @@ export function TypesProvider({ children }: { children: ReactNode }) {
     }
     let components = savedComponentsJSON.components;
     let key = component.type;
-    if (components[key] !== undefined) {
-      const { newKey, increment } = IncrementObjectKey(components, key);
+    if (data["custom_components"][key] !== undefined) {
+      const { newKey, increment } = IncrementObjectKey(
+        data["custom_components"],
+        key
+      );
       key = newKey;
+      console.log(component.node?.display_name);
+      component.node!.display_name =
+        removeCountFromString(component.node?.display_name!) +
+        ` (${increment})`;
     }
     components[key] = component;
     savedComponentsJSON.components = components;
     localStorage.setItem(id, JSON.stringify(savedComponentsJSON));
     setData((prev) => {
       let newData = { ...prev };
-      newData["custom_components"][key] = component.node;
+      //clone to prevent reference erro
+      newData["custom_components"][key] = _.cloneDeep(component.node);
       return newData;
     });
   }
-
   return (
     <typesContext.Provider
       value={{

src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx

@@ -15,7 +15,7 @@ import {
   nodeIconsLucide,
   nodeNames,
 } from "../../../../utils/styleUtils";
-import { classNames } from "../../../../utils/utils";
+import { classNames, removeCountFromString } from "../../../../utils/utils";
 import DisclosureComponent from "../DisclosureComponent";
 
 export default function ExtraSidebar(): JSX.Element {
@@ -242,7 +242,7 @@ export default function ExtraSidebar(): JSX.Element {
                         side="right"
                         key={index}
                       >
-                        <div key={index} data-tooltip-id={SBItemName}>
+                        <div key={SBItemName} data-tooltip-id={SBItemName}>
                           <div
                             draggable={!data[SBSectionName][SBItemName].error}
                             className={
@@ -257,7 +257,8 @@ export default function ExtraSidebar(): JSX.Element {
                             }}
                             onDragStart={(event) =>
                               onDragStart(event, {
-                                type: SBItemName,
+                                //split type to remove type in nodes saved with same name removing it's
+                                type: removeCountFromString(SBItemName),
                                 node: data[SBSectionName][SBItemName],
                               })
                             }

src/frontend/src/utils/utils.ts

@@ -535,10 +535,21 @@ export function IncrementObjectKey(
   key: string
 ): { newKey: string; increment: number } {
   let count = 1;
-  let newKey = key;
+  const type = removeCountFromString(key);
+  let newKey = type + " " + `(${count})`;
   while (object[newKey]) {
-    newKey = key + " " + `(${count})`;
     count++;
+    newKey = type + " " + `(${count})`;
   }
   return { newKey, increment: count };
 }
+
+export function removeCountFromString(input: string): string {
+  // Define a regex pattern to match the count in parentheses
+  const pattern = /\s*\(\d+\)\s*$/;
+
+  // Use the `replace` method to remove the matched pattern
+  const result = input.replace(pattern, "");
+
+  return result.trim(); // Trim any leading/trailing spaces
+}