From 4a9376aa86ae72b51747d1709a3c0d93aa717ce4 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Tue, 16 Jul 2024 15:10:25 -0300 Subject: [PATCH] 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 * 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 * 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 Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> Co-authored-by: Lucas Oliveira Co-authored-by: Lucas Oliveira <62335616+lucaseduoli@users.noreply.github.com> --- src/frontend/src/controllers/API/index.ts | 11 ------ .../queries/messages/use-delete-messages.ts | 31 +++++++++++++++ .../components/SessionView/hooks/index.tsx | 29 -------------- .../IOModal/components/SessionView/index.tsx | 28 +++++++++---- src/frontend/src/modals/IOModal/index.tsx | 39 +++++++++++++++---- .../hooks/use-remove-messages.tsx | 30 -------------- 6 files changed, 82 insertions(+), 86 deletions(-) delete mode 100644 src/frontend/src/modals/IOModal/components/SessionView/hooks/index.tsx delete mode 100644 src/frontend/src/pages/SettingsPage/pages/messagesPage/hooks/use-remove-messages.tsx diff --git a/src/frontend/src/controllers/API/index.ts b/src/frontend/src/controllers/API/index.ts index 5ca100d555d9..e25cc98c6538 100644 --- a/src/frontend/src/controllers/API/index.ts +++ b/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; - } -} diff --git a/src/frontend/src/controllers/API/queries/messages/use-delete-messages.ts b/src/frontend/src/controllers/API/queries/messages/use-delete-messages.ts index e69de29bb2d1..bdff094cffb7 100644 --- a/src/frontend/src/controllers/API/queries/messages/use-delete-messages.ts +++ b/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 => { + const response = await api.delete(`${getURL("MESSAGES")}`, { + data: ids, + }); + + return response.data; + }; + + const mutation: UseMutationResult< + DeleteMessagesParams, + any, + DeleteMessagesParams + > = mutate(["useDeleteMessages"], deleteMessage, options); + + return mutation; +}; diff --git a/src/frontend/src/modals/IOModal/components/SessionView/hooks/index.tsx b/src/frontend/src/modals/IOModal/components/SessionView/hooks/index.tsx deleted file mode 100644 index 17b44fd2b6a4..000000000000 --- a/src/frontend/src/modals/IOModal/components/SessionView/hooks/index.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { deleteMessagesFn } from "../../../../../controllers/API"; -import { useMessagesStore } from "../../../../../stores/messagesStore"; - -const useRemoveSession = (setSuccessData, setErrorData) => { - const deleteSession = useMessagesStore((state) => state.deleteSession); - const messages = useMessagesStore((state) => state.messages); - - const handleRemoveSession = async (session_id: string) => { - try { - await deleteMessagesFn( - messages - .filter((msg) => msg.session_id === session_id) - .map((msg) => msg.id), - ); - deleteSession(session_id); - setSuccessData({ - title: "Session deleted successfully.", - }); - } catch (error) { - setErrorData({ - title: "Error deleting Session.", - }); - } - }; - - return { handleRemoveSession }; -}; - -export default useRemoveSession; diff --git a/src/frontend/src/modals/IOModal/components/SessionView/index.tsx b/src/frontend/src/modals/IOModal/components/SessionView/index.tsx index fc4710431899..514d4de777be 100644 --- a/src/frontend/src/modals/IOModal/components/SessionView/index.tsx +++ b/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([]); - 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 ? (
diff --git a/src/frontend/src/modals/IOModal/index.tsx b/src/frontend/src/modals/IOModal/index.tsx index 391b59f7dbc6..4998fe8efb82 100644 --- a/src/frontend/src/modals/IOModal/index.tsx +++ b/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); }} diff --git a/src/frontend/src/pages/SettingsPage/pages/messagesPage/hooks/use-remove-messages.tsx b/src/frontend/src/pages/SettingsPage/pages/messagesPage/hooks/use-remove-messages.tsx deleted file mode 100644 index 36cb24531546..000000000000 --- a/src/frontend/src/pages/SettingsPage/pages/messagesPage/hooks/use-remove-messages.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { deleteMessagesFn } from "../../../../../controllers/API"; -import { useMessagesStore } from "../../../../../stores/messagesStore"; - -const useRemoveMessages = ( - setSelectedRows: (data: string[]) => void, - setSuccessData: (data: { title: string }) => void, - setErrorData: (data: { title: string }) => void, - selectedRows: string[], -) => { - const deleteMessages = useMessagesStore((state) => state.removeMessages); - - const handleRemoveMessages = async () => { - try { - await deleteMessagesFn(selectedRows); - deleteMessages(selectedRows); - setSelectedRows([]); - setSuccessData({ - title: "Messages deleted successfully.", - }); - } catch (error) { - setErrorData({ - title: "Error deleting messages.", - }); - } - }; - - return { handleRemoveMessages }; -}; - -export default useRemoveMessages;