From aa6d57d13499eec3208fd9106f03e0c8cef6a01c Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Mon, 19 Feb 2024 18:52:56 -0300
Subject: [PATCH] Refactor GenericNode component and add duration string

---
 .../src/CustomNodes/GenericNode/index.tsx     | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index 240581c32..4031f1286 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -86,6 +86,18 @@ export default function GenericNode({
   // State for outline color
   const isBuilding = useFlowStore((state) => state.isBuilding);
 
+  // should be empty string if no duration
+  // else should be `Duration: ${duration}`
+  const getDurationString = (duration: number | null): string => {
+    if (duration === null) {
+      return "";
+    } else {
+      return `Duration: ${duration}`;
+    }
+  };
+
+  const durationString = getDurationString(validationStatus?.data.duration);
+
   useEffect(() => {
     setNodeDescription(data.node!.description);
   }, [data.node!.description]);
@@ -164,8 +176,7 @@ export default function GenericNode({
           numberOfHandles={handles}
           showNode={showNode}
           openAdvancedModal={false}
-          onCloseAdvancedModal={() => {
-          }}
+          onCloseAdvancedModal={() => {}}
         ></NodeToolbarComponent>
       </NodeToolbar>
 
@@ -399,12 +410,12 @@ export default function GenericNode({
                       ) : (
                         <div className="max-h-96 overflow-auto">
                           {typeof validationStatus.params === "string"
-                            ? `Duration: ${validationStatus.data.duration}\n${validationStatus.params}`
+                            ? `${durationString}\n${validationStatus.params}`
                                 .split("\n")
                                 .map((line, index) => (
                                   <div key={index}>{line}</div>
                                 ))
-                            : ""}
+                            : durationString}
                         </div>
                       )
                     }