🔨 refactor(GenericNode/index.tsx): extract helper functions to improve code readability and maintainability

🐛 fix(GenericNode/index.tsx): fix incorrect class name in getNodeClassName function
✨ feat(GenericNode/index.tsx): add renderIconComponents function to render different icon components based on build and validation status
✨ feat(GenericNode/index.tsx): add getSpecificClass function to determine specific class based on build and validation status
✨ feat(GenericNode/index.tsx): add getStatusClassName function to determine status class based on validation status and build status
✨ feat(GenericNode/index.tsx): add getIconComponent function to render icon component with name and class name
✨ feat(GenericNode/index.tsx): add getNodeClassName function to determine node class name based on selected, showNode, build status, and validation status
✨ feat(GenericNode/index.tsx): add getBaseBorderClass function to determine base border class based on selected state
✨ feat(GenericNode/index.tsx): add getNodeSizeClass function to determine node size class based on showNode state

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(
+        className={getNodeClassName(
-          selected ? "border border-ring" : "border",
+          selected,
-          showNode ? " w-96 rounded-lg" : " w-26 h-26 rounded-full",
+          showNode,
-          "generic-node-div",
+          data?.build_status,
-          data?.build_status === BuildStatus.BUILDED &&
+          validationStatus
-            validationStatus &&
-            !validationStatus.valid
-            ? "border-none ring ring-red-300"
-            : "",
-          data?.build_status === BuildStatus.BUILDING
-            ? "  border-none ring"
-            : ""
         )}
       >
         {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 ? (
+                      {renderIconComponents(
-                        <>
+                        data?.build_status,
-                          <IconComponent
+                        validationStatus,
-                            name="Square"
+                        isBuilding
-                            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"
-                            )}
-                          />
-                        </>
                       )}
                     </div>
                   </Tooltip>