From 62d7385d655878540ec10bc55d9c4671b1f1d40b Mon Sep 17 00:00:00 2001
From: cristhianzl <cristhian.lousa@gmail.com>
Date: Tue, 28 May 2024 12:16:28 -0300
Subject: [PATCH] feat: Add useCheckCodeValidity and useIconNodeRender hooks

This commit adds two new hooks, useCheckCodeValidity and useIconNodeRender, to the customNodes/hooks directory.

The useCheckCodeValidity hook is responsible for checking the validity of the code in a node template and setting the "isOutdated" state accordingly. It improves the code organization and ensures that the code is only checked once.

The useIconNodeRender hook is responsible for rendering the appropriate icon for a node based on its data and type. It improves code reusability and simplifies the rendering logic.
---
 .../hooks/use-check-code-validity.tsx         | 39 ++++++++++++++++
 .../src/customNodes/hooks/use-icon-render.tsx | 45 +++++++++++++++++++
 2 files changed, 84 insertions(+)
 create mode 100644 src/frontend/src/customNodes/hooks/use-check-code-validity.tsx
 create mode 100644 src/frontend/src/customNodes/hooks/use-icon-render.tsx

diff --git a/src/frontend/src/customNodes/hooks/use-check-code-validity.tsx b/src/frontend/src/customNodes/hooks/use-check-code-validity.tsx
new file mode 100644
index 000000000..0b83429f8
--- /dev/null
+++ b/src/frontend/src/customNodes/hooks/use-check-code-validity.tsx
@@ -0,0 +1,39 @@
+import { useEffect } from "react";
+import { NATIVE_CATEGORIES } from "../../constants/constants";
+import { NodeDataType } from "../../types/flow";
+
+const useCheckCodeValidity = (
+  data: NodeDataType,
+  templates: { [key: string]: any },
+  setIsOutdated: (value: boolean) => void,
+  types,
+) => {
+  useEffect(() => {
+    // This one should run only once
+    // first check if data.type in NATIVE_CATEGORIES
+    // if not return
+    if (
+      !NATIVE_CATEGORIES.includes(types[data.type]) ||
+      !data.node?.template?.code?.value
+    )
+      return;
+    const thisNodeTemplate = templates[data.type].template;
+    // if the template does not have a code key
+    // return
+    if (!thisNodeTemplate.code) return;
+    const currentCode = thisNodeTemplate.code?.value;
+    const thisNodesCode = data.node!.template?.code?.value;
+    const componentsToIgnore = ["Custom Component", "Prompt"];
+    if (
+      currentCode !== thisNodesCode &&
+      !componentsToIgnore.includes(data.node!.display_name)
+    ) {
+      setIsOutdated(true);
+    } else {
+      setIsOutdated(false);
+    }
+    // template.code can be undefined
+  }, [data.node?.template?.code?.value, templates, setIsOutdated]);
+};
+
+export default useCheckCodeValidity;
diff --git a/src/frontend/src/customNodes/hooks/use-icon-render.tsx b/src/frontend/src/customNodes/hooks/use-icon-render.tsx
new file mode 100644
index 000000000..181b4f515
--- /dev/null
+++ b/src/frontend/src/customNodes/hooks/use-icon-render.tsx
@@ -0,0 +1,45 @@
+import { useCallback } from "react";
+import { NodeDataType } from "../../types/flow";
+
+const useIconNodeRender = (
+  data: NodeDataType,
+  types: { [key: string]: string },
+  nodeColors: { [key: string]: string },
+  name: string,
+  showNode: boolean,
+  isEmoji: boolean,
+  nodeIconFragment: (iconElement: string) => JSX.Element,
+  checkNodeIconFragment: (
+    iconColor: string,
+    iconName: string,
+    iconClassName: string,
+  ) => JSX.Element,
+) => {
+  const iconNodeRender = useCallback(() => {
+    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 " : ""
+    }`;
+    if (iconElement && isEmoji) {
+      return nodeIconFragment(iconElement);
+    } else {
+      return checkNodeIconFragment(iconColor, iconName, iconClassName);
+    }
+  }, [
+    data,
+    types,
+    nodeColors,
+    name,
+    showNode,
+    isEmoji,
+    nodeIconFragment,
+    checkNodeIconFragment,
+  ]);
+
+  return iconNodeRender;
+};
+
+export default useIconNodeRender;