From 66b4bce52585fffad3e7ee7d17051c48fc9bb97e Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Fri, 30 Jun 2023 16:21:40 -0300
Subject: [PATCH] fix(App.tsx): prevent duplicate alerts from being added to
 the alertsList fix(alertContext.tsx): set the error, notice, and success data
 states before opening the respective alerts feat(chatModal/index.tsx): add
 error handling for websocket connection and check backend health before
 reconnecting

---
 src/frontend/src/App.tsx                    | 11 +++++++++-
 src/frontend/src/contexts/alertContext.tsx  | 13 ++++++------
 src/frontend/src/modals/chatModal/index.tsx | 23 +++++++++++----------
 3 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/src/frontend/src/App.tsx b/src/frontend/src/App.tsx
index 259c40fad..3ef728925 100644
--- a/src/frontend/src/App.tsx
+++ b/src/frontend/src/App.tsx
@@ -51,6 +51,9 @@ export default function App() {
   useEffect(() => {
     // If there is an error alert open with data, add it to the alertsList
     if (errorOpen && errorData) {
+      if(alertsList.length > 0 && JSON.stringify(alertsList[alertsList.length - 1].data)===JSON.stringify(errorData)){
+        return;
+      }
       setErrorOpen(false);
       setAlertsList((old) => {
         let newAlertsList = [
@@ -62,6 +65,9 @@ export default function App() {
     }
     // If there is a notice alert open with data, add it to the alertsList
     else if (noticeOpen && noticeData) {
+      if(alertsList.length > 0 && JSON.stringify(alertsList[alertsList.length - 1].data)===JSON.stringify(noticeData)){
+        return;
+      }
       setNoticeOpen(false);
       setAlertsList((old) => {
         let newAlertsList = [
@@ -73,6 +79,9 @@ export default function App() {
     }
     // If there is a success alert open with data, add it to the alertsList
     else if (successOpen && successData) {
+      if(alertsList.length > 0 && JSON.stringify(alertsList[alertsList.length - 1].data)===JSON.stringify(successData)){
+        return;
+      }
       setSuccessOpen(false);
       setAlertsList((old) => {
         let newAlertsList = [
@@ -152,4 +161,4 @@ export default function App() {
       </div>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/src/frontend/src/contexts/alertContext.tsx b/src/frontend/src/contexts/alertContext.tsx
index ed31c03a9..62ae2e396 100644
--- a/src/frontend/src/contexts/alertContext.tsx
+++ b/src/frontend/src/contexts/alertContext.tsx
@@ -78,9 +78,9 @@ export function AlertProvider({ children }: { children: ReactNode }) {
    * @param newState An object containing the new error data, including title and optional list of error messages
    */
   function setErrorData(newState: { title: string; list?: Array<string> }) {
-    setErrorDataState(newState);
-    setErrorOpen(true);
     if (newState.title && newState.title !== "") {
+      setErrorDataState(newState);
+      setErrorOpen(true);
       setNotificationCenter(true);
       pushNotificationList({
         type: "error",
@@ -95,9 +95,9 @@ export function AlertProvider({ children }: { children: ReactNode }) {
    * @param newState An object containing the title of the notice and optionally a link.
    */
   function setNoticeData(newState: { title: string; link?: string }) {
-    setNoticeDataState(newState);
-    setNoticeOpen(true);
     if (newState.title && newState.title !== "") {
+      setNoticeDataState(newState);
+      setNoticeOpen(true);
       // Add new notice to notification center
       setNotificationCenter(true);
       pushNotificationList({
@@ -113,11 +113,10 @@ export function AlertProvider({ children }: { children: ReactNode }) {
    * @param newState - A state object with a "title" property to set in the success data state.
    */
   function setSuccessData(newState: { title: string }) {
-    setSuccessDataState(newState); // update the success data state with the provided new state
-    setSuccessOpen(true); // open the success alert
-
     // If the new state has a "title" property, add a new success notification to the list
     if (newState.title && newState.title !== "") {
+      setSuccessDataState(newState); // update the success data state with the provided new state
+      setSuccessOpen(true); // open the success alert
       setNotificationCenter(true); // show the notification center
       pushNotificationList({
         // add the new notification to the list
diff --git a/src/frontend/src/modals/chatModal/index.tsx b/src/frontend/src/modals/chatModal/index.tsx
index 6b1744857..c39ea0294 100644
--- a/src/frontend/src/modals/chatModal/index.tsx
+++ b/src/frontend/src/modals/chatModal/index.tsx
@@ -11,6 +11,7 @@ import { ChatMessageType } from "../../types/chat";
 import ChatInput from "./chatInput";
 
 import _ from "lodash";
+import { getHealth } from "../../controllers/API";
 
 export default function ChatModal({
   flow,
@@ -204,25 +205,25 @@ export default function ChatModal({
         handleOnClose(event);
       };
       newWs.onerror = (ev) => {
-        console.log(ev, "error");
-        if (flow.id === "") {
-          connectWS();
-        } else {
+        getHealth().then((res) => {
+          if (res.status === 200) {
+            connectWS();
+          }
+        }).catch((err) => {
           setErrorData({
-            title: "There was an error on web connection, please: ",
+            // message when the backend failed
+            title: "The backend is not responding. Please try again later.",
+            // possible solution list
             list: [
-              "Refresh the page",
-              "Use a new flow tab",
-              "Check if the backend is up",
+              "Check your internet connection.",
+              "Check if the backend is running."
             ],
           });
-        }
+        })
       };
       ws.current = newWs;
     } catch (error) {
-      if (flow.id === "") {
         connectWS();
-      }
       console.log(error);
     }
   }