refactor: optimize deletion of messages (#2714)

* feat: optimize deletion of messages in SessionView component

This commit optimizes the deletion of messages in the SessionView component by using the useDeleteMessages hook from the API queries. It replaces the useRemoveMessages hook that was previously used. The new implementation handles the deletion of messages more efficiently and provides better error handling. The selectedRows state is updated after successful deletion, and a success message is displayed to the user. In case of an error, an error message is shown.

Co-authored-by: Gabriel Luiz Freitas Almeida <[email protected]>

* feat: optimize deletion of messages in SessionView component

This commit optimizes the deletion of messages in the SessionView component by using the useDeleteMessages hook from the API queries. It replaces the useRemoveMessages hook that was previously used. The new implementation handles the deletion of messages more efficiently and provides better error handling. The selectedRows state is updated after successful deletion, and a success message is displayed to the user. In case of an error, an error message is shown.

Co-authored-by: Gabriel Luiz Freitas Almeida <[email protected]>

* refactor: optimize deletion of messages in SessionView component

This commit optimizes the deletion of messages in the SessionView component by using the useDeleteMessages hook from the API queries. It replaces the useRemoveMessages hook that was previously used. The new implementation handles the deletion of messages more efficiently and provides better error handling. The selectedRows state is updated after successful deletion, and a success message is displayed to the user. In case of an error, an error message is shown.

* [autofix.ci] apply automated fixes

---------

Co-authored-by: Gabriel Luiz Freitas Almeida <[email protected]>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Lucas Oliveira <[email protected]>
Co-authored-by: Lucas Oliveira <[email protected]>

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

@@ -1070,14 +1070,3 @@ export async function getTransactionTable(
   const columns = extractColumnsFromRows(rows.data, mode);
   return { rows: rows.data, columns };
 }
-
-export async function deleteMessagesFn(ids: string[]) {
-  try {
-    return await api.delete(`${BASE_URL_API}monitor/messages`, {
-      data: ids,
-    });
-  } catch (error) {
-    console.error("Error deleting flows:", error);
-    throw error;
-  }
-}

src/frontend/src/controllers/API/queries/messages/use-delete-messages.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 DeleteMessagesParams {
+  ids: string[];
+}
+
+export const useDeleteMessages: useMutationFunctionType<
+  DeleteMessagesParams
+> = (options?) => {
+  const { mutate } = UseRequestProcessor();
+
+  const deleteMessage = async ({ ids }: DeleteMessagesParams): Promise<any> => {
+    const response = await api.delete(`${getURL("MESSAGES")}`, {
+      data: ids,
+    });
+
+    return response.data;
+  };
+
+  const mutation: UseMutationResult<
+    DeleteMessagesParams,
+    any,
+    DeleteMessagesParams
+  > = mutate(["useDeleteMessages"], deleteMessage, options);
+
+  return mutation;
+};

src/frontend/src/modals/IOModal/components/SessionView/index.tsx

@@ -1,5 +1,6 @@
 import Loading from "@/components/ui/loading";
 import {
+  useDeleteMessages,
   useGetMessagesQuery,
   useUpdateMessage,
 } from "@/controllers/API/queries/messages";
@@ -12,7 +13,6 @@ import {
 import cloneDeep from "lodash/cloneDeep";
 import { useMemo, useState } from "react";
 import TableComponent from "../../../../components/tableComponent";
-import useRemoveMessages from "../../../../pages/SettingsPage/pages/messagesPage/hooks/use-remove-messages";
 import useAlertStore from "../../../../stores/alertStore";
 import { useMessagesStore } from "../../../../stores/messagesStore";
 import { messagesSorter } from "../../../../utils/utils";
@@ -29,19 +29,27 @@ export default function SessionView({
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const setSuccessData = useAlertStore((state) => state.setSuccessData);
   const updateMessage = useMessagesStore((state) => state.updateMessage);
-
+  const deleteMessagesStore = useMessagesStore((state) => state.removeMessages);
   const isFetching = useIsFetching({
     queryKey: ["useGetMessagesQuery"],
     exact: false,
   });
   const [selectedRows, setSelectedRows] = useState<string[]>([]);
 
-  const { handleRemoveMessages } = useRemoveMessages(
-    setSelectedRows,
-    setSuccessData,
-    setErrorData,
-    selectedRows,
-  );
+  const { mutate: deleteMessages } = useDeleteMessages({
+    onSuccess: () => {
+      deleteMessagesStore(selectedRows);
+      setSelectedRows([]);
+      setSuccessData({
+        title: "Messages deleted successfully.",
+      });
+    },
+    onError: () => {
+      setErrorData({
+        title: "Error deleting messages.",
+      });
+    },
+  });
 
   const { mutate: updateMessageMutation } = useUpdateMessage();
 
@@ -81,6 +89,10 @@ export default function SessionView({
     return filteredMessages;
   }, [session, id, messages]);
 
+  function handleRemoveMessages() {
+    deleteMessages({ ids: selectedRows });
+  }
+
   return isFetching > 0 ? (
     <div className="flex h-full w-full items-center justify-center align-middle">
       <Loading></Loading>

src/frontend/src/modals/IOModal/index.tsx

@@ -1,4 +1,7 @@
-import { useGetMessagesQuery } from "@/controllers/API/queries/messages";
+import {
+  useDeleteMessages,
+  useGetMessagesQuery,
+} from "@/controllers/API/queries/messages";
 import { useQueryClient } from "@tanstack/react-query";
 import { useEffect, useState } from "react";
 import AccordionComponent from "../../components/accordionComponent";
@@ -24,7 +27,6 @@ import { cn } from "../../utils/utils";
 import BaseModal from "../baseModal";
 import IOFieldView from "./components/IOFieldView";
 import SessionView from "./components/SessionView";
-import useRemoveSession from "./components/SessionView/hooks";
 import ChatView from "./components/chatView";
 
 export default function IOModal({
@@ -57,6 +59,32 @@ export default function IOModal({
   );
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const setSuccessData = useAlertStore((state) => state.setSuccessData);
+  const deleteSession = useMessagesStore((state) => state.deleteSession);
+
+  const { mutate: deleteSessionFunction } = useDeleteMessages();
+
+  function handleDeleteSession(session_id: string) {
+    deleteSessionFunction(
+      {
+        ids: messages
+          .filter((msg) => msg.session_id === session_id)
+          .map((msg) => msg.id),
+      },
+      {
+        onSuccess: () => {
+          setSuccessData({
+            title: "Session deleted successfully.",
+          });
+          deleteSession(session_id);
+        },
+        onError: () => {
+          setErrorData({
+            title: "Error deleting Session.",
+          });
+        },
+      },
+    );
+  }
 
   function startView() {
     if (!chatInput && !chatOutput) {
@@ -126,11 +154,6 @@ export default function IOModal({
     }
   }
 
-  const { handleRemoveSession } = useRemoveSession(
-    setSuccessData,
-    setErrorData,
-  );
-
   useEffect(() => {
     setSelectedTab(inputs.length > 0 ? 1 : outputs.length > 0 ? 2 : 0);
   }, [allNodes.length]);
@@ -371,7 +394,7 @@ export default function IOModal({
                               onClick={(e) => {
                                 e.preventDefault();
                                 e.stopPropagation();
-                                handleRemoveSession(session);
+                                handleDeleteSession(session);
                                 if (selectedViewField?.id === session)
                                   setSelectedViewField(undefined);
                               }}