From 4d750c2180734c3ed0ea42d8d67c7513916ae2a0 Mon Sep 17 00:00:00 2001
From: cristhianzl <cristhian.lousa@gmail.com>
Date: Fri, 16 Feb 2024 00:38:58 -0300
Subject: [PATCH] refactor: icon fragments functions

---
 .../src/CustomNodes/GenericNode/index.tsx     | 55 ++++++++-----------
 1 file changed, 24 insertions(+), 31 deletions(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index 0d88b1156..2ddd49b8f 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -111,42 +111,35 @@ export default function GenericNode({
   const isEmoji = emojiRegex.test(data?.node?.icon!);
 
   const iconNodeRender = useCallback(() => {
-    if (data?.node?.icon) {
-      if (isEmoji) {
-        return <span className="text-lg">{data.node.icon}</span>;
-      } else {
-        const iconName =
-          data.node.icon || (data.node?.flow ? "group_components" : name);
-        const iconClassName = `generic-node-icon ${
-          !showNode ? "absolute inset-x-6 h-12 w-12" : ""
-        }`;
-        const iconColor = nodeColors[types[data.type]];
+    const iconElement = data?.node?.icon;
+    const iconColor = nodeColors[types[data.type]];
+    const iconName =
+      iconElement || (data.node?.flow ? "group_components" : name);
+    const iconClassName = `generic-node-icon ${
+      !showNode ? "absolute inset-x-6 h-12 w-12" : ""
+    }`;
 
-        return (
-          <IconComponent
-            name={iconName}
-            className={iconClassName}
-            iconColor={iconColor}
-          />
-        );
-      }
+    if (iconElement && isEmoji) {
+      return nodeIconFragment(iconElement);
     } else {
-      const iconName = data.node?.flow ? "group_components" : name;
-      const iconClassName = `generic-node-icon ${
-        !showNode ? "absolute inset-x-6 h-12 w-12" : ""
-      }`;
-      const iconColor = nodeColors[types[data.type]];
-
-      return (
-        <IconComponent
-          name={iconName}
-          className={iconClassName}
-          iconColor={iconColor}
-        />
-      );
+      return checkNodeIconFragment(iconColor, iconName, iconClassName);
     }
   }, [data, isEmoji, name, showNode]);
 
+  const nodeIconFragment = (icon) => {
+    return <span className="text-lg">{icon}</span>;
+  };
+
+  const checkNodeIconFragment = (iconColor, iconName, iconClassName) => {
+    return (
+      <IconComponent
+        name={iconName}
+        className={iconClassName}
+        iconColor={iconColor}
+      />
+    );
+  };
+
   return (
     <>
       <NodeToolbar>