refactor: change downloadFolders requests to use useQuery hook (#2920)

* ✨ (sidebarComponent): Add support for downloading folders in the sidebar component to allow users to download folder data as JSON files
🔧 (sidebarComponent): Remove unused import and function related to downloading folders to clean up the codebase
📝 (use-get-download-folders): Add a new function to handle downloading folders from the API in a separate file for better code organization
♻️ (MainPage/services): Remove unused functions related to downloading and uploading flows from folders to simplify the services file and improve maintainability
🔧 (foldersStore): Remove unused import and function related to uploading flows from folders to clean up the codebase

* 📝 (sideBarFolderButtons/index.tsx): add error handling logic to display error message when downloading folder fails

* update error message

---------

Co-authored-by: anovazzi1 <[email protected]>

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

@@ -1,12 +1,12 @@
 import {
   usePatchFolders,
+  usePostFolders,
   usePostUploadFolders,
 } from "@/controllers/API/queries/folders";
-import { usePostFolders } from "@/controllers/API/queries/folders/use-post-folders";
+import { useGetDownloadFolders } from "@/controllers/API/queries/folders/use-get-download-folders";
 import { useEffect, useRef, useState } from "react";
 import { useLocation } from "react-router-dom";
 import { FolderType } from "../../../../pages/MainPage/entities";
-import { handleDownloadFolderFn } from "../../../../pages/MainPage/utils/handle-download-folder";
 import useAlertStore from "../../../../stores/alertStore";
 import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
 import { useFolderStore } from "../../../../stores/foldersStore";
@@ -110,8 +110,37 @@ const SideBarFoldersButtonsComponent = ({
     };
   };
 
+  const { mutate: mutateDownloadFolder } = useGetDownloadFolders();
+
   const handleDownloadFolder = (id: string) => {
-    handleDownloadFolderFn(id);
+    mutateDownloadFolder(
+      {
+        folderId: id,
+      },
+      {
+        onSuccess: (data) => {
+          const folder = folders.find((f) => f.id === data.folderId);
+
+          data.folder_name = folder?.name || "folder";
+          data.folder_description = folder?.description || "";
+
+          const jsonString = `data:text/json;charset=utf-8,${encodeURIComponent(
+            JSON.stringify(data),
+          )}`;
+
+          const link = document.createElement("a");
+          link.href = jsonString;
+          link.download = `${data.folder_name}.json`;
+
+          link.click();
+        },
+        onError: () => {
+          setErrorData({
+            title: `An error occurred while downloading folder.`,
+          });
+        },
+      },
+    );
   };
 
   const { mutate: mutateAddFolder } = usePostFolders();

src/frontend/src/components/sidebarComponent/hooks/use-on-file-drop.tsx

@@ -3,10 +3,7 @@ import {
   WRONG_FILE_ERROR_ALERT,
 } from "../../../constants/alerts_constants";
 import { updateFlowInDatabase } from "../../../controllers/API";
-import {
-  uploadFlowToFolder,
-  uploadFlowsFromFolders,
-} from "../../../pages/MainPage/services";
+import { uploadFlowToFolder } from "../../../pages/MainPage/services";
 import useAlertStore from "../../../stores/alertStore";
 import useFlowsManagerStore from "../../../stores/flowsManagerStore";
 import { useFolderStore } from "../../../stores/foldersStore";

src/frontend/src/controllers/API/queries/folders/use-get-download-folders.ts

@@ -0,0 +1,25 @@
+import { useMutationFunctionType } from "@/types/api";
+import { api } from "../../api";
+import { getURL } from "../../helpers/constants";
+import { UseRequestProcessor } from "../../services/request-processor";
+
+interface IGetDownloadFolders {
+  folderId: string;
+}
+
+export const useGetDownloadFolders: useMutationFunctionType<
+  undefined,
+  IGetDownloadFolders
+> = (options?) => {
+  const { mutate } = UseRequestProcessor();
+
+  const downloadFoldersFn = async (
+    data: IGetDownloadFolders,
+  ): Promise<void> => {
+    const res = await api.get(`${getURL("FOLDERS")}/download/${data.folderId}`);
+    return res.data;
+  };
+
+  const mutation = mutate(["useGetFolders"], downloadFoldersFn, options);
+  return mutation;
+};

src/frontend/src/pages/MainPage/services/index.ts

@@ -21,56 +21,6 @@ export async function getFolderById(folderId: string): Promise<FolderType> {
   }
 }
 
-export async function downloadFlowsFromFolders(folderId: string): Promise<{
-  flows: FlowType[];
-  folder_name: string;
-  folder_description: string;
-}> {
-  try {
-    const response = await api.get(
-      `${BASE_URL_API}folders/download/${folderId}`,
-    );
-    if (response?.status !== 200) {
-      throw new Error(`HTTP error! status: ${response?.status}`);
-    }
-    console.log(response.data);
-    return response.data;
-  } catch (error) {
-    console.error(error);
-    throw error;
-  }
-}
-
-export async function uploadFlowsFromFolders(
-  flows: FormData,
-): Promise<FlowType[]> {
-  try {
-    const response = await api.post(`${BASE_URL_API}folders/upload/`, flows);
-
-    if (response?.status !== 201) {
-      throw new Error(`HTTP error! status: ${response?.status}`);
-    }
-    return response.data;
-  } catch (error) {
-    console.error(error);
-    throw error;
-  }
-}
-
-export async function moveFlowToFolder(
-  flowId: string,
-  folderId: string,
-): Promise<FlowType> {
-  try {
-    const response = await api.patch(
-      `${BASE_URL_API}folders/move_to_folder/${flowId}/${folderId}`,
-    );
-    return response?.data;
-  } catch (error) {
-    throw error;
-  }
-}
-
 export async function uploadFlowToFolder(
   flows: FormData,
   folderId: string,

src/frontend/tests/end-to-end/generalBugs-shard-6.spec.ts

@@ -77,7 +77,7 @@ class CustomComponent(Component):
   await page.locator("textarea").press("Control+a");
   await page.locator("textarea").fill(customCodeWithError);
 
-  await page.getByRole("button", { name: "Check & Save" }).click();
+  await page.getByText("Check & Save").last().click();
 
   await page.waitForTimeout(1000);