From 44ffe8e6cd099f4ad866751502039f46a65a56e9 Mon Sep 17 00:00:00 2001 From: Cristhian Zanforlin Lousa <72977554+Cristhianzl@users.noreply.github.com> Date: Wed, 24 Jul 2024 22:25:27 -0300 Subject: [PATCH] refactor: change downloadFolders requests to use useQuery hook (#2920) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * ✨ (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 --- .../components/sideBarFolderButtons/index.tsx | 35 +++++++++++-- .../hooks/use-on-file-drop.tsx | 5 +- .../folders/use-get-download-folders.ts | 25 ++++++++++ .../src/pages/MainPage/services/index.ts | 50 ------------------- .../end-to-end/generalBugs-shard-6.spec.ts | 2 +- 5 files changed, 59 insertions(+), 58 deletions(-) create mode 100644 src/frontend/src/controllers/API/queries/folders/use-get-download-folders.ts diff --git a/src/frontend/src/components/sidebarComponent/components/sideBarFolderButtons/index.tsx b/src/frontend/src/components/sidebarComponent/components/sideBarFolderButtons/index.tsx index b275775d0ff..4b8d7c2873c 100644 --- a/src/frontend/src/components/sidebarComponent/components/sideBarFolderButtons/index.tsx +++ b/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(); diff --git a/src/frontend/src/components/sidebarComponent/hooks/use-on-file-drop.tsx b/src/frontend/src/components/sidebarComponent/hooks/use-on-file-drop.tsx index 182e1d32583..216fde9f93e 100644 --- a/src/frontend/src/components/sidebarComponent/hooks/use-on-file-drop.tsx +++ b/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"; diff --git a/src/frontend/src/controllers/API/queries/folders/use-get-download-folders.ts b/src/frontend/src/controllers/API/queries/folders/use-get-download-folders.ts new file mode 100644 index 00000000000..ab367dce37c --- /dev/null +++ b/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 => { + const res = await api.get(`${getURL("FOLDERS")}/download/${data.folderId}`); + return res.data; + }; + + const mutation = mutate(["useGetFolders"], downloadFoldersFn, options); + return mutation; +}; diff --git a/src/frontend/src/pages/MainPage/services/index.ts b/src/frontend/src/pages/MainPage/services/index.ts index cad40bf28fd..eee9be4a8ca 100644 --- a/src/frontend/src/pages/MainPage/services/index.ts +++ b/src/frontend/src/pages/MainPage/services/index.ts @@ -21,56 +21,6 @@ export async function getFolderById(folderId: string): Promise { } } -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 { - 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 { - 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, diff --git a/src/frontend/tests/end-to-end/generalBugs-shard-6.spec.ts b/src/frontend/tests/end-to-end/generalBugs-shard-6.spec.ts index 6058b61a3b5..b25d6f62b28 100644 --- a/src/frontend/tests/end-to-end/generalBugs-shard-6.spec.ts +++ b/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);