fix(tabsContext.tsx): remove unused imports and variables to improve code cleanliness

feat(tabsContext.tsx): add saveComponent and deleteComponent functions to TabsContext to handle saving and deleting custom components
fix(typesContext.tsx): remove saveComponent and deleteComponent functions from typesContext as they are now handled in TabsContext
fix(sideBarDraggableComponent/index.tsx): remove unused imports and variables to improve code cleanliness
feat(sideBarDraggableComponent/index.tsx): add deleteComponent function from TabsContext to handle deleting custom components
fix(nodeToolbarComponent/index.tsx): remove unused imports and variables to improve code cleanliness
feat(nodeToolbarComponent/index.tsx): add saveComponent function from TabsContext to handle saving custom components
fix(types/index.ts): import NodeDataType from flow to fix type error in TabsContextType

src/frontend/src/contexts/tabsContext.tsx

@@ -32,13 +32,20 @@ import { TabsContextType, TabsState } from "../types/tabs";
 import {
   addVersionToDuplicates,
   checkOldEdgesHandles,
+  createFlowComponent,
   scapeJSONParse,
   scapedJSONStringfy,
   updateEdgesHandleIds,
   updateIds,
   updateTemplate,
 } from "../utils/reactflowUtils";
-import { getRandomDescription, getRandomName } from "../utils/utils";
+import {
+  IncrementObjectKey,
+  getRandomDescription,
+  getRandomName,
+  getSetFromObject,
+  removeCountFromString,
+} from "../utils/utils";
 import { alertContext } from "./alertContext";
 import { AuthContext } from "./authContext";
 import { typesContext } from "./typesContext";
@@ -73,6 +80,8 @@ const TabsContextInitialValue: TabsContextType = {
     selection: { nodes: any; edges: any },
     position: { x: number; y: number; paneX?: number; paneY?: number }
   ) => {},
