refactor: add new use-query endpoint of upload files

src/frontend/src/App.tsx

@@ -38,7 +38,6 @@ export default function App() {
   const dark = useDarkStore((state) => state.dark);
 
   const isLoadingFolders = useFolderStore((state) => state.isLoadingFolders);
-  useGetVersionQuery(undefined, "updateState");
 
   const [isLoadingHealth, setIsLoadingHealth] = useState(false);
   useEffect(() => {

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

@@ -1,3 +1,4 @@
+import { usePostUploadFile } from "@/controllers/API/queries/files/use-post-upload-file";
 import { useEffect, useState } from "react";
 import {
   CONSOLE_ERROR_MSG,
@@ -46,6 +47,8 @@ export default function InputFileComponent({
     setMyValue(value);
   }, [value]);
 
+  const mutation = usePostUploadFile();
+
   const handleButtonClick = (): void => {
     // Create a file input element
     const input = document.createElement("input");
@@ -63,24 +66,27 @@ export default function InputFileComponent({
       // Check if the file type is correct
       if (file && checkFileType(file.name)) {
         // Upload the file
-        uploadFile(file, currentFlowId)
-          .then((res) => res.data)
-          .then((data) => {
-            // Get the file name from the response
-            const { file_path } = data;
+        mutation.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
-            onFileChange(file_path);
-            // Update the state and callback with the name of the file
-            // sets the value to the user
-            setMyValue(file.name);
-            onChange(file.name);
-            setLoading(false);
-          })
-          .catch(() => {
-            console.error(CONSOLE_ERROR_MSG);
-            setLoading(false);
-          });
+              // sets the value that goes to the backend
+              onFileChange(file_path);
+              // Update the state and on with the name of the file
+              // sets the value to the user
+              setMyValue(file.name);
+              onChange(file.name);
+              setLoading(false);
+            },
+            onError: () => {
+              console.error(CONSOLE_ERROR_MSG);
+              setLoading(false);
+            },
+          },
+        );
       } else {
         // Show an error if the file type is not allowed
         setErrorData({

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

@@ -3,6 +3,7 @@ import { BASE_URL_API } from "../../../constants/constants";
 export const URLs = {
   TRANSACTIONS: `monitor/transactions`,
   API_KEY: `api_key`,
+  FILES: `files`,
   VERSION: `version`,
 } as const;
 

src/frontend/src/controllers/API/queries/api-keys/use-post-add-api-key.ts

@@ -9,10 +9,9 @@ interface IPostAddApiKey {
 }
 
 // add types for error handling and success
-export const usePostAddApiKey: useMutationFunctionType<IPostAddApiKey> = ({
-  callbackSuccess,
-  callbackError,
-}) => {
+export const usePostAddApiKey: useMutationFunctionType<IPostAddApiKey> = (
+  options,
+) => {
   const { mutate } = UseRequestProcessor();
 
   const postAddApiKeyFn = async (payload: IPostAddApiKey): Promise<any> => {
@@ -27,18 +26,7 @@ export const usePostAddApiKey: useMutationFunctionType<IPostAddApiKey> = ({
       const res = await postAddApiKeyFn(payload);
       return res.data;
     },
-    {
-      onError: (err) => {
-        if (callbackError) {
-          callbackError(err);
-        }
-      },
-      onSuccess: (data) => {
-        if (callbackSuccess) {
-          callbackSuccess(data);
-        }
-      },
-    },
+    options,
   );
 
   return mutation;

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

@@ -0,0 +1,3 @@
+export * from "./use-get-download-images";
+export * from "./use-get-profile-pictures";
+export * from "./use-post-upload-file";

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

@@ -0,0 +1,38 @@
+import { keepPreviousData } from "@tanstack/react-query";
+import { useQueryFunctionType } from "../../../../types/api";
+import { api } from "../../api";
+import { getURL } from "../../helpers/constants";
+import { UseRequestProcessor } from "../../services/request-processor";
+
+interface DownloadImagesQueryParams {
+  flowId: string;
+  fileName: string;
+}
+
+export interface DownloadImagesResponse {
+  response: string;
+}
+
+export const useGetDownloadImagesQuery: useQueryFunctionType<
+  DownloadImagesQueryParams,
+  DownloadImagesResponse
+> = ({ flowId, fileName }) => {
+  const { query } = UseRequestProcessor();
+
+  const getDownloadImagesFn = async () => {
+    const response = await api.get<DownloadImagesResponse>(
+      `${getURL("FILES")}/images/${flowId}/${fileName}`,
+    );
+    return response["data"];
+  };
+
+  const queryResult = query(
+    ["useGetDownloadImagesQuery"],
+    getDownloadImagesFn,
+    {
+      placeholderData: keepPreviousData,
+    },
+  );
+
+  return queryResult;
+};

src/frontend/src/controllers/API/queries/files/use-get-profile-pictures.ts

@@ -0,0 +1,36 @@
+import { keepPreviousData } from "@tanstack/react-query";
+import { useQueryFunctionType } from "../../../../types/api";
+import { api } from "../../api";
+import { getURL } from "../../helpers/constants";
+import { UseRequestProcessor } from "../../services/request-processor";
+
+interface ProfilePicturesQueryParams {}
+
+export interface ProfilePicturesResponse {
+  files: string[];
+}
+
+export const useGetProfilePicturesQuery: useQueryFunctionType<
+  ProfilePicturesQueryParams,
+  ProfilePicturesResponse
+> = () => {
+  const { query } = UseRequestProcessor();
+
+  const getProfilePicturesFn = async () => {
+    const response = await api.get<ProfilePicturesResponse>(
+      `${getURL("FILES")}/profile_pictures/list`,
+    );
+
+    return response.data;
+  };
+
+  const queryResult = query(
+    ["useGetProfilePicturesQuery"],
+    getProfilePicturesFn,
+    {
+      placeholderData: keepPreviousData,
+    },
+  );
+
+  return queryResult;
+};

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

@@ -0,0 +1,40 @@
+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 IPostUploadFile {
+  file: File;
+  id: string;
+}
+
+export const usePostUploadFile: useMutationFunctionType<IPostUploadFile> = (
+  options?,
+) => {
+  const { mutate } = UseRequestProcessor();
+
+  const postUploadFileFn = async (payload: IPostUploadFile): Promise<any> => {
+    const formData = new FormData();
+    formData.append("file", payload.file);
+
+    const response = await api.post<any>(
+      `${getURL("FILES")}/upload/${payload.id}`,
+      formData,
+    );
+
+    return response.data;
+  };
+
+  const mutation: UseMutationResult<IPostUploadFile, any, IPostUploadFile> =
+    mutate(
+      ["usePostUploadFile"],
+      async (payload: IPostUploadFile) => {
+        const res = await postUploadFileFn(payload);
+        return res;
+      },
+      options,
+    );
+
+  return mutation;
+};

src/frontend/src/controllers/API/queries/transactions/use-get-transactions.ts

@@ -39,29 +39,24 @@ export const useGetTransactionsQuery: useQueryFunctionType<
     }
   };
 
-  const getTransactionsFn = async (id: string, params = {}) => {
+  const getTransactionsFn = async () => {
     const config = {};
     config["params"] = { flow_id: id };
     if (params) {
       config["params"] = { ...config["params"], ...params };
     }
 
-    return await api.get<TransactionsResponse>(
+    const rows = await api.get<TransactionsResponse>(
       `${getURL("TRANSACTIONS")}`,
       config,
     );
+
+    return responseFn(rows);
   };
 
-  const queryResult = query(
-    ["useGetTransactionsQuery"],
-    async () => {
-      const rows = await getTransactionsFn(id, params);
-      return responseFn(rows);
-    },
-    {
-      placeholderData: keepPreviousData,
-    },
-  );
+  const queryResult = query(["useGetTransactionsQuery"], getTransactionsFn, {
+    placeholderData: keepPreviousData,
+  });
 
   return queryResult;
 };

src/frontend/src/controllers/API/services/request-processor.ts

@@ -1,4 +1,10 @@
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  useMutation,
+  UseMutationOptions,
+  useQuery,
+  useQueryClient,
+  UseQueryOptions,
+} from "@tanstack/react-query";
 import { MutationFunctionType, QueryFunctionType } from "../../../types/api";
 
 export function UseRequestProcessor(): {
@@ -7,19 +13,30 @@ export function UseRequestProcessor(): {
 } {
   const queryClient = useQueryClient();
 
-  function query(queryKey, queryFn, options = {}) {
+  function query(
+    queryKey: UseQueryOptions["queryKey"],
+    queryFn: UseQueryOptions["queryFn"],
+    options: Omit<UseQueryOptions, "queryFn" | "queryKey"> = {},
+  ) {
     return useQuery({
       queryKey,
       queryFn,
       ...options,
     });
   }
 
-  function mutate(mutationKey, mutationFn, options = {}) {
+  function mutate(
+    mutationKey: UseMutationOptions["mutationKey"],
+    mutationFn: UseMutationOptions["mutationFn"],
+    options: Omit<UseMutationOptions, "mutationFn" | "mutationKey"> = {},
+  ) {
     return useMutation({
       mutationKey,
       mutationFn,
-      onSettled: () => queryClient.invalidateQueries(mutationKey),
+      onSettled: (data, error, variables, context) => {
+        queryClient.invalidateQueries({ queryKey: mutationKey });
+        options.onSettled && options.onSettled(data, error, variables, context);
+      },
       ...options,
     });
   }

src/frontend/src/modals/IOModal/components/IOFieldView/components/FileInput/index.tsx

@@ -1,5 +1,6 @@
 import { Button } from "../../../../../../components/ui/button";
 
+import { usePostUploadFile } from "@/controllers/API/queries/files/use-post-upload-file";
 import { useEffect, useState } from "react";
 import IconComponent from "../../../../../../components/genericIconComponent";
 import { BASE_URL_API } from "../../../../../../constants/constants";
@@ -66,6 +67,8 @@ export default function IOFileInput({ field, updateValue }: IOFileInputProps) {
     setIsDragging(false);
   };
 
+  const mutation = usePostUploadFile();
+
   const upload = async (file) => {
     if (file) {
       // Check if a file was selected
@@ -80,17 +83,18 @@ export default function IOFileInput({ field, updateValue }: IOFileInputProps) {
         document.body.appendChild(imgElement); // Add the image to the body or replace this with your desired location
       };
       fileReader.readAsDataURL(file);
-
-      uploadFile(file, currentFlowId)
-        .then((res) => res.data)
-        .then((data) => {
-          // Get the file name from the response
-          const { file_path, flowId } = data;
-          setFilePath(file_path);
-        })
-        .catch(() => {
-          console.error("Error occurred while uploading file");
-        });
+      mutation.mutate(
+        { file, id: currentFlowId },
+        {
+          onSuccess: (data) => {
+            const { file_path } = data;
+            setFilePath(file_path);
+          },
+          onError: () => {
+            console.error("Error occurred while uploading file");
+          },
+        },
+      );
     }
   };