refactor: add flow and upload flow functionality

src/frontend/src/App.tsx

@@ -23,12 +23,12 @@ import { useGetVersionQuery } from "./controllers/API/queries/version";
 import { setupAxiosDefaults } from "./controllers/API/utils";
 import useTrackLastVisitedPath from "./hooks/use-track-last-visited-path";
 import Router from "./routes";
-import { Case } from "./shared/components/caseComponent";
 import useAlertStore from "./stores/alertStore";
 import useAuthStore from "./stores/authStore";
 import { useDarkStore } from "./stores/darkStore";
 import useFlowsManagerStore from "./stores/flowsManagerStore";
 import { useFolderStore } from "./stores/foldersStore";
+import { cn } from "./utils/utils";
 
 export default function App() {
   useTrackLastVisitedPath();
@@ -164,15 +164,16 @@ export default function App() {
             ></FetchErrorComponent>
           }
 
-          <Case condition={isLoadingApplication}>
-            <div className="loading-page-panel">
-              <LoadingComponent remSize={50} />
-            </div>
-          </Case>
+          <div
+            className={cn(
+              "loading-page-panel absolute left-0 top-0 z-[999]",
+              isLoadingApplication ? "" : "hidden",
+            )}
+          >
+            <LoadingComponent remSize={50} />
+          </div>
 
-          <Case condition={!isLoadingApplication}>
-            <Router />
-          </Case>
+          <Router />
         </>
       </ErrorBoundary>
       <div></div>

src/frontend/src/components/cardComponent/hooks/use-handle-install.tsx

@@ -1,6 +1,5 @@
-import { useState } from "react";
+import useAddFlow from "@/hooks/flows/use-add-flow";
 import { getComponent } from "../../../controllers/API";
-import useFlowsManagerStore from "../../../stores/flowsManagerStore";
 import { storeComponent } from "../../../types/store";
 import cloneFlowWithParent from "../../../utils/storeUtils";
 
@@ -14,7 +13,7 @@ const useInstallComponent = (
   setSuccessData: (value: { title: string }) => void,
   setErrorData: (value: { title: string; list: string[] }) => void,
 ) => {
-  const addFlow = useFlowsManagerStore((state) => state.addFlow);
+  const addFlow = useAddFlow();
 
   const handleInstall = () => {
     const temp = downloadsCount;
@@ -24,7 +23,7 @@ const useInstallComponent = (
     getComponent(data.id)
       .then((res) => {
         const newFlow = cloneFlowWithParent(res, res.id, data.is_component);
-        addFlow(true, newFlow)
+        addFlow({ flow: newFlow })
           .then((id) => {
             setSuccessData({
               title: `${name} ${isStore ? "Downloaded" : "Installed"} Successfully.`,

src/frontend/src/components/exampleComponent/index.tsx

@@ -1,5 +1,6 @@
+import useAddFlow from "@/hooks/flows/use-add-flow";
+import emojiRegex from "emoji-regex";
 import { useNavigate } from "react-router-dom";
-import useFlowsManagerStore from "../../stores/flowsManagerStore";
 import { FlowType } from "../../types/flow";
 import { updateIds } from "../../utils/reactflowUtils";
 import { cn } from "../../utils/utils";
@@ -20,10 +21,9 @@ export default function CollectionCardComponent({
   flow: FlowType;
   authorized?: boolean;
 }) {
-  const addFlow = useFlowsManagerStore((state) => state.addFlow);
+  const addFlow = useAddFlow();
   const navigate = useNavigate();
-  const emojiRegex = /\p{Emoji}/u;
-  const isEmoji = (str: string) => emojiRegex.test(str);
+  const isEmoji = (str: string) => emojiRegex().test(str);
 
   return (
     <Card
@@ -77,7 +77,7 @@ export default function CollectionCardComponent({
             <Button
               onClick={() => {
                 updateIds(flow.data!);
-                addFlow(true, flow).then((id) => {
+                addFlow({ flow }).then((id) => {
                   navigate("/flow/" + id);
                 });
               }}

src/frontend/src/components/headerComponent/components/menuBar/index.tsx

@@ -7,6 +7,8 @@ import {
   DropdownMenuTrigger,
 } from "../../../ui/dropdown-menu";
 
+import useAddFlow from "@/hooks/flows/use-add-flow";
+import useUploadFlow from "@/hooks/flows/use-upload-flow";
 import { useNavigate } from "react-router-dom";
 import { UPLOAD_ERROR_ALERT } from "../../../../constants/alerts_constants";
 import { SAVED_HOVER } from "../../../../constants/constants";
@@ -26,7 +28,7 @@ import { Button } from "../../../ui/button";
 
 export const MenuBar = ({}: {}): JSX.Element => {
   const shortcuts = useShortcutsStore((state) => state.shortcuts);
-  const addFlow = useFlowsManagerStore((state) => state.addFlow);
+  const addFlow = useAddFlow();
   const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const setSuccessData = useAlertStore((state) => state.setSuccessData);
@@ -40,14 +42,14 @@ export const MenuBar = ({}: {}): JSX.Element => {
   const saveLoading = useFlowsManagerStore((state) => state.saveLoading);
   const [openSettings, setOpenSettings] = useState(false);
   const [openLogs, setOpenLogs] = useState(false);
-  const uploadFlow = useFlowsManagerStore((state) => state.uploadFlow);
+  const uploadFlow = useUploadFlow();
   const navigate = useNavigate();
   const isBuilding = useFlowStore((state) => state.isBuilding);
   const getTypes = useTypesStore((state) => state.getTypes);
 
   function handleAddFlow() {
     try {
-      addFlow(true).then((id) => {
+      addFlow().then((id) => {
         navigate("/flow/" + id);
       });
     } catch (err) {
@@ -125,14 +127,18 @@ export const MenuBar = ({}: {}): JSX.Element => {
             <DropdownMenuItem
               className="cursor-pointer"
               onClick={() => {
-                uploadFlow({ newProject: false, isComponent: false }).catch(
-                  (error) => {
+                uploadFlow({ position: { x: 300, y: 100 } })
+                  .then(() => {
+                    setSuccessData({
+                      title: "Uploaded successfully",
+                    });
+                  })
+                  .catch((error) => {
                     setErrorData({
                       title: UPLOAD_ERROR_ALERT,
-                      list: [error],
+                      list: [(error as Error).message],
                     });
-                  },
-                );
+                  });
               }}
             >
               <IconComponent name="FileUp" className="header-menu-options" />

src/frontend/src/components/inputFileComponent/index.tsx

@@ -1,5 +1,6 @@
 import { usePostUploadFile } from "@/controllers/API/queries/files/use-post-upload-file";
-import { useEffect, useState } from "react";
+import { createFileUpload } from "@/helpers/create-file-upload";
+import { useEffect } from "react";
 import {
   CONSOLE_ERROR_MSG,
   INVALID_FILE_ALERT,
@@ -19,7 +20,6 @@ export default function InputFileComponent({
   id,
 }: FileComponentType): JSX.Element {
   const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId);
-  const [loading, setLoading] = useState(false);
   const setErrorData = useAlertStore((state) => state.setErrorData);
 
   // Clear component state
@@ -39,58 +39,42 @@ export default function InputFileComponent({
     return false;
   }
 
-  const { mutate } = usePostUploadFile();
+  const { mutate, isPending } = usePostUploadFile();
 
   const handleButtonClick = (): void => {
-    // Create a file input element
-    const input = document.createElement("input");
-    document.body.appendChild(input);
-    input.type = "file";
-    input.accept = fileTypes?.join(",");
-    input.style.display = "none"; // Hidden from view
-    input.multiple = false; // Allow only one file selection
-    const onChangeFile = (event: Event): void => {
-      setLoading(true);
+    createFileUpload({ multiple: false, accept: fileTypes?.join(",") }).then(
+      (files) => {
+        const file = files[0];
+        if (file) {
+          if (checkFileType(file.name)) {
+            // Upload the file
+            mutate(
+              { file, id: currentFlowId },
+              {
+                onSuccess: (data) => {
+                  // Get the file name from the response
+                  const { file_path } = data;
 
-      // Get the selected file
-      const file = (event.target as HTMLInputElement).files?.[0];
-
-      // Check if the file type is correct
-      if (file && checkFileType(file.name)) {
-        // Upload the file
-        mutate(
-          { file, id: currentFlowId },
-          {
-            onSuccess: (data) => {
-              // Get the file name from the response
-              const { file_path } = data;
-
-              // sets the value that goes to the backend
-              // Update the state and on with the name of the file
-              // sets the value to the user
-              handleOnNewValue({ value: file.name, file_path });
-              setLoading(false);
-            },
-            onError: () => {
-              console.error(CONSOLE_ERROR_MSG);
-              setLoading(false);
-            },
-          },
-        );
-      } else {
-        // Show an error if the file type is not allowed
-        setErrorData({
-          title: INVALID_FILE_ALERT,
-          list: fileTypes,
-        });
-        setLoading(false);
-      }
-    };
-
-    input.addEventListener("change", onChangeFile);
-
-    // Trigger the file selection dialog
-    input.click();
+                  // sets the value that goes to the backend
+                  // Update the state and on with the name of the file
+                  // sets the value to the user
+                  handleOnNewValue({ value: file.name, file_path });
+                },
+                onError: () => {
+                  console.error(CONSOLE_ERROR_MSG);
+                },
+              },
+            );
+          } else {
+            // Show an error if the file type is not allowed
+            setErrorData({
+              title: INVALID_FILE_ALERT,
+              list: fileTypes,
+            });
+          }
+        }
+      },
+    );
   };
 
   return (
@@ -114,7 +98,7 @@ export default function InputFileComponent({
             unstyled
             className="inline-flex items-center justify-center"
             onClick={handleButtonClick}
-            loading={loading}
+            loading={isPending}
             disabled={disabled}
           >
             <IconComponent

src/frontend/src/components/sidebarComponent/components/sideBarFolderButtons/index.tsx

@@ -4,6 +4,9 @@ import {
   usePostUploadFolders,
 } from "@/controllers/API/queries/folders";
 import { useGetDownloadFolders } from "@/controllers/API/queries/folders/use-get-download-folders";
+import { createFileUpload } from "@/helpers/create-file-upload";
+import { getObjectsFromFilelist } from "@/helpers/get-objects-from-filelist";
+import useUploadFlow from "@/hooks/flows/use-upload-flow";
 import { useEffect, useRef, useState } from "react";
 import { useLocation } from "react-router-dom";
 import { FolderType } from "../../../../pages/MainPage/entities";
@@ -55,6 +58,7 @@ const SideBarFoldersButtonsComponent = ({
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const setSuccessData = useAlertStore((state) => state.setSuccessData);
   const getFoldersApi = useFolderStore((state) => state.getFoldersApi);
+  const uploadFlow = useUploadFlow();
 
   const handleFolderChange = () => {
     getFolderById(folderId);
@@ -68,46 +72,41 @@ const SideBarFoldersButtonsComponent = ({
   const { mutate } = usePostUploadFolders();
 
   const handleUploadFlowsToFolder = () => {
-    const input = document.createElement("input");
-    input.type = "file";
-    input.accept = ".json";
-    input.click();
-
-    input.onchange = (event: Event) => {
-      if (
-        (event.target as HTMLInputElement).files![0].type === "application/json"
-      ) {
-        const file = (event.target as HTMLInputElement).files![0];
-        const formData = new FormData();
-        formData.append("file", file);
-        file.text().then(async (text) => {
-          const data = JSON.parse(text);
-          if (data.data?.nodes) {
-            await useFlowsManagerStore.getState().addFlow(true, data);
+    createFileUpload().then((files: File[]) => {
+      getObjectsFromFilelist<any>(files).then((objects) => {
+        if (objects.every((flow) => flow.data?.nodes)) {
+          uploadFlow({ files }).then(() => {
             getFolderById(folderId);
-          } else {
+            setSuccessData({
+              title: "Uploaded successfully",
+            });
+          });
+        } else {
+          files.forEach((folder) => {
+            const formData = new FormData();
+            formData.append("file", folder);
             mutate(
               { formData },
               {
                 onSuccess: () => {
-                  getFolderById(folderId);
+                  getFoldersApi(true);
                   setSuccessData({
-                    title: "Uploaded successfully",
+                    title: "Folder uploaded successfully.",
                   });
                 },
                 onError: (err) => {
                   console.log(err);
                   setErrorData({
                     title: `Error on upload`,
-                    list: [err["response"]["data"]],
+                    list: [err["response"]["data"]["message"]],
                   });
                 },
               },
             );
-          }
-        });
-      }
-    };
+          });
+        }
+      });
+    });
   };
 
   const { mutate: mutateDownloadFolder } = useGetDownloadFolders();

src/frontend/src/controllers/API/index.ts

@@ -262,32 +262,6 @@ export async function getFlowStylesFromDatabase() {
   }
 }
 
-/**
- * Saves a new flow style to the database.
- *
- * @param {FlowStyleType} flowStyle - The flow style data to save.
- * @returns {Promise<any>} The saved flow style data.
- * @throws Will throw an error if saving fails.
- */
-export async function saveFlowStyleToDatabase(flowStyle: FlowStyleType) {
-  try {
-    const response = await api.post(`${BASE_URL_API}flow_styles/`, flowStyle, {
-      headers: {
-        accept: "application/json",
-        "Content-Type": "application/json",
-      },
-    });
-
-    if (response.status !== 201) {
-      throw new Error(`HTTP error! status: ${response.status}`);
-    }
-    return response?.data;
-  } catch (error) {
-    console.error(error);
-    throw error;
-  }
-}
-
 /**
  * Fetches the version of the API.
  *
@@ -508,7 +482,7 @@ export async function getStoreComponents({
   limit = 9999999,
   is_component = null,
   sort = "-count(liked_by)",
-  tags = [] || null,
+  tags = [],
   liked = null,
   isPrivate = null,
   search = null,