From e91e24ee99cbc4b58a49b6db8aba88d9e858c2a7 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Fri, 20 Oct 2023 16:37:28 -0300 Subject: [PATCH] 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 | 74 ++++++++++++++++++- src/frontend/src/contexts/typesContext.tsx | 65 +--------------- .../sideBarDraggableComponent/index.tsx | 4 +- .../components/nodeToolbarComponent/index.tsx | 4 +- src/frontend/src/types/tabs/index.ts | 4 +- src/frontend/src/types/typesContext/index.ts | 3 - 6 files changed, 79 insertions(+), 75 deletions(-) diff --git a/src/frontend/src/contexts/tabsContext.tsx b/src/frontend/src/contexts/tabsContext.tsx index 1fc9e8ab9..c8cc04f93 100644 --- a/src/frontend/src/contexts/tabsContext.tsx +++ b/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( @@ -90,7 +99,8 @@ export function TabsProvider({ children }: { children: ReactNode }) { const [flows, setFlows] = useState>([]); 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} diff --git a/src/frontend/src/contexts/typesContext.tsx b/src/frontend/src/contexts/typesContext.tsx index 43708bd8a..7c34c6e57 100644 --- a/src/frontend/src/contexts/typesContext.tsx +++ b/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 ( Promise; @@ -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 = { diff --git a/src/frontend/src/types/typesContext/index.ts b/src/frontend/src/types/typesContext/index.ts index 8813c7dd6..f3bdc6e2b 100644 --- a/src/frontend/src/types/typesContext/index.ts +++ b/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) => void; - saveComponent: (component: NodeDataType, key: string) => void; - deleteComponent: (id: string, key: string) => void; }; export type alertContextType = {