From ca3367d8e557f4c17040b41259c72fdf02fd9d40 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Mon, 8 Jul 2024 18:05:31 -0300 Subject: [PATCH] fix: Refactor messages API and session view (#2577) * feat: create boilerplate code for messages api * centering functionality on one component * refactor useGetMessages * update to new type format * refactor Session view and get messages logic * update to session view to useGetMessageQuery * remove old api call * feat: create boilerplate code for messages api * centering functionality on one component * refactor useGetMessages * update to new type format * refactor Session view and get messages logic * update to session view to useGetMessageQuery * remove old api call * [autofix.ci] apply automated fixes --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> Co-authored-by: Cristhian Zanforlin Lousa <72977554+Cristhianzl@users.noreply.github.com> --- .../src/controllers/API/helpers/constants.ts | 1 + src/frontend/src/controllers/API/index.ts | 25 ------- .../controllers/API/queries/messages/index.ts | 3 + .../queries/messages/use-delete-messages.ts | 0 .../API/queries/messages/use-get-messages.ts | 53 ++++++++++++++ .../queries/messages/use-update-messages.ts | 0 .../IOModal/components/SessionView/index.tsx | 30 +++++++- src/frontend/src/modals/IOModal/index.tsx | 44 ++++------- .../messagesPage/hooks/use-messages-table.tsx | 27 ------- .../SettingsPage/pages/messagesPage/index.tsx | 73 +------------------ 10 files changed, 103 insertions(+), 153 deletions(-) create mode 100644 src/frontend/src/controllers/API/queries/messages/index.ts create mode 100644 src/frontend/src/controllers/API/queries/messages/use-delete-messages.ts create mode 100644 src/frontend/src/controllers/API/queries/messages/use-get-messages.ts create mode 100644 src/frontend/src/controllers/API/queries/messages/use-update-messages.ts delete mode 100644 src/frontend/src/pages/SettingsPage/pages/messagesPage/hooks/use-messages-table.tsx diff --git a/src/frontend/src/controllers/API/helpers/constants.ts b/src/frontend/src/controllers/API/helpers/constants.ts index 18c34f076..774655892 100644 --- a/src/frontend/src/controllers/API/helpers/constants.ts +++ b/src/frontend/src/controllers/API/helpers/constants.ts @@ -5,6 +5,7 @@ export const URLs = { API_KEY: `api_key`, FILES: `files`, VERSION: `version`, + MESSAGES: `monitor/messages`, } as const; export function getURL(key: keyof typeof URLs, params: any = {}) { diff --git a/src/frontend/src/controllers/API/index.ts b/src/frontend/src/controllers/API/index.ts index e586e2803..b1b0354a5 100644 --- a/src/frontend/src/controllers/API/index.ts +++ b/src/frontend/src/controllers/API/index.ts @@ -1071,31 +1071,6 @@ export async function getTransactionTable( return { rows: rows.data, columns }; } -export async function getMessagesTable( - mode: "intersection" | "union", - id?: string, - excludedFields?: string[], - params = {}, -): Promise<{ rows: Array; columns: Array }> { - const config = {}; - if (id) { - config["params"] = { flow_id: id }; - } - if (params) { - config["params"] = { ...config["params"], ...params }; - } - const rows = await api.get(`${BASE_URL_API}monitor/messages`, config); - - const rowsOrganized = rows.data; - - const columns = extractColumnsFromRows(rowsOrganized, mode, excludedFields); - const sessions = new Set(); - rowsOrganized.forEach((row) => { - sessions.add(row.session_id); - }); - return { rows: rowsOrganized, columns }; -} - export async function deleteMessagesFn(ids: string[]) { try { return await api.delete(`${BASE_URL_API}monitor/messages`, { diff --git a/src/frontend/src/controllers/API/queries/messages/index.ts b/src/frontend/src/controllers/API/queries/messages/index.ts new file mode 100644 index 000000000..986efe801 --- /dev/null +++ b/src/frontend/src/controllers/API/queries/messages/index.ts @@ -0,0 +1,3 @@ +export * from "./use-delete-messages"; +export * from "./use-get-messages"; +export * from "./use-update-messages"; 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 new file mode 100644 index 000000000..e69de29bb diff --git a/src/frontend/src/controllers/API/queries/messages/use-get-messages.ts b/src/frontend/src/controllers/API/queries/messages/use-get-messages.ts new file mode 100644 index 000000000..380d22ed7 --- /dev/null +++ b/src/frontend/src/controllers/API/queries/messages/use-get-messages.ts @@ -0,0 +1,53 @@ +import { useMessagesStore } from "@/stores/messagesStore"; +import { keepPreviousData } from "@tanstack/react-query"; +import { ColDef, ColGroupDef } from "ag-grid-community"; +import { useQueryFunctionType } from "../../../../types/api"; +import { extractColumnsFromRows } from "../../../../utils/utils"; +import { api } from "../../api"; +import { getURL } from "../../helpers/constants"; +import { UseRequestProcessor } from "../../services/request-processor"; + +interface MessagesQueryParams { + id?: string; + mode: "intersection" | "union"; + excludedFields?: string[]; + params?: object; +} + +interface MessagesResponse { + rows: Array; + columns: Array; +} + +export const useGetMessagesQuery: useQueryFunctionType< + MessagesQueryParams, + MessagesResponse +> = ({ id, mode, excludedFields, params }, options) => { + const { query } = UseRequestProcessor(); + + const getMessagesFn = async (id?: string, params = {}) => { + const config = {}; + if (id) { + config["params"] = { flow_id: id }; + } + if (params) { + config["params"] = { ...config["params"], ...params }; + } + return await api.get(`${getURL("MESSAGES")}`, config); + }; + + const responseFn = async () => { + const data = await getMessagesFn(id, params); + const columns = extractColumnsFromRows(data.data, mode, excludedFields); + useMessagesStore.getState().setMessages(data.data); + useMessagesStore.getState().setColumns(columns); + return { rows: data, columns }; + }; + + const queryResult = query(["useGetMessagesQuery", { id }], responseFn, { + placeholderData: keepPreviousData, + ...options, + }); + + return queryResult; +}; diff --git a/src/frontend/src/controllers/API/queries/messages/use-update-messages.ts b/src/frontend/src/controllers/API/queries/messages/use-update-messages.ts new file mode 100644 index 000000000..e69de29bb diff --git a/src/frontend/src/modals/IOModal/components/SessionView/index.tsx b/src/frontend/src/modals/IOModal/components/SessionView/index.tsx index 21b64cfb1..6752e21fe 100644 --- a/src/frontend/src/modals/IOModal/components/SessionView/index.tsx +++ b/src/frontend/src/modals/IOModal/components/SessionView/index.tsx @@ -1,3 +1,6 @@ +import Loading from "@/components/ui/loading"; +import { useGetMessagesQuery } from "@/controllers/API/queries/messages"; +import { useIsFetching } from "@tanstack/react-query"; import { CellEditRequestEvent, NewValueParams, @@ -12,11 +15,22 @@ import useAlertStore from "../../../../stores/alertStore"; import { useMessagesStore } from "../../../../stores/messagesStore"; import { messagesSorter } from "../../../../utils/utils"; -export default function SessionView({ rows }: { rows: Array }) { +export default function SessionView({ + session, + id, +}: { + session?: string; + id?: string; +}) { const columns = useMessagesStore((state) => state.columns); + const messages = useMessagesStore((state) => state.messages); const setErrorData = useAlertStore((state) => state.setErrorData); const setSuccessData = useAlertStore((state) => state.setSuccessData); + const isFetching = useIsFetching({ + queryKey: ["useGetMessagesQuery"], + exact: false, + }); const [selectedRows, setSelectedRows] = useState([]); const { handleRemoveMessages } = useRemoveMessages( @@ -42,7 +56,17 @@ export default function SessionView({ rows }: { rows: Array }) { }); } - return ( + let filteredMessages = session + ? messages.filter((message) => message.session_id === session) + : messages; + filteredMessages = id + ? filteredMessages.filter((message) => message.flow_id === id) + : filteredMessages; + return isFetching > 0 ? ( +
+ +
+ ) : ( }) { suppressRowClickSelection={true} pagination={true} columnDefs={columns.sort(messagesSorter)} - rowData={rows} + rowData={filteredMessages} /> ); } diff --git a/src/frontend/src/modals/IOModal/index.tsx b/src/frontend/src/modals/IOModal/index.tsx index 4ff0e6393..391b59f7d 100644 --- a/src/frontend/src/modals/IOModal/index.tsx +++ b/src/frontend/src/modals/IOModal/index.tsx @@ -1,3 +1,5 @@ +import { useGetMessagesQuery } from "@/controllers/API/queries/messages"; +import { useQueryClient } from "@tanstack/react-query"; import { useEffect, useState } from "react"; import AccordionComponent from "../../components/accordionComponent"; import IconComponent from "../../components/genericIconComponent"; @@ -12,14 +14,12 @@ import { } from "../../components/ui/tabs"; import { CHAT_FORM_DIALOG_SUBTITLE } from "../../constants/constants"; import { InputOutput } from "../../constants/enums"; -import { getMessagesTable } from "../../controllers/API"; import useAlertStore from "../../stores/alertStore"; import useFlowStore from "../../stores/flowStore"; import useFlowsManagerStore from "../../stores/flowsManagerStore"; import { useMessagesStore } from "../../stores/messagesStore"; import { IOModalPropsType } from "../../types/components"; import { NodeDataType, NodeType } from "../../types/flow"; -import { updateVerticesOrder } from "../../utils/buildUtils"; import { cn } from "../../utils/utils"; import BaseModal from "../baseModal"; import IOFieldView from "./components/IOFieldView"; @@ -34,7 +34,6 @@ export default function IOModal({ disable, }: IOModalPropsType): JSX.Element { const allNodes = useFlowStore((state) => state.nodes); - const setMessages = useMessagesStore((state) => state.setMessages); const inputs = useFlowStore((state) => state.inputs).filter( (input) => input.type !== "ChatInput", ); @@ -85,9 +84,13 @@ export default function IOModal({ const setNode = useFlowStore((state) => state.setNode); const [sessions, setSessions] = useState([]); const messages = useMessagesStore((state) => state.messages); - const setColumns = useMessagesStore((state) => state.setColumns); const flowPool = useFlowStore((state) => state.flowPool); + const { refetch } = useGetMessagesQuery({ + mode: "union", + id: currentFlow?.id, + }); + async function sendMessage({ repeat = 1, files, @@ -111,12 +114,7 @@ export default function IOModal({ setLockChat(false); }); } - const { rows, columns } = await getMessagesTable("union", currentFlow!.id, [ - "index", - "flow_id", - ]); - setMessages(rows); - setColumns(columns); + refetch(); setLockChat(false); if (chatInput) { setNode(chatInput.id, (node: NodeType) => { @@ -147,23 +145,13 @@ export default function IOModal({ } }); - useEffect(() => { - setSelectedViewField(startView()); - if (haveChat) { - getMessagesTable("union", currentFlow!.id, ["index", "flow_id"]).then( - ({ rows, columns }) => { - setMessages(rows); - setColumns(columns); - }, - ); - } - }, [open]); - useEffect(() => { const sessions = new Set(); - messages.forEach((row) => { - sessions.add(row.session_id); - }); + messages + .filter((message) => message.flow_id === currentFlow!.id) + .forEach((row) => { + sessions.add(row.session_id); + }); setSessions(Array.from(sessions)); sessions; }, [messages]); @@ -480,10 +468,8 @@ export default function IOModal({ (session) => session === selectedViewField.id, ) && ( - message.session_id === selectedViewField.id, - )} + session={selectedViewField.id} + id={currentFlow!.id} /> )} diff --git a/src/frontend/src/pages/SettingsPage/pages/messagesPage/hooks/use-messages-table.tsx b/src/frontend/src/pages/SettingsPage/pages/messagesPage/hooks/use-messages-table.tsx deleted file mode 100644 index fe344e478..000000000 --- a/src/frontend/src/pages/SettingsPage/pages/messagesPage/hooks/use-messages-table.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import { ColDef, ColGroupDef } from "ag-grid-community"; -import { useEffect } from "react"; -import { getMessagesTable } from "../../../../../controllers/API"; -import { useMessagesStore } from "../../../../../stores/messagesStore"; - -const useMessagesTable = ( - setColumns: (data: Array) => void, -) => { - const setMessages = useMessagesStore((state) => state.setMessages); - useEffect(() => { - const fetchData = async () => { - try { - const data = await getMessagesTable("union", undefined, ["index"]); - const { columns, rows } = data; - setColumns(columns); - setMessages(rows); - } catch (error) { - console.error("Error fetching messages:", error); - } - }; - fetchData(); - }, []); - - return null; -}; - -export default useMessagesTable; diff --git a/src/frontend/src/pages/SettingsPage/pages/messagesPage/index.tsx b/src/frontend/src/pages/SettingsPage/pages/messagesPage/index.tsx index b2e654cef..f0667c696 100644 --- a/src/frontend/src/pages/SettingsPage/pages/messagesPage/index.tsx +++ b/src/frontend/src/pages/SettingsPage/pages/messagesPage/index.tsx @@ -1,80 +1,15 @@ -import { - CellEditRequestEvent, - ColDef, - ColGroupDef, - SelectionChangedEvent, -} from "ag-grid-community"; -import { cloneDeep } from "lodash"; -import { useState } from "react"; -import TableComponent from "../../../../components/tableComponent"; -import useAlertStore from "../../../../stores/alertStore"; -import { useMessagesStore } from "../../../../stores/messagesStore"; -import { messagesSorter } from "../../../../utils/utils"; +import { useGetMessagesQuery } from "@/controllers/API/queries/messages"; +import SessionView from "@/modals/IOModal/components/SessionView"; import HeaderMessagesComponent from "./components/headerMessages"; -import useMessagesTable from "./hooks/use-messages-table"; -import useRemoveMessages from "./hooks/use-remove-messages"; -import useUpdateMessage from "./hooks/use-updateMessage"; export default function MessagesPage() { - const [columns, setColumns] = useState>([]); - const messages = useMessagesStore((state) => state.messages); - - const setErrorData = useAlertStore((state) => state.setErrorData); - const setSuccessData = useAlertStore((state) => state.setSuccessData); - - const [selectedRows, setSelectedRows] = useState([]); - - const { handleRemoveMessages } = useRemoveMessages( - setSelectedRows, - setSuccessData, - setErrorData, - selectedRows, - ); - - const { handleUpdate } = useUpdateMessage(setSuccessData, setErrorData); - - useMessagesTable(setColumns); - - function handleUpdateMessage(event: CellEditRequestEvent) { - const newValue = event.newValue; - const field = event.column.getColId(); - const row = cloneDeep(event.data); - const data = { - ...row, - [field]: newValue, - }; - handleUpdate(data); - } + useGetMessagesQuery({ mode: "union" }); return (
-
- { - handleUpdateMessage(event); - }} - editable={[ - { - field: "text", - onUpdate: handleUpdateMessage, - editableCell: false, - }, - ]} - overlayNoRowsTemplate="No data available" - onSelectionChanged={(event: SelectionChangedEvent) => { - setSelectedRows(event.api.getSelectedRows().map((row) => row.id)); - }} - rowSelection="multiple" - suppressRowClickSelection={true} - pagination={true} - columnDefs={columns.sort(messagesSorter)} - rowData={messages} - /> +
);