Fixed flows being able to upload to components and vice versa

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<String | undefined> {
-    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<String | never> {
+    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() {

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",

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],
-          });
-        }
       },
     },
   ];

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<String | undefined>;
+  uploadFlow: ({
+    newProject,
+    file,
+    isComponent,
+  }: {
+    newProject: boolean;
+    file?: File;
+    isComponent?: boolean;
+  }) => Promise<String | never>;
   hardReset: () => void;
   getNodeId: (nodeType: string) => string;
   tabsState: FlowsState;