feat: Extract the code for building categorize operator coordinates to hooks.ts #1739 (#2005)

### What problem does this PR solve?

feat: Extract the code for building categorize operator coordinates to
hooks.ts #1739

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/flow/canvas/node/categorize-node.tsx

@@ -1,66 +1,21 @@
 import { useTranslate } from '@/hooks/common-hooks';
 import { Flex } from 'antd';
 import classNames from 'classnames';
-import { pick } from 'lodash';
-import get from 'lodash/get';
-import intersectionWith from 'lodash/intersectionWith';
-import isEqual from 'lodash/isEqual';
 import lowerFirst from 'lodash/lowerFirst';
-import { useEffect, useMemo, useState } from 'react';
-import { Handle, NodeProps, Position, useUpdateNodeInternals } from 'reactflow';
+import { Handle, NodeProps, Position } from 'reactflow';
 import { Operator, operatorMap } from '../../constant';
-import { IPosition, NodeData } from '../../interface';
+import { NodeData } from '../../interface';
 import OperatorIcon from '../../operator-icon';
-import { buildNewPositionMap } from '../../utils';
 import CategorizeHandle from './categorize-handle';
 import NodeDropdown from './dropdown';
+import { useBuildCategorizeHandlePositions } from './hooks';
 import styles from './index.less';
 import NodePopover from './popover';
 
 export function CategorizeNode({ id, data, selected }: NodeProps<NodeData>) {
-  const updateNodeInternals = useUpdateNodeInternals();
-  const [postionMap, setPositionMap] = useState<Record<string, IPosition>>({});
-  const categoryData = useMemo(
-    () => get(data, 'form.category_description') ?? {},
-    [data],
-  );
   const style = operatorMap[data.label as Operator];
   const { t } = useTranslate('flow');
-
-  useEffect(() => {
-    // Cache used coordinates
-    setPositionMap((state) => {
-      // index in use
-      const indexesInUse = Object.values(state).map((x) => x.idx);
-      const categoryDataKeys = Object.keys(categoryData);
-      const stateKeys = Object.keys(state);
-      if (!isEqual(categoryDataKeys.sort(), stateKeys.sort())) {
-        const intersectionKeys = intersectionWith(
-          stateKeys,
-          categoryDataKeys,
-          (categoryDataKey, postionMapKey) => categoryDataKey === postionMapKey,
-        );
-        const newPositionMap = buildNewPositionMap(
-          categoryDataKeys.filter(
-            (x) => !intersectionKeys.some((y) => y === x),
-          ),
-          indexesInUse,
-        );
-
-        const nextPostionMap = {
-          ...pick(state, intersectionKeys),
-          ...newPositionMap,
-        };
-
-        return nextPostionMap;
-      }
-      return state;
-    });
-  }, [categoryData]);
-
-  useEffect(() => {
-    updateNodeInternals(id);
-  }, [id, updateNodeInternals, postionMap]);
+  const { positions } = useBuildCategorizeHandlePositions({ data, id });
 
   return (
     <NodePopover nodeId={id}>
@@ -94,18 +49,15 @@ export function CategorizeNode({ id, data, selected }: NodeProps<NodeData>) {
           className={styles.handle}
           id={'c'}
         ></Handle>
-        {Object.keys(categoryData).map((x, idx) => {
-          const position = postionMap[x];
+        {positions.map((position, idx) => {
           return (
-            position && (
-              <CategorizeHandle
-                top={position.top}
-                right={position.right}
-                key={idx}
-                text={x}
-                idx={idx}
-              ></CategorizeHandle>
-            )
+            <CategorizeHandle
+              top={position.top}
+              right={position.right}
+              key={idx}
+              text={position.text}
+              idx={idx}
+            ></CategorizeHandle>
           );
         })}
         <Flex vertical align="center" justify="center" gap={6}>

web/src/pages/flow/canvas/node/hooks.ts

@@ -0,0 +1,77 @@
+import get from 'lodash/get';
+import intersectionWith from 'lodash/intersectionWith';
+import isEqual from 'lodash/isEqual';
+import pick from 'lodash/pick';
+import { useEffect, useMemo, useState } from 'react';
+import { useUpdateNodeInternals } from 'reactflow';
+import { IPosition, NodeData } from '../../interface';
+import { buildNewPositionMap } from '../../utils';
+
+export const useBuildCategorizeHandlePositions = ({
+  data,
+  id,
+}: {
+  id: string;
+  data: NodeData;
+}) => {
+  const updateNodeInternals = useUpdateNodeInternals();
+  const [positionMap, setPositionMap] = useState<Record<string, IPosition>>({});
+  const categoryData = useMemo(
+    () => get(data, 'form.category_description') ?? {},
+    [data],
+  );
+
+  const positions = useMemo(() => {
+    return Object.keys(categoryData)
+      .map((x) => {
+        const position = positionMap[x];
+        return { text: x, ...position };
+      })
+      .filter((x) => typeof x?.right === 'number');
+  }, [categoryData, positionMap]);
+
+  useEffect(() => {
+    // Cache used coordinates
+    setPositionMap((state) => {
+      // index in use
+      const indexesInUse = Object.values(state).map((x) => x.idx);
+      const categoryDataKeys = Object.keys(categoryData);
+      const stateKeys = Object.keys(state);
+      if (!isEqual(categoryDataKeys.sort(), stateKeys.sort())) {
+        const intersectionKeys = intersectionWith(
+          stateKeys,
+          categoryDataKeys,
+          (categoryDataKey, postionMapKey) => categoryDataKey === postionMapKey,
+        );
+        const newPositionMap = buildNewPositionMap(
+          categoryDataKeys.filter(
+            (x) => !intersectionKeys.some((y) => y === x),
+          ),
+          indexesInUse,
+        );
+
+        const nextPositionMap = {
+          ...pick(state, intersectionKeys),
+          ...newPositionMap,
+        };
+
+        return nextPositionMap;
+      }
+      return state;
+    });
+  }, [categoryData]);
+
+  useEffect(() => {
+    updateNodeInternals(id);
+  }, [id, updateNodeInternals, positionMap]);
+
+  return { positions };
+};
+
+export const useBuildSwitchHandlePositions = ({
+  data,
+  id,
+}: {
+  id: string;
+  data: NodeData;
+}) => {};