refactor: update edit messages text on Session view compoenent (#2715)

* feat: Add useUpdateMessages hook for updating messages

* refactor: Update useUpdateMessages hook to use singular naming convention

* refactor: update on session view

* [autofix.ci] apply automated fixes

* refactor: delete unused function

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

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

@@ -1081,10 +1081,3 @@ export async function deleteMessagesFn(ids: string[]) {
     throw error;
   }
 }
-
-export async function updateMessageApi(data: Message) {
-  if (data.files && typeof data.files === "string") {
-    data.files = JSON.parse(data.files);
-  }
-  return await api.put(`${BASE_URL_API}monitor/messages/${data.id}`, data);
-}

src/frontend/src/controllers/API/queries/messages/use-update-messages.ts

@@ -0,0 +1,32 @@
+import { useMutationFunctionType } from "@/types/api";
+import { Message } from "@/types/messages";
+import { UseMutationResult } from "@tanstack/react-query";
+import { api } from "../../api";
+import { getURL } from "../../helpers/constants";
+import { UseRequestProcessor } from "../../services/request-processor";
+
+interface UpdateMessageParams {
+  message: Message;
+}
+
+export const useUpdateMessage: useMutationFunctionType<UpdateMessageParams> = (
+  options?,
+) => {
+  const { mutate } = UseRequestProcessor();
+
+  const updateMessageApi = async (data: Message) => {
+    if (data.files && typeof data.files === "string") {
+      data.files = JSON.parse(data.files);
+    }
+    const result = await api.put(`${getURL("MESSAGES")}/${data.id}`, data);
+    return result.data;
+  };
+
+  const mutation: UseMutationResult<
+    UpdateMessageParams,
+    any,
+    UpdateMessageParams
+  > = mutate(["useUpdateMessages"], updateMessageApi, options);
+
+  return mutation;
+};

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

@@ -1,5 +1,8 @@
 import Loading from "@/components/ui/loading";
-import { useGetMessagesQuery } from "@/controllers/API/queries/messages";
+import {
+  useGetMessagesQuery,
+  useUpdateMessage,
+} from "@/controllers/API/queries/messages";
 import { useIsFetching } from "@tanstack/react-query";
 import {
   CellEditRequestEvent,
@@ -10,7 +13,6 @@ 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 useUpdateMessage from "../../../../pages/SettingsPage/pages/messagesPage/hooks/use-updateMessage";
 import useAlertStore from "../../../../stores/alertStore";
 import { useMessagesStore } from "../../../../stores/messagesStore";
 import { messagesSorter } from "../../../../utils/utils";
@@ -26,6 +28,7 @@ export default function SessionView({
   const messages = useMessagesStore((state) => state.messages);
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const setSuccessData = useAlertStore((state) => state.setSuccessData);
+  const updateMessage = useMessagesStore((state) => state.updateMessage);
 
   const isFetching = useIsFetching({
     queryKey: ["useGetMessagesQuery"],
@@ -40,7 +43,7 @@ export default function SessionView({
     selectedRows,
   );
 
-  const { handleUpdate } = useUpdateMessage(setSuccessData, setErrorData);
+  const { mutate: updateMessageMutation } = useUpdateMessage();
 
   function handleUpdateMessage(event: NewValueParams<any, string>) {
     const newValue = event.newValue;
@@ -50,9 +53,21 @@ export default function SessionView({
       ...row,
       [field]: newValue,
     };
-    handleUpdate(data).catch((error) => {
+    updateMessageMutation(data, {
-      event.data[field] = event.oldValue;
+      onSuccess: () => {
-      event.api.refreshCells();
+        updateMessage(data);
+        // Set success message
+        setSuccessData({
+          title: "Messages updated successfully.",
+        });
+      },
+      onError: () => {
+        setErrorData({
+          title: "Error updating messages.",
+        });
+        event.data[field] = event.oldValue;
+        event.api.refreshCells();
+      },
     });
   }
 

src/frontend/src/pages/SettingsPage/pages/messagesPage/hooks/use-updateMessage.tsx

@@ -1,33 +0,0 @@
-import { updateMessageApi } from "../../../../../controllers/API";
-import { useMessagesStore } from "../../../../../stores/messagesStore";
-import { Message } from "../../../../../types/messages";
-
-const useUpdateMessage = (
-  setSuccessData: (data: { title: string; list?: string[] }) => void,
-  setErrorData: (data: { title: string; list?: string[] }) => void,
-) => {
-  const updateMessage = useMessagesStore((state) => state.updateMessage);
-
-  const handleUpdate = async (data: Message) => {
-    try {
-      await updateMessageApi(data);
-
-      updateMessage(data);
-
-      // Set success message
-      setSuccessData({
-        title: "Messages updated successfully.",
-      });
-    } catch (error) {
-      // Set error message
-      setErrorData({
-        title: "Error updating messages.",
-      });
-      return Promise.reject(error);
-    }
-  };
-
-  return { handleUpdate };
-};
-
-export default useUpdateMessage;