feat(typesContext.tsx): add deleteComponent function to typesContext to allow deleting components from savedComponentsJSON

fix(extraSidebarComponent/index.tsx): update references to data object to use dataFilter object to prevent errors when filtering data
fix(sideBarDraggableComponent/index.tsx): add deleteComponent function from typesContext to handleSelectChange function to delete components

src/frontend/src/contexts/typesContext.tsx

@@ -37,6 +37,7 @@ const initialValue: typesContextType = {
   setFilterEdge: (filter) => {},
   getFilterEdge: [],
   saveComponent: (component: NodeDataType, key: string) => {},
+  deleteComponent: (key: string) => {},
 };
 
 export const typesContext = createContext<typesContextType>(initialValue);
@@ -154,9 +155,29 @@ export function TypesProvider({ children }: { children: ReactNode }) {
       return newData;
     });
   }
+
+  function deleteComponent(key: string) {
+    let savedComponentsJSON: localStorageUserType = { components: {} };
+    if (checkLocalStorageKey(userData?.id!)) {
+      let savedComponents = localStorage.getItem(userData?.id!)!;
+      savedComponentsJSON = JSON.parse(savedComponents);
+    }
+    let components = savedComponentsJSON.components;
+    delete components[key];
+    savedComponentsJSON.components = components;
+    localStorage.setItem(userData?.id!, JSON.stringify(savedComponentsJSON));
+    setData((prev) => {
+      let newData = _.cloneDeep(prev);
+      //clone to prevent reference erro
+      delete newData["custom_components"][key];
+      return newData;
+    });
+  }
+
   return (
     <typesContext.Provider
       value={{
+        deleteComponent,
         saveComponent,
         types,
         setTypes,

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

@@ -239,7 +239,9 @@ export default function ExtraSidebar(): JSX.Element {
                     .sort()
                     .map((SBItemName: string, index) => (
                       <ShadTooltip
-                        content={data[SBSectionName][SBItemName].display_name}
+                        content={
+                          dataFilter[SBSectionName][SBItemName].display_name
+                        }
                         side="right"
                         key={index}
                       >
@@ -249,15 +251,15 @@ export default function ExtraSidebar(): JSX.Element {
                             onDragStart(event, {
                               //split type to remove type in nodes saved with same name removing it's
                               type: removeCountFromString(SBItemName),
-                              node: data[SBSectionName][SBItemName],
+                              node: dataFilter[SBSectionName][SBItemName],
                             })
                           }
                           color={nodeColors[SBSectionName]}
                           itemName={SBItemName}
                           //convert error to boolean
-                          error={!!data[SBSectionName][SBItemName].error}
+                          error={!!dataFilter[SBSectionName][SBItemName].error}
                           display_name={
-                            data[SBSectionName][SBItemName].display_name
+                            dataFilter[SBSectionName][SBItemName].display_name
                           }
                         />
                       </ShadTooltip>

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

@@ -1,4 +1,4 @@
-import { DragEventHandler, useRef } from "react";
+import { DragEventHandler, useContext, useRef } from "react";
 import IconComponent from "../../../../../components/genericIconComponent";
 import {
   Select,
@@ -6,6 +6,7 @@ import {
   SelectItem,
   SelectTrigger,
 } from "../../../../../components/ui/select-custom";
+import { typesContext } from "../../../../../contexts/typesContext";
 
 export default function SidebarDraggableComponent({
   display_name,
@@ -21,9 +22,23 @@ export default function SidebarDraggableComponent({
   onDragStart: DragEventHandler<HTMLDivElement>;
 }) {
   const open = useRef(false);
+  const { deleteComponent } = useContext(typesContext);
+
+  function handleSelectChange(value: string) {
+    switch (value) {
+      case "share":
+        break;
+      case "download":
+        break;
+      case "delete":
+        deleteComponent(itemName);
+        break;
+    }
+  }
 
   return (
     <Select
+      onValueChange={handleSelectChange}
       onOpenChange={(change) => (open.current = change)}
       open={open.current}
     >

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

@@ -22,6 +22,7 @@ export type typesContextType = {
   setFilterEdge: (newState) => void;
   getFilterEdge: any[];
   saveComponent: (component: NodeDataType, key: string) => void;
+  deleteComponent: (key: string) => void;
 };
 
 export type alertContextType = {