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.

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;

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;