+  saveComponent: (component: NodeDataType, id: string) => {},
+  deleteComponent: (id: string, key: string) => {},
 };
 
 export const TabsContext = createContext<TabsContextType>(
@@ -90,7 +99,8 @@ export function TabsProvider({ children }: { children: ReactNode }) {
 
   const [flows, setFlows] = useState<Array<FlowType>>([]);
   const [id, setId] = useState(uid());
-  const { templates, reactFlowInstance, setData } = useContext(typesContext);
+  const { templates, reactFlowInstance, setData, data } =
+    useContext(typesContext);
   const [lastCopiedSelection, setLastCopiedSelection] = useState<{
     nodes: any;
     edges: any;
@@ -647,6 +657,64 @@ export function TabsProvider({ children }: { children: ReactNode }) {
     }
   }
 
+  function saveComponent(component: NodeDataType, id: string) {
+    let key = component.type;
+    if (data["custom_components"][key] !== undefined) {
+      let { newKey, increment } = IncrementObjectKey(
+        data["custom_components"],
+        key
+      );
+      key = newKey;
+      component.type = newKey;
+      let componentNodes: { [key: string]: APIClassType } = {};
+      Object.keys(data["custom_components"]).forEach((key) => {
+        componentNodes[key] = data["custom_components"][key];
+      });
+      const display_nameSet = getSetFromObject(componentNodes, "display_name");
+      if (display_nameSet.has(component.node?.display_name!)) {
+        increment = 1;
+        while (
+          display_nameSet.has(
+            removeCountFromString(component.node?.display_name!) +
+              ` (${increment})`
+          )
+        ) {
+          increment++;
+        }
+        component.node!.display_name =
+          removeCountFromString(component.node?.display_name!) +
+          ` (${increment})`;
+      }
+    }
+    component.node!.official = false;
+    saveFlowToDatabase(createFlowComponent(component));
+    setData((prev) => {
+      let newData = { ...prev };
+      //clone to prevent reference erro
+      newData["custom_components"][key] = _.cloneDeep({
+        ...component.node,
+        official: false,
+      });
+      return newData;
+    });
+  }
+
+  function deleteComponent(id: string, key: string) {
+    let flow = flows.find(
+      (flow) =>
+        flow.is_component &&
+        (flow.data?.nodes[0].data as NodeDataType).type === key
+    );
+    if (flow) {
+      removeFlow(flow.id);
+      setData((prev) => {
+        let newData = _.cloneDeep(prev);
+        delete newData["custom_components"][key];
+        return newData;
+      });
+    }
+  }
+
   const [isBuilt, setIsBuilt] = useState(false);
 
   return (
@@ -676,6 +744,8 @@ export function TabsProvider({ children }: { children: ReactNode }) {
         getTweak,
         setTweak,
         isLoading,
+        saveComponent,
+        deleteComponent,
       }}
     >
       {children}

src/frontend/src/contexts/typesContext.tsx

@@ -7,16 +7,9 @@ import {
   useState,
 } from "react";
 import { Edge, Node, ReactFlowInstance } from "reactflow";
-import { getAll, getHealth, saveFlowToDatabase } from "../controllers/API";
-import { APIClassType, APIKindType } from "../types/api";
-import { NodeDataType } from "../types/flow";
+import { getAll, getHealth } from "../controllers/API";
+import { APIKindType } from "../types/api";
 import { typesContextType } from "../types/typesContext";
-import { createFlowComponent } from "../utils/reactflowUtils";
-import {
-  getSetFromObject,
-  IncrementObjectKey,
-  removeCountFromString,
-} from "../utils/utils";
 import { alertContext } from "./alertContext";
 import { AuthContext } from "./authContext";
 
@@ -36,8 +29,6 @@ const initialValue: typesContextType = {
   fetchError: false,
   setFilterEdge: (filter) => {},
   getFilterEdge: [],
-  saveComponent: (component: NodeDataType, key: string) => {},
-  deleteComponent: (id: string, key: string) => {},
   deleteEdge: () => {},
 };
 
@@ -134,62 +125,10 @@ export function TypesProvider({ children }: { children: ReactNode }) {
     );
   }
 
-  function saveComponent(component: NodeDataType, id: string) {
-    let key = component.type;
-    if (data["custom_components"][key] !== undefined) {
-      let { newKey, increment } = IncrementObjectKey(
-        data["custom_components"],
-        key
-      );
-      key = newKey;
-      component.type = newKey;
-      let componentNodes: { [key: string]: APIClassType } = {};
-      Object.keys(data["custom_components"]).forEach((key) => {
-        componentNodes[key] = data["custom_components"][key];
-      });
-      const display_nameSet = getSetFromObject(componentNodes, "display_name");
-      if (display_nameSet.has(component.node?.display_name!)) {
-        increment = 1;
-        while (
-          display_nameSet.has(
-            removeCountFromString(component.node?.display_name!) +
-              ` (${increment})`
-          )
-        ) {
-          increment++;
-        }
-        component.node!.display_name =
-          removeCountFromString(component.node?.display_name!) +
-          ` (${increment})`;
-      }
-    }
-    component.node!.official = false;
-    saveFlowToDatabase(createFlowComponent(component));
-    setData((prev) => {
-      let newData = { ...prev };
-      //clone to prevent reference erro
-      newData["custom_components"][key] = _.cloneDeep({
-        ...component.node,
-        official: false,
-      });
-      return newData;
-    });
-  }
-
-  function deleteComponent(id: string, key: string) {
-    setData((prev) => {
-      let newData = _.cloneDeep(prev);
-      delete newData["custom_components"][key];
-      return newData;
-    });
-  }
-
   return (
     <typesContext.Provider
       value={{
         deleteEdge,
-        deleteComponent,
-        saveComponent,
         types,
         setTypes,
         reactFlowInstance,

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

@@ -8,7 +8,6 @@ import {
 } from "../../../../../components/ui/select-custom";
 import { AuthContext } from "../../../../../contexts/authContext";
 import { TabsContext } from "../../../../../contexts/tabsContext";
-import { typesContext } from "../../../../../contexts/typesContext";
 import { APIClassType } from "../../../../../types/api";
 import {
   createFlowComponent,
@@ -36,8 +35,7 @@ export default function SidebarDraggableComponent({
   official: boolean;
 }) {
   const open = useRef(false);
-  const { deleteComponent } = useContext(typesContext);
-  const { getNodeId } = useContext(TabsContext);
+  const { getNodeId, deleteComponent } = useContext(TabsContext);
   const { autoLogin, userData } = useContext(AuthContext);
 
   function handleSelectChange(value: string) {

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

@@ -11,7 +11,6 @@ import {
 } from "../../../../components/ui/select-custom";
 import { AuthContext } from "../../../../contexts/authContext";
 import { TabsContext } from "../../../../contexts/tabsContext";
-import { typesContext } from "../../../../contexts/typesContext";
 import EditNodeModal from "../../../../modals/EditNodeModal";
 import { nodeToolbarPropsType } from "../../../../types/components";
 import {
@@ -61,8 +60,7 @@ export default function NodeToolbarComponent({
   const isMinimal = canMinimize();
   const isGroup = data.node?.flow ? true : false;
 
-  const { paste } = useContext(TabsContext);
-  const { saveComponent } = useContext(typesContext);
+  const { paste, saveComponent } = useContext(TabsContext);
   const reactFlowInstance = useReactFlow();
   const [showModalAdvanced, setShowModalAdvanced] = useState(false);
   const [selectedValue, setSelectedValue] = useState("");

src/frontend/src/types/tabs/index.ts

@@ -1,5 +1,5 @@
 import { tweakType } from "../components";
-import { FlowType } from "../flow";
+import { FlowType, NodeDataType } from "../flow";
 
 export type TabsContextType = {
   saveFlow: (flow: FlowType, silent?: boolean) => Promise<void>;
@@ -36,6 +36,8 @@ export type TabsContextType = {
   setLastCopiedSelection: (selection: { nodes: any; edges: any }) => void;
   setTweak: (tweak: tweakType) => tweakType | void;
   getTweak: tweakType;
+  saveComponent: (component: NodeDataType, id: string) => void;
+  deleteComponent: (id: string, key: string) => void;
 };
 
 export type TabsState = {

src/frontend/src/types/typesContext/index.ts

@@ -1,7 +1,6 @@
 import { Edge, Node, ReactFlowInstance } from "reactflow";
 import { AlertItemType } from "../alerts";
 import { APIClassType, APIDataType } from "../api";
-import { NodeDataType } from "../flow";
 
 const types: { [char: string]: string } = {};
 const template: { [char: string]: APIClassType } = {};
@@ -22,8 +21,6 @@ export type typesContextType = {
   setFilterEdge: (newState) => void;
   getFilterEdge: any[];
   deleteEdge: (idx: string | Array<string>) => void;
-  saveComponent: (component: NodeDataType, key: string) => void;
-  deleteComponent: (id: string, key: string) => void;
 };
 
 export type alertContextType = {