From 4f4a0ff4c7a1876326a9733882350d85940c045c Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Mon, 12 Jun 2023 09:44:12 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A8=20refactor(chatComponent):=20refac?=
 =?UTF-8?q?tor=20handleBuild=20function=20to=20use=20async/await=20and=20e?=
 =?UTF-8?q?xtract=20constants=20to=20improve=20readability=20=F0=9F=90=9B?=
 =?UTF-8?q?=20fix(chatComponent):=20fix=20issue=20with=20progressEvent=20n?=
 =?UTF-8?q?ot=20being=20properly=20destructured=20=F0=9F=9A=80=20feat(chat?=
 =?UTF-8?q?Component):=20add=20minimum=20loading=20time=20to=20improve=20u?=
 =?UTF-8?q?ser=20experience=20The=20handleBuild=20function=20was=20refacto?=
 =?UTF-8?q?red=20to=20use=20async/await=20and=20constants=20were=20extract?=
 =?UTF-8?q?ed=20to=20improve=20readability.=20The=20issue=20with=20progres?=
 =?UTF-8?q?sEvent=20not=20being=20properly=20destructured=20was=20fixed.?=
 =?UTF-8?q?=20A=20minimum=20loading=20time=20was=20added=20to=20improve=20?=
 =?UTF-8?q?user=20experience=20by=20ensuring=20that=20the=20loading=20spin?=
 =?UTF-8?q?ner=20is=20displayed=20for=20at=20least=20a=20certain=20amount?=
 =?UTF-8?q?=20of=20time.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../chatComponent/buildTrigger/index.tsx      | 70 +++++++++++--------
 1 file changed, 40 insertions(+), 30 deletions(-)

diff --git a/src/frontend/src/components/chatComponent/buildTrigger/index.tsx b/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
index 6ce343280..88ceb5f4d 100644
--- a/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
+++ b/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
@@ -26,48 +26,46 @@ export default function BuildTrigger({
 
   const { updateSSEData } = useSSE();
 
-  function handleBuild(flow) {
+  const CHUNK_DELIMITER = "\n\n";
+
+  async function handleBuild(flow: FlowType) {
+    const minimumLoadingTime = 200; // in milliseconds
+    const startTime = Date.now();
     setIsBuilding(true);
 
-    // State to keep track of validity status of all chunks
+    try {
+      const allChunksValid = await postDataToServer(`/build/${flow.id}`, flow);
+      await enforceMinimumLoadingTime(startTime, minimumLoadingTime);
+      setIsBuilt(allChunksValid);
+    } catch (error) {
+      console.error("Error:", error);
+    } finally {
+      setIsBuilding(false);
+    }
+  }
+
+  async function postDataToServer(apiUrl: string, flow: FlowType) {
     let allChunksValid = true;
 
-    const apiUrl = `/build/${flow.id}`;
-
-    // Post data to the server
-    axios({
+    await axios({
       method: "post",
       url: apiUrl,
       data: { data: flow },
       headers: { "Content-Type": "application/json" },
       onDownloadProgress: (progressEvent) => {
-        const { currentTarget } = progressEvent.event;
-        const { responseText } = currentTarget;
-        // responseText is a string with \n\n delimiters
-
-        // Get only the new data since the last read
-        // by splitting the string and getting the one before the last \n\n
-
-        const chunks = responseText.split("\n\n");
-
-        // Process each chunk
-        chunks.forEach((chunk: string) => {
-          if (chunk !== "") {
-            let valid = processChunk(chunk);
-            console.log("Valid: ", valid);
-            allChunksValid = allChunksValid && valid;
+        const chunks =
+          progressEvent.event.currentTarget.responseText.split(CHUNK_DELIMITER);
+        chunks.forEach((chunk) => {
+          if (chunk === "") {
+            return;
           }
+          const isValid = processChunk(chunk);
+          allChunksValid = allChunksValid && isValid;
         });
       },
-    })
-      .catch((err) => {
-        console.error("Error:", err);
-      })
-      .finally(() => {
-        // Set isBuilt to the value of allChunksValid
-        setIsBuilt(allChunksValid);
-        setIsBuilding(false);
-      });
+    });
+
+    return allChunksValid;
   }
 
   function processChunk(chunk: string) {
@@ -84,6 +82,18 @@ export default function BuildTrigger({
     return parsedData.valid;
   }
 
+  async function enforceMinimumLoadingTime(
+    startTime: number,
+    minimumLoadingTime: number
+  ) {
+    const elapsedTime = Date.now() - startTime;
+    const remainingTime = minimumLoadingTime - elapsedTime;
+
+    if (remainingTime > 0) {
+      return new Promise((resolve) => setTimeout(resolve, remainingTime));
+    }
+  }
+
   return (
     <Transition
       show={!open}