From 38d668e5f31742a8cf81c78e58cf0e4399ed5ff7 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Thu, 19 Oct 2023 17:36:25 -0300 Subject: [PATCH] fix(App.tsx): remove unused setErrorData and setLoading variables to improve code readability feat(App.tsx): add support for successData, successOpen, and setSuccessOpen variables from alertContext to handle success alerts feat(App.tsx): add support for fetchError variable from typesContext to handle fetch errors fix(tabsContext.tsx): add setData variable to useContext to update data state feat(tabsContext.tsx): add support for saving custom components to data state in typesContext fix(typesContext.tsx): remove unused imports and commented code feat(typesContext.tsx): add support for saveFlowToDatabase function to save flow to the database fix(index.ts): add missing newline at the end of the file --- src/frontend/src/App.tsx | 2 - src/frontend/src/contexts/tabsContext.tsx | 15 ++++++- src/frontend/src/contexts/typesContext.tsx | 48 +++++++++++----------- src/frontend/src/controllers/API/index.ts | 11 +++++ 4 files changed, 49 insertions(+), 27 deletions(-) diff --git a/src/frontend/src/App.tsx b/src/frontend/src/App.tsx index 20f2a18f9..2ffde4deb 100644 --- a/src/frontend/src/App.tsx +++ b/src/frontend/src/App.tsx @@ -42,9 +42,7 @@ export default function App() { successData, successOpen, setSuccessOpen, - setErrorData, loading, - setLoading, } = useContext(alertContext); const navigate = useNavigate(); const { fetchError } = useContext(typesContext); diff --git a/src/frontend/src/contexts/tabsContext.tsx b/src/frontend/src/contexts/tabsContext.tsx index cba2376b5..4196f269c 100644 --- a/src/frontend/src/contexts/tabsContext.tsx +++ b/src/frontend/src/contexts/tabsContext.tsx @@ -90,7 +90,7 @@ export function TabsProvider({ children }: { children: ReactNode }) { const [flows, setFlows] = useState>([]); const [id, setId] = useState(uid()); - const { templates, reactFlowInstance } = useContext(typesContext); + const { templates, reactFlowInstance, setData } = useContext(typesContext); const [lastCopiedSelection, setLastCopiedSelection] = useState<{ nodes: any; edges: any; @@ -139,11 +139,24 @@ export function TabsProvider({ children }: { children: ReactNode }) { } function processDBData(DbData: FlowType[]) { + let storeComponents: { [key: string]: APIClassType } = {}; DbData.forEach((flow: FlowType) => { try { if (!flow.data) { return; } + if (flow.data && flow.is_component) { + storeComponents[(flow.data.nodes[0].data as NodeDataType).type] = ( + flow.data.nodes[0].data as NodeDataType + ).node!; + } + setData((prev) => { + let newData = _.cloneDeep(prev); + Object.keys(storeComponents).forEach((key) => { + newData["custom_components"][key] = storeComponents[key]; + }); + return newData; + }); processDataFromFlow(flow, false); } catch (e) {} }); diff --git a/src/frontend/src/contexts/typesContext.tsx b/src/frontend/src/contexts/typesContext.tsx index 52565fede..0b99bb827 100644 --- a/src/frontend/src/contexts/typesContext.tsx +++ b/src/frontend/src/contexts/typesContext.tsx @@ -7,7 +7,7 @@ import { useState, } from "react"; import { Edge, Node, ReactFlowInstance } from "reactflow"; -import { getAll, getHealth, saveFlowStore } from "../controllers/API"; +import { getAll, getHealth, saveFlowToDatabase } from "../controllers/API"; import { APIClassType, APIKindType } from "../types/api"; import { localStorageUserType } from "../types/entities"; import { NodeDataType } from "../types/flow"; @@ -72,19 +72,19 @@ export function TypesProvider({ children }: { children: ReactNode }) { if (isMounted && result?.status === 200) { setLoading(false); let { data } = _.cloneDeep(result); - const savedComponents = autoLogin - ? localStorage.getItem("auto") - : localStorage.getItem(userData?.id!); - if (savedComponents !== null) { - const { components }: localStorageUserType = JSON.parse( - savedComponents! - ); - Object.keys(components).forEach((key) => { - data["custom_components"][key] = ( - components[key].data?.nodes[0].data! as NodeDataType - ).node!; - }); - } + // const savedComponents = autoLogin + // ? localStorage.getItem("auto") + // : localStorage.getItem(userData?.id!); + // if (savedComponents !== null) { + // // const { components }: localStorageUserType = JSON.parse( + // // savedComponents! + // // ); + // Object.keys(components).forEach((key) => { + // data["custom_components"][key] = ( + // components[key].data?.nodes[0].data! as NodeDataType + // ).node!; + // }); + // } setData(data); setTemplates( Object.keys(data).reduce((acc, curr) => { @@ -150,12 +150,12 @@ export function TypesProvider({ children }: { children: ReactNode }) { } function saveComponent(component: NodeDataType, id: string) { - let savedComponentsJSON: localStorageUserType = { components: {} }; - if (checkLocalStorageKey(id)) { - let savedComponents = localStorage.getItem(id)!; - savedComponentsJSON = JSON.parse(savedComponents); - } - let components = savedComponentsJSON.components; + // let savedComponentsJSON: localStorageUserType = { components: {} }; + // if (checkLocalStorageKey(id)) { + // let savedComponents = localStorage.getItem(id)!; + // savedComponentsJSON = JSON.parse(savedComponents); + // } + // let components = savedComponentsJSON.components; let key = component.type; if (data["custom_components"][key] !== undefined) { let { newKey, increment } = IncrementObjectKey( @@ -184,10 +184,10 @@ export function TypesProvider({ children }: { children: ReactNode }) { } } component.node!.official = false; - components[key] = createFlowComponent(component); - saveFlowStore(createFlowComponent(component)); - savedComponentsJSON.components = components; - localStorage.setItem(id, JSON.stringify(savedComponentsJSON)); + // components[key] = createFlowComponent(component); + saveFlowToDatabase(createFlowComponent(component)); + // savedComponentsJSON.components = components; + // localStorage.setItem(id, JSON.stringify(savedComponentsJSON)); setData((prev) => { let newData = { ...prev }; //clone to prevent reference erro diff --git a/src/frontend/src/controllers/API/index.ts b/src/frontend/src/controllers/API/index.ts index f15a5e232..c417c681d 100644 --- a/src/frontend/src/controllers/API/index.ts +++ b/src/frontend/src/controllers/API/index.ts @@ -112,12 +112,14 @@ export async function saveFlowToDatabase(newFlow: { data: ReactFlowJsonObject | null; description: string; style?: FlowStyleType; + is_component?: boolean; }): Promise { try { const response = await api.post(`${BASE_URL_API}flows/`, { name: newFlow.name, data: newFlow.data, description: newFlow.description, + is_component: newFlow.is_component, }); if (response.status !== 201) { @@ -568,3 +570,12 @@ export async function saveFlowStore(newFlow: { throw error; } } + +/** + * Fetches the flows from the store. + * @returns {Promise<>} A promise that resolves to an AxiosResponse containing the build status. + * + */ +export async function getFlowsStore(): Promise> { + return await api.get(`${BASE_URL_API}store/`); +}