From de7b2c9f3196314e8b2f6a38321072df323cc8e0 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Mon, 12 Jun 2023 17:04:19 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A5=20chore(chatComponent):=20remove?=
 =?UTF-8?q?=20unused=20imports=20and=20API=20call=20The=20import=20for=20t?=
 =?UTF-8?q?he=20postBuild=20function=20was=20removed=20as=20it=20was=20not?=
 =?UTF-8?q?=20being=20used=20in=20the=20BuildTrigger=20component.=20This?=
 =?UTF-8?q?=20improves=20the=20code's=20readability=20and=20maintainabilit?=
 =?UTF-8?q?y.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🚀 feat(chatComponent): add useEffect hook to fetch build status and update state
An async function was added to fetch the build status of the flow and update the state of the isBuilt variable. This allows the component to display the correct state of the build trigger button.

👌 refactor(chatComponent): refactor useEffect hook to update isBuilt state when nodes change
The useEffect hook was refactored to update the isBuilt state when the nodes change. This ensures that the build trigger button is disabled when the nodes change, as the flow needs to be rebuilt before it can be triggered again.

🔥 chore(intComponent): remove console.log statement
The console.log statement was removed from the onKeyDown event listener in the IntComponent component. This improves the code's cleanliness and readability.
---
 .../chatComponent/buildTrigger/index.tsx      |  2 -
 .../src/components/chatComponent/index.tsx    | 40 +++++++++++++++++--
 .../src/components/intComponent/index.tsx     |  2 +-
 3 files changed, 38 insertions(+), 6 deletions(-)

diff --git a/src/frontend/src/components/chatComponent/buildTrigger/index.tsx b/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
index 5d93d29b2..10c0de0b1 100644
--- a/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
+++ b/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
@@ -6,7 +6,6 @@ import { nodeColors } from "../../../utils";
 import { PopUpContext } from "../../../contexts/popUpContext";
 import ChatModal from "../../../modals/chatModal";
 import { FlowType } from "../../../types/flow";
-import { postBuild } from "../../../controllers/API";
 import Loading from "../../../components/ui/loading";
 import { useSSE } from "../../../contexts/SSEContext";
 import axios from "axios";
@@ -48,7 +47,6 @@ export default function BuildTrigger({
     const { flowId } = response.data;
 
     // Step 2: Use the session ID to establish an SSE connection using EventSource
-
     let validationResults = [];
     let finished = false;
     apiUrl = `/build/stream/${flowId}`;
diff --git a/src/frontend/src/components/chatComponent/index.tsx b/src/frontend/src/components/chatComponent/index.tsx
index 73815b7ec..8756e8319 100644
--- a/src/frontend/src/components/chatComponent/index.tsx
+++ b/src/frontend/src/components/chatComponent/index.tsx
@@ -1,15 +1,18 @@
-import { useEffect, useRef, useState } from "react";
-
+import { Context, useEffect, useRef, useState, useContext } from "react";
+import ReactFlow, { useNodes } from "reactflow";
 import { ChatMessageType, ChatType } from "../../types/chat";
 import ChatTrigger from "./chatTrigger";
 import BuildTrigger from "./buildTrigger";
 import ChatModal from "../../modals/chatModal";
 
-import _ from "lodash";
+import _, { set } from "lodash";
+import { getBuildStatus } from "../../controllers/API";
+import { NodeType } from "../../types/flow";
 
 export default function Chat({ flow }: ChatType) {
   const [open, setOpen] = useState(false);
   const [isBuilt, setIsBuilt] = useState(false);
+
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
       if (
@@ -25,6 +28,37 @@ export default function Chat({ flow }: ChatType) {
       document.removeEventListener("keydown", handleKeyDown);
     };
   }, []);
+
+  useEffect(() => {
+    // Define an async function within the useEffect hook
+    const fetchBuildStatus = async () => {
+      const response = await getBuildStatus(flow.id);
+      setIsBuilt(response.built);
+    };
+
+    // Call the async function
+    fetchBuildStatus();
+  }, [flow]);
+
+  const prevNodesRef = useRef<any[] | undefined>();
+  const nodes = useNodes();
+  useEffect(() => {
+    const prevNodes = prevNodesRef.current;
+    const currentNodes = nodes.map(
+      (node: NodeType) => node.data.node.template.value
+    );
+
+    if (
+      prevNodes &&
+      JSON.stringify(prevNodes) !== JSON.stringify(currentNodes)
+    ) {
+      setIsBuilt(false);
+      console.log("Nodes changed");
+    }
+
+    prevNodesRef.current = currentNodes;
+  }, [nodes]);
+
   return (
     <>
       <ChatModal key={flow.id} flow={flow} open={open} setOpen={setOpen} />
diff --git a/src/frontend/src/components/intComponent/index.tsx b/src/frontend/src/components/intComponent/index.tsx
index e643eb5e9..00a4bf606 100644
--- a/src/frontend/src/components/intComponent/index.tsx
+++ b/src/frontend/src/components/intComponent/index.tsx
@@ -34,7 +34,7 @@ export default function IntComponent({
           if (disableCopyPaste) setDisableCopyPaste(false);
         }}
         onKeyDown={(event) => {
-          console.log(event);
+          // console.log(event);
           if (
             event.key !== "Backspace" &&
             event.key !== "Enter" &&