feat: Refactor Upload Folders to Use Mutations for HTTP Request Manag…

…ement (langflow-ai#2810)

* ✨ (frontend): Add new API queries for user authentication and messages handling
📝 (frontend): Update API queries for user authentication to include new functionalities like logout, reset password, update user, add user, login user, and refresh access token
📝 (frontend): Update API queries for messages to change the update messages functionality to use PUT method instead of PATCH

* ✨ (sideBarFolderButtons/index.tsx): Add usePostUploadFolders query to handle uploading folders and files
🔧 (constants.ts): Add FOLDERS constant to API URLs for folder-related endpoints
🔧 (folders/index.tsx): Add use-post-upload-folders query to handle uploading folders and files

🔧 (use-update-messages.ts): Remove unused file use-update-messages.ts to clean up the project
🔧 (foldersStore.tsx): Remove unused uploadFolder function to improve code maintainability and reduce complexity
🔧 (folders/index.ts): Remove unused uploadFolder function to simplify the codebase and improve readability

* [autofix.ci] apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

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

@@ -1,3 +1,4 @@
+import { usePostUploadFolders } from "@/controllers/API/queries/folders";
 import { useEffect, useRef, useState } from "react";
 import { useLocation } from "react-router-dom";
 import { FolderType } from "../../../../pages/MainPage/entities";
@@ -33,7 +34,6 @@ const SideBarFoldersButtonsComponent = ({
   const [editFolders, setEditFolderName] = useState(
     folders.map((obj) => ({ name: obj.name, edit: false })),
   );
-  const uploadFolder = useFolderStore((state) => state.uploadFolder);
   const currentFolder = pathname.split("/");
   const urlWithoutPath = pathname.split("/").length < 4;
   const myCollectionId = useFolderStore((state) => state.myCollectionId);
@@ -61,21 +61,49 @@ const SideBarFoldersButtonsComponent = ({
     handleFolderChange,
   );
 
+  const { mutate } = usePostUploadFolders();
+
   const handleUploadFlowsToFolder = () => {
-    uploadFolder(folderId)
-      .then(() => {
-        getFolderById(folderId);
-        setSuccessData({
-          title: "Uploaded successfully",
-        });
-      })
-      .catch((err) => {
-        console.log(err);
-        setErrorData({
-          title: `Error on upload`,
-          list: [err["response"]["data"]],
+    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);
+            getFolderById(folderId);
+          } else {
+            mutate(
+              { formData },
+              {
+                onSuccess: () => {
+                  getFolderById(folderId);
+                  setSuccessData({
+                    title: "Uploaded successfully",
+                  });
+                },
+                onError: (err) => {
+                  console.log(err);
+                  setErrorData({
+                    title: `Error on upload`,
+                    list: [err["response"]["data"]],
+                  });
+                },
+              },
+            );
+          }
         });
-      });
+      }
+    };
   };
 
   const handleDownloadFolder = (id: string) => {

src/frontend/src/controllers/API/helpers/constants.ts

@@ -13,6 +13,7 @@ export const URLs = {
   AUTOLOGIN: "auto_login",
   REFRESH: "refresh",
   BUILD: `build`,
+  FOLDERS: `folders`,
 } as const;
 
 export function getURL(key: keyof typeof URLs, params: any = {}) {

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

@@ -1 +1,10 @@
+export * from "./use-delete-users";
+export * from "./use-get-autologin";
 export * from "./use-get-user";
+export * from "./use-get-users-page";
+export * from "./use-patch-logout";
+export * from "./use-patch-reset-password";
+export * from "./use-patch-update-user";
+export * from "./use-post-add-user";
+export * from "./use-post-login-user";
+export * from "./use-post-refresh-access";

src/frontend/src/controllers/API/queries/folders/index.tsx

@@ -0,0 +1 @@
+export * from "./use-post-upload-folders";

src/frontend/src/controllers/API/queries/folders/use-post-upload-folders.ts

@@ -0,0 +1,32 @@
+import useFlowsManagerStore from "@/stores/flowsManagerStore";
+import { useFolderStore } from "@/stores/foldersStore";
+import { Users, useMutationFunctionType } from "@/types/api";
+import { api } from "../../api";
+import { getURL } from "../../helpers/constants";
+import { UseRequestProcessor } from "../../services/request-processor";
+
+interface IPostAddUploadFolders {
+  formData: FormData;
+}
+
+export const usePostUploadFolders: useMutationFunctionType<
+  undefined,
+  IPostAddUploadFolders
+> = (options?) => {
+  const { mutate } = UseRequestProcessor();
+
+  const uploadFoldersFn = async (
+    payload: IPostAddUploadFolders,
+  ): Promise<void> => {
+    const res = await api.post(
+      `${getURL("FOLDERS")}/upload/`,
+      payload.formData,
+    );
+    await useFolderStore.getState().getFoldersApi(true);
+    return res.data;
+  };
+
+  const mutation = mutate(["usePostUploadFolders"], uploadFoldersFn, options);
+
+  return mutation;
+};

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

@@ -1,3 +1,3 @@
 export * from "./use-delete-messages";
 export * from "./use-get-messages";
-export * from "./use-update-messages";
+export * from "./use-put-update-messages";

src/frontend/src/stores/foldersStore.tsx

@@ -133,50 +133,6 @@ export const useFolderStore = create<FoldersStoreType>((set, get) => ({
   setFolderDragging: (folder) => set(() => ({ folderDragging: folder })),
   folderIdDragging: "",
   setFolderIdDragging: (id) => set(() => ({ folderIdDragging: id })),
-  uploadFolder: () => {
-    return new Promise<void>((resolve, reject) => {
-      const input = document.createElement("input");
-      input.type = "file";
-      input.accept = ".json";
-      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((text) => {
-            const data = JSON.parse(text);
-            if (data.data?.nodes) {
-              useFlowsManagerStore
-                .getState()
-                .addFlow(true, data)
-                .then(() => {
-                  resolve();
-                })
-                .catch((error) => {
-                  reject(error);
-                });
-            } else {
-              uploadFlowsFromFolders(formData)
-                .then(() => {
-                  get()
-                    .getFoldersApi(true)
-                    .then(() => {
-                      resolve();
-                    });
-                })
-                .catch((error) => {
-                  reject(error);
-                });
-            }
-          });
-        }
-      };
-      input.click();
-    });
-  },
   starterProjectId: "",
   setStarterProjectId: (id) => set(() => ({ starterProjectId: id })),
 }));

src/frontend/src/types/zustand/folders/index.ts

@@ -22,7 +22,6 @@ export type FoldersStoreType = {
   setFolderUrl: (folderUrl: string) => void;
   folderDragging: boolean;
   setFolderDragging: (set: boolean) => void;
-  uploadFolder: (folderId: string) => Promise<void>;
   folderIdDragging: string;
   setFolderIdDragging: (id: string) => void;
   starterProjectId: string;