From 3d32be344d029245df0df14f7b5ffa11b95d0a07 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Tue, 21 Nov 2023 20:19:29 -0300 Subject: [PATCH] Fixed flows being able to upload to components and vice versa --- src/frontend/src/contexts/flowsContext.tsx | 85 ++++++++++++------- .../MainPage/components/components/index.tsx | 26 ++++-- src/frontend/src/pages/MainPage/index.tsx | 33 ++++--- src/frontend/src/types/tabs/index.ts | 10 ++- 4 files changed, 104 insertions(+), 50 deletions(-) diff --git a/src/frontend/src/contexts/flowsContext.tsx b/src/frontend/src/contexts/flowsContext.tsx index 75096e012..50057cf18 100644 --- a/src/frontend/src/contexts/flowsContext.tsx +++ b/src/frontend/src/contexts/flowsContext.tsx @@ -318,46 +318,71 @@ export function FlowsProvider({ children }: { children: ReactNode }) { * If the file type is application/json, the file is read and parsed into a JSON object. * The resulting JSON object is passed to the addFlow function. */ - async function uploadFlow( - newProject: boolean, - file?: File - ): Promise { - let id; - if (file) { - let text = await file.text(); - let fileData = JSON.parse(text); - if (fileData.flows) { - fileData.flows.forEach((flow: FlowType) => { - id = addFlow(newProject, flow); - }); - } - // parse the text into a JSON object - let flow: FlowType = JSON.parse(text); - - id = await addFlow(newProject, flow); - } else { - // create a file input - const input = document.createElement("input"); - input.type = "file"; - input.accept = ".json"; - // add a change event listener to the file input - id = await new Promise((resolve) => { + async function uploadFlow({ + newProject, + file, + isComponent = false, + }: { + newProject: boolean; + file?: File; + isComponent?: boolean; + }): Promise { + return new Promise(async (resolve, reject) => { + let id; + if (file) { + let text = await file.text(); + let fileData = JSON.parse(text); + console.log(fileData); + if (fileData.is_component === undefined) { + reject("Your file doesn't have the is_component property."); + } else if ( + fileData.is_component !== undefined && + fileData.is_component !== isComponent + ) { + reject("You cannot upload a component as a flow or vice versa"); + } else { + if (fileData.flows) { + fileData.flows.forEach((flow: FlowType) => { + id = addFlow(newProject, flow); + }); + resolve(""); + } else { + id = await addFlow(newProject, fileData); + resolve(id); + } + } + } else { + // create a file input + const input = document.createElement("input"); + input.type = "file"; + input.accept = ".json"; + // add a change event listener to the file input input.onchange = async (e: Event) => { if ( (e.target as HTMLInputElement).files![0].type === "application/json" ) { const currentfile = (e.target as HTMLInputElement).files![0]; let text = await currentfile.text(); - let flow: FlowType = JSON.parse(text); - const flowId = await addFlow(newProject, flow); - resolve(flowId); + let fileData: FlowType = await JSON.parse(text); + console.log(isComponent, fileData); + + if (fileData.is_component === undefined) { + reject("Your file doesn't have the is_component property."); + } else if ( + fileData.is_component !== undefined && + fileData.is_component !== isComponent + ) { + reject("You cannot upload a component as a flow or vice versa"); + } else { + id = await addFlow(newProject, fileData); + resolve(id); + } } }; // trigger the file input click event to open the file dialog input.click(); - }); - } - return id; + } + }); } function uploadFlows() { diff --git a/src/frontend/src/pages/MainPage/components/components/index.tsx b/src/frontend/src/pages/MainPage/components/components/index.tsx index 5f8f06c06..a5b60dc7d 100644 --- a/src/frontend/src/pages/MainPage/components/components/index.tsx +++ b/src/frontend/src/pages/MainPage/components/components/index.tsx @@ -16,7 +16,7 @@ export default function ComponentsComponent({ is_component?: boolean; }) { const { flows, removeFlow, uploadFlow, isLoading } = useContext(FlowsContext); - const { setErrorData } = useContext(alertContext); + const { setErrorData, setSuccessData } = useContext(alertContext); const [pageSize, setPageSize] = useState(10); const [pageIndex, setPageIndex] = useState(1); const [allData, setAllData] = useState( @@ -43,14 +43,24 @@ export default function ComponentsComponent({ e.preventDefault(); if (e.dataTransfer.types.some((types) => types === "Files")) { if (e.dataTransfer.files.item(0).type === "application/json") { - try { - uploadFlow(true, e.dataTransfer.files.item(0)!); - } catch (error: any) { - setErrorData({ - title: "Error uploading file", - list: [error.message], + uploadFlow({ + newProject: true, + file: e.dataTransfer.files.item(0)!, + isComponent: is_component, + }) + .then(() => { + setSuccessData({ + title: `${ + is_component ? "Component" : "Flow" + } uploaded successfully`, + }); + }) + .catch((error) => { + setErrorData({ + title: "Error uploading file", + list: [error], + }); }); - } } else { setErrorData({ title: "Invalid file type", diff --git a/src/frontend/src/pages/MainPage/index.tsx b/src/frontend/src/pages/MainPage/index.tsx index 3421f2017..f59b4a8a3 100644 --- a/src/frontend/src/pages/MainPage/index.tsx +++ b/src/frontend/src/pages/MainPage/index.tsx @@ -1,5 +1,5 @@ import { useContext, useEffect } from "react"; -import { Outlet, useNavigate } from "react-router-dom"; +import { Outlet, useLocation, useNavigate } from "react-router-dom"; import DropdownButton from "../../components/DropdownButtonComponent"; import IconComponent from "../../components/genericIconComponent"; import PageLayout from "../../components/pageLayout"; @@ -19,21 +19,32 @@ export default function HomePage(): JSX.Element { uploadFlow, isLoading, } = useContext(FlowsContext); - const { setErrorData } = useContext(alertContext); + const { setErrorData, setSuccessData } = useContext(alertContext); + const location = useLocation(); + const pathname = location.pathname; + const is_component = pathname === "/components"; const dropdownOptions = [ { name: "Import from JSON", onBtnClick: () => { - try { - uploadFlow(true).then((id) => { - navigate("/flow/" + id); + uploadFlow({ + newProject: true, + isComponent: is_component, + }) + .then((id) => { + setSuccessData({ + title: `${ + is_component ? "Component" : "Flow" + } uploaded successfully`, + }); + if (!is_component) navigate("/flow/" + id); + }) + .catch((error) => { + setErrorData({ + title: "Error uploading file", + list: [error], + }); }); - } catch (error: any) { - setErrorData({ - title: "Invalid file type", - list: [error], - }); - } }, }, ]; diff --git a/src/frontend/src/types/tabs/index.ts b/src/frontend/src/types/tabs/index.ts index 08c21846b..1599aa94e 100644 --- a/src/frontend/src/types/tabs/index.ts +++ b/src/frontend/src/types/tabs/index.ts @@ -23,7 +23,15 @@ export type FlowsContextType = { uploadFlows: () => void; isBuilt: boolean; setIsBuilt: (state: boolean) => void; - uploadFlow: (newFlow: boolean, file?: File) => Promise; + uploadFlow: ({ + newProject, + file, + isComponent, + }: { + newProject: boolean; + file?: File; + isComponent?: boolean; + }) => Promise; hardReset: () => void; getNodeId: (nodeType: string) => string; tabsState: FlowsState;