From 229b8680f7fa5fa8cb131b080879bd6cfb4f47d3 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Fri, 12 Jul 2024 12:28:56 -0300
Subject: [PATCH] fix: fix bug on row selection at IO modal (#2627)

* feat: optimize filtering of messages in SessionView component

The code changes in this commit optimize the filtering of messages in the SessionView component. The useMemo hook is used to memoize the filteredMessages array, which improves performance by avoiding unnecessary re-rendering.

* [autofix.ci] apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
---
 .../IOModal/components/SessionView/index.tsx   | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/frontend/src/modals/IOModal/components/SessionView/index.tsx b/src/frontend/src/modals/IOModal/components/SessionView/index.tsx
index 6752e21fe..934320f8b 100644
--- a/src/frontend/src/modals/IOModal/components/SessionView/index.tsx
+++ b/src/frontend/src/modals/IOModal/components/SessionView/index.tsx
@@ -7,7 +7,7 @@ import {
   SelectionChangedEvent,
 } from "ag-grid-community";
 import cloneDeep from "lodash/cloneDeep";
-import { useState } from "react";
+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";
@@ -56,12 +56,16 @@ export default function SessionView({
     });
   }
 
-  let filteredMessages = session
-    ? messages.filter((message) => message.session_id === session)
-    : messages;
-  filteredMessages = id
-    ? filteredMessages.filter((message) => message.flow_id === id)
-    : filteredMessages;
+  const filteredMessages = useMemo(() => {
+    let filteredMessages = session
+      ? messages.filter((message) => message.session_id === session)
+      : messages;
+    filteredMessages = id
+      ? filteredMessages.filter((message) => message.flow_id === id)
+      : filteredMessages;
+    return filteredMessages;
+  }, [session, id, messages]);
+
   return isFetching > 0 ? (
     <div className="flex h-full w-full items-center justify-center align-middle">
       <Loading></Loading>