From b47f6aa3265dafd420448941581f3aa6a1b813a2 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Fri, 16 Jun 2023 13:03:38 -0300
Subject: [PATCH] refactor(frontend): add isBuilding state to SSEContext and
 use it in GenericNode and BuildTrigger components

The isBuilding state was added to the SSEContext to keep track of whether a build is currently in progress. This state was then used in the GenericNode and BuildTrigger components to conditionally render certain elements based on whether a build is in progress or not.
---
 src/frontend/src/CustomNodes/GenericNode/index.tsx           | 4 ++--
 .../src/components/chatComponent/buildTrigger/index.tsx      | 3 +--
 src/frontend/src/contexts/SSEContext.tsx                     | 5 ++++-
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index fdf830408..b56b15352 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -29,7 +29,7 @@ export default function GenericNode({
   const Icon = nodeIcons[data.type] || nodeIcons[types[data.type]];
   const [validationStatus, setValidationStatus] = useState(null);
   // State for outline color
-  const { sseData } = useSSE();
+  const { sseData,isBuilding } = useSSE();
 
   // useEffect(() => {
   //   if (reactFlowInstance) {
@@ -137,7 +137,7 @@ export default function GenericNode({
                   ></div>
                   <div
                     className={classNames(
-                      !validationStatus
+                      !validationStatus || isBuilding
                         ? "w-4 h-4 rounded-full  bg-yellow-500 opacity-100"
                         : "w-4 h-4 rounded-full bg-gray-500 opacity-0 hidden animate-spin",
                       "absolute w-4 hover:text-gray-500 hover:dark:text-gray-300 transition-all ease-in-out duration-200"
diff --git a/src/frontend/src/components/chatComponent/buildTrigger/index.tsx b/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
index 2ac954c48..105f68111 100644
--- a/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
+++ b/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
@@ -20,9 +20,8 @@ export default function BuildTrigger({
   setIsBuilt: any;
   isBuilt: boolean;
 }) {
-  const [isBuilding, setIsBuilding] = useState(false);
 
-  const { updateSSEData } = useSSE();
+  const { updateSSEData,isBuilding,setIsBuilding } = useSSE();
   const { reactFlowInstance } = useContext(typesContext);
   const { setErrorData } = useContext(alertContext);
 
diff --git a/src/frontend/src/contexts/SSEContext.tsx b/src/frontend/src/contexts/SSEContext.tsx
index 8d90b26e2..26a2e4aaf 100644
--- a/src/frontend/src/contexts/SSEContext.tsx
+++ b/src/frontend/src/contexts/SSEContext.tsx
@@ -9,6 +9,8 @@ import {
 const initialValue = {
   updateSSEData: ({}) => {},
   sseData: {},
+  isBuilding: false,
+  setIsBuilding: (isBuilding: boolean) => {},
 };
 
 const SSEContext = createContext(initialValue);
@@ -19,6 +21,7 @@ export function useSSE() {
 
 export function SSEProvider({ children }) {
   const [sseData, setSSEData] = useState({});
+  const [isBuilding, setIsBuilding] = useState(false);
 
   const updateSSEData = useCallback((newData: any) => {
     setSSEData((prevData) => ({
@@ -28,7 +31,7 @@ export function SSEProvider({ children }) {
   }, []);
 
   return (
-    <SSEContext.Provider value={{ sseData, updateSSEData }}>
+    <SSEContext.Provider value={{ sseData, updateSSEData,isBuilding,setIsBuilding }}>
       {children}
     </SSEContext.Provider>
   );