refactor: add useQuery to delete folder api requests (#2901)

* 🐛 (generalBugs-shard-5.spec.ts): fix test to wait for elements to be interactable before performing actions to prevent flakiness

* ✨ (editFlowSettingsComponent): Add padding top class to improve styling of the component

📝 (folders/index.tsx): Add use-delete-folders query to handle deletion of folders

📝 (folders/use-delete-folders.ts): Create useDeleteFolders hook to handle deletion of folders

📝 (mainPage/index.tsx): Import useDeleteFolders hook and implement handleDeleteFolder function to delete folders and show success/error messages

* 🔧 (use-delete-folder.tsx): Remove unused file use-delete-folder.tsx
🔧 (mainPage/index.tsx): Remove import of use-delete-folder hook as it is no longer used

src/frontend/src/components/editFlowSettingsComponent/index.tsx

@@ -109,7 +109,7 @@ export const EditFlowSettings: React.FC<InputProps> = ({
         ) : (
           <div
             className={cn(
-              "max-h-[250px] overflow-auto font-normal text-muted-foreground word-break-break-word",
+              "max-h-[250px] overflow-auto pt-2 font-normal text-muted-foreground word-break-break-word",
               description === "" ? "font-light italic" : "",
             )}
           >

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

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

src/frontend/src/controllers/API/queries/folders/use-delete-folders.ts

@@ -0,0 +1,31 @@
+import { useMutationFunctionType } from "@/types/api";
+import { UseMutationResult } from "@tanstack/react-query";
+import { api } from "../../api";
+import { getURL } from "../../helpers/constants";
+import { UseRequestProcessor } from "../../services/request-processor";
+
+interface DeleteFoldersParams {
+  folder_id: string;
+}
+
+export const useDeleteFolders: useMutationFunctionType<
+  undefined,
+  DeleteFoldersParams
+> = (options?) => {
+  const { mutate } = UseRequestProcessor();
+
+  const deleteFolder = async ({
+    folder_id,
+  }: DeleteFoldersParams): Promise<any> => {
+    const res = await api.delete(`${getURL("FOLDERS")}/${folder_id}`);
+    return res.data;
+  };
+
+  const mutation: UseMutationResult<
+    DeleteFoldersParams,
+    any,
+    DeleteFoldersParams
+  > = mutate(["useDeleteFolders"], deleteFolder, options);
+
+  return mutation;
+};

src/frontend/src/pages/MainPage/hooks/use-delete-folder.tsx

@@ -1,33 +0,0 @@
-import useAlertStore from "../../../stores/alertStore";
-import { useFolderStore } from "../../../stores/foldersStore";
-import { deleteFolder, getFolderById } from "../services";
-
-const useDeleteFolder = ({ navigate }: { navigate: (url: string) => void }) => {
-  const setSuccessData = useAlertStore((state) => state.setSuccessData);
-  const setErrorData = useAlertStore((state) => state.setErrorData);
-  const folderToEdit = useFolderStore((state) => state.folderToEdit);
-  const myCollectionId = useFolderStore((state) => state.myCollectionId);
-  const getFoldersApi = useFolderStore((state) => state.getFoldersApi);
-
-  const handleDeleteFolder = () => {
-    deleteFolder(folderToEdit?.id!)
-      .then(() => {
-        setSuccessData({
-          title: "Folder deleted successfully.",
-        });
-        getFolderById(myCollectionId!);
-        getFoldersApi(true);
-        navigate("/all");
-      })
-      .catch((err) => {
-        console.error(err);
-        setErrorData({
-          title: "Error deleting folder.",
-        });
-      });
-  };
-
-  return { handleDeleteFolder };
-};
-
-export default useDeleteFolder;

src/frontend/src/pages/MainPage/pages/mainPage/index.tsx

@@ -1,3 +1,5 @@
+import { useDeleteFolders } from "@/controllers/API/queries/folders";
+import useAlertStore from "@/stores/alertStore";
 import { useEffect, useState } from "react";
 import { Outlet, useLocation, useNavigate } from "react-router-dom";
 import DropdownButton from "../../../../components/dropdownButtonComponent";
@@ -10,8 +12,8 @@ import {
 import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
 import { useFolderStore } from "../../../../stores/foldersStore";
 import ModalsComponent from "../../components/modalsComponent";
-import useDeleteFolder from "../../hooks/use-delete-folder";
 import useDropdownOptions from "../../hooks/use-dropdown-options";
+import { getFolderById } from "../../services";
 
 export default function HomePage(): JSX.Element {
   const uploadFlow = useFlowsManagerStore((state) => state.uploadFlow);
@@ -28,6 +30,12 @@ export default function HomePage(): JSX.Element {
   const setFolderToEdit = useFolderStore((state) => state.setFolderToEdit);
   const navigate = useNavigate();
 
+  const setSuccessData = useAlertStore((state) => state.setSuccessData);
+  const setErrorData = useAlertStore((state) => state.setErrorData);
+  const folderToEdit = useFolderStore((state) => state.folderToEdit);
+  const myCollectionId = useFolderStore((state) => state.myCollectionId);
+  const getFoldersApi = useFolderStore((state) => state.getFoldersApi);
+
   useEffect(() => {
     setCurrentFlowId("");
   }, [pathname]);
@@ -38,7 +46,31 @@ export default function HomePage(): JSX.Element {
     is_component,
   });
 
-  const { handleDeleteFolder } = useDeleteFolder({ navigate });
+  const { mutate } = useDeleteFolders();
+
+  const handleDeleteFolder = () => {
+    mutate(
+      {
+        folder_id: folderToEdit?.id!,
+      },
+      {
+        onSuccess: () => {
+          setSuccessData({
+            title: "Folder deleted successfully.",
+          });
+          getFolderById(myCollectionId!);
+          getFoldersApi(true);
+          navigate("/all");
+        },
+        onError: (err) => {
+          console.error(err);
+          setErrorData({
+            title: "Error deleting folder.",
+          });
+        },
+      },
+    );
+  };
 
   return (
     <>