From a32c3a37300047c7d96c21408dbb65fc9aba66d0 Mon Sep 17 00:00:00 2001
From: cristhianzl <cristhian.lousa@gmail.com>
Date: Tue, 20 Feb 2024 10:48:19 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A8=20refactor(GenericNode/index.tsx):?=
 =?UTF-8?q?=20extract=20helper=20functions=20to=20improve=20code=20readabi?=
 =?UTF-8?q?lity=20and=20maintainability=20=F0=9F=90=9B=20fix(GenericNode/i?=
 =?UTF-8?q?ndex.tsx):=20fix=20incorrect=20class=20name=20in=20getNodeClass?=
 =?UTF-8?q?Name=20function=20=E2=9C=A8=20feat(GenericNode/index.tsx):=20ad?=
 =?UTF-8?q?d=20renderIconComponents=20function=20to=20render=20different?=
 =?UTF-8?q?=20icon=20components=20based=20on=20build=20and=20validation=20?=
 =?UTF-8?q?status=20=E2=9C=A8=20feat(GenericNode/index.tsx):=20add=20getSp?=
 =?UTF-8?q?ecificClass=20function=20to=20determine=20specific=20class=20ba?=
 =?UTF-8?q?sed=20on=20build=20and=20validation=20status=20=E2=9C=A8=20feat?=
 =?UTF-8?q?(GenericNode/index.tsx):=20add=20getStatusClassName=20function?=
 =?UTF-8?q?=20to=20determine=20status=20class=20based=20on=20validation=20?=
 =?UTF-8?q?status=20and=20build=20status=20=E2=9C=A8=20feat(GenericNode/in?=
 =?UTF-8?q?dex.tsx):=20add=20getIconComponent=20function=20to=20render=20i?=
 =?UTF-8?q?con=20component=20with=20name=20and=20class=20name=20=E2=9C=A8?=
 =?UTF-8?q?=20feat(GenericNode/index.tsx):=20add=20getNodeClassName=20func?=
 =?UTF-8?q?tion=20to=20determine=20node=20class=20name=20based=20on=20sele?=
 =?UTF-8?q?cted,=20showNode,=20build=20status,=20and=20validation=20status?=
 =?UTF-8?q?=20=E2=9C=A8=20feat(GenericNode/index.tsx):=20add=20getBaseBord?=
 =?UTF-8?q?erClass=20function=20to=20determine=20base=20border=20class=20b?=
 =?UTF-8?q?ased=20on=20selected=20state=20=E2=9C=A8=20feat(GenericNode/ind?=
 =?UTF-8?q?ex.tsx):=20add=20getNodeSizeClass=20function=20to=20determine?=
 =?UTF-8?q?=20node=20size=20class=20based=20on=20showNode=20state?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/CustomNodes/GenericNode/index.tsx     | 130 +++++++++++-------
 1 file changed, 81 insertions(+), 49 deletions(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index 80b7ec88a..eb16542ef 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -157,6 +157,78 @@ export default function GenericNode({
     );
   };
 
+  const getIconComponent = (name, className) => (
+    <IconComponent
+      name={name}
+      className={`absolute h-5 stroke-2 ${className} ml-0.5`}
+    />
+  );
+
+  const getStatusClassName = (
+    validationStatus: validationStatusType | null,
+    isBuilding: boolean
+  ) => {
+    if (validationStatus && validationStatus.valid) {
+      return "green-status";
+    } else if (validationStatus && !validationStatus.valid) {
+      return "red-status";
+    } else if (!validationStatus || isBuilding) {
+      return "yellow-status";
+    } else {
+      return "status-build-animation";
+    }
+  };
+
+  const renderIconComponents = (
+    buildStatus: BuildStatus | undefined,
+    validationStatus: validationStatusType | null,
+    isBuilding: boolean
+  ) => {
+    if (buildStatus === BuildStatus.BUILDING) {
+      return getIconComponent("Square", "red-status");
+    } else {
+      const className = getStatusClassName(validationStatus, isBuilding);
+      return <>{getIconComponent("Play", className)}</>;
+    }
+  };
+
+  const getSpecificClass = (
+    buildStatus: BuildStatus | undefined,
+    validationStatus: validationStatusType | null
+  ) => {
+    if (
+      buildStatus === BuildStatus.BUILDED &&
+      validationStatus &&
+      !validationStatus.valid
+    ) {
+      return "border-none ring ring-red-300";
+    } else if (buildStatus === BuildStatus.BUILDING) {
+      return "border-none ring";
+    } else {
+      return "";
+    }
+  };
+
+  const getNodeClassName = (
+    selected: boolean,
+    showNode: boolean,
+    buildStatus: BuildStatus | undefined,
+    validationStatus: validationStatusType | null
+  ) => {
+    return classNames(
+      getBaseBorderClass(selected),
+      getNodeSizeClass(showNode),
+      "generic-node-div",
+      getSpecificClass(buildStatus, validationStatus)
+    );
+  };
+
+  const getBaseBorderClass = (selected) =>
+    selected ? "border border-ring" : "border";
+
+  const getNodeSizeClass = (showNode) =>
+    showNode ? "w-96 rounded-lg" : "w-26 h-26 rounded-full";
+
   return (
     <>
       <NodeToolbar>
@@ -181,18 +253,11 @@ export default function GenericNode({
       </NodeToolbar>
 
       <div
-        className={classNames(
-          selected ? "border border-ring" : "border",
-          showNode ? " w-96 rounded-lg" : " w-26 h-26 rounded-full",
-          "generic-node-div",
-          data?.build_status === BuildStatus.BUILDED &&
-            validationStatus &&
-            !validationStatus.valid
-            ? "border-none ring ring-red-300"
-            : "",
-          data?.build_status === BuildStatus.BUILDING
-            ? "  border-none ring"
-            : ""
+        className={getNodeClassName(
+          selected,
+          showNode,
+          data?.build_status,
+          validationStatus
         )}
       >
         {data.node?.beta && showNode && (
@@ -430,43 +495,10 @@ export default function GenericNode({
                     }
                   >
                     <div className="generic-node-status-position flex items-center justify-center">
-                      {data?.build_status === BuildStatus.BUILDING ? (
-                        <>
-                          <IconComponent
-                            name="Square"
-                            className="red-status absolute h-5 stroke-1"
-                          />
-                        </>
-                      ) : (
-                        <>
-                          <IconComponent
-                            name="Play"
-                            className={classNames(
-                              validationStatus && validationStatus.valid
-                                ? "green-status"
-                                : "status-build-animation",
-                              "absolute h-5 stroke-1"
-                            )}
-                          />
-                          <IconComponent
-                            name="Play"
-                            className={classNames(
-                              validationStatus && !validationStatus.valid
-                                ? "red-status"
-                                : "status-build-animation",
-                              "absolute h-5 stroke-1"
-                            )}
-                          />
-                          <IconComponent
-                            name="Play"
-                            className={classNames(
-                              !validationStatus || isBuilding
-                                ? "yellow-status"
-                                : "status-build-animation",
-                              "absolute h-5 stroke-1"
-                            )}
-                          />
-                        </>
+                      {renderIconComponents(
+                        data?.build_status,
+                        validationStatus,
+                        isBuilding
                       )}
                     </div>
                   </Tooltip>