refactor: extract some utils function to utils

web/src/components/modals/GroupDetail/Panel/GroupPanelTree.tsx

@@ -1,59 +1,12 @@
 import React, { useCallback, useMemo, useRef } from 'react';
-import {
+import { GroupPanel as GroupPanelInfo, showToasts } from 'tailchat-shared';
-  GroupPanelType,
-  GroupPanel as GroupPanelInfo,
-  showToasts,
-} from 'tailchat-shared';
 import { Tree } from 'antd';
 import type { NodeDragEventParams } from 'rc-tree/lib/contextTypes';
 import type { DataNode, EventDataNode } from 'antd/lib/tree';
 import type { Key } from 'rc-tree/lib/interface';
 import type { AllowDrop } from 'rc-tree/lib/Tree';
 import _cloneDeep from 'lodash/cloneDeep';
-import _isNil from 'lodash/isNil';
+import { buildTreeDataWithGroupPanel, rebuildGroupPanelOrder } from './utils';
-
-/**
- * 将一维的面板列表构筑成立体的数组
- */
-function buildTreeDataWithGroupPanel(
-  groupPanels: GroupPanelInfo[]
-): DataNode[] {
-  return groupPanels
-    .filter((panel) => panel.type === GroupPanelType.GROUP)
-    .map<DataNode>((section) => ({
-      key: section.id,
-      title: section.name,
-      isLeaf: false,
-      children: groupPanels
-        .filter((panel) => panel.parentId === section.id)
-        .map<DataNode>((panel) => ({
-          key: panel.id,
-          title: panel.name,
-          isLeaf: true,
-        })),
-    }));
-}
-
-/**
- * 重新构建面板顺序
- */
-export function rebuildGroupPanelOrder(
-  groupPanels: GroupPanelInfo[]
-): GroupPanelInfo[] {
-  const originGroupPanels = _cloneDeep(groupPanels);
-  const newPanel = originGroupPanels.filter((panel) => _isNil(panel.parentId)); // 第一层
-  const len = newPanel.length;
-  for (let i = len - 1; i >= 0; i--) {
-    const currentId = newPanel[i].id;
-    newPanel.splice(
-      i + 1,
-      0,
-      ...originGroupPanels.filter((p) => p.parentId === currentId)
-    );
-  }
-
-  return newPanel;
-}
 
 interface GroupPanelTree {
   groupPanels: GroupPanelInfo[];

web/src/components/modals/GroupDetail/Panel/__tests__/GroupPanelTree.spec.tsx

@@ -2,7 +2,7 @@ jest.mock('tailchat-shared/i18n');
 import { render } from '@testing-library/react';
 import React from 'react';
 import { GroupPanel, GroupPanelType } from 'tailchat-shared';
-import { GroupPanelTree, rebuildGroupPanelOrder } from '../GroupPanelTree';
+import { GroupPanelTree } from '../GroupPanelTree';
 
 const testGroupPanels: GroupPanel[] = [
   {
@@ -51,48 +51,3 @@ describe('GroupPanelTree', () => {
     expect(wrapper.container).toMatchSnapshot();
   });
 });
-
-describe('rebuildGroupPanelOrder', () => {
-  test('ref is changed', () => {
-    expect(rebuildGroupPanelOrder(testGroupPanels)).not.toBe(testGroupPanels);
-    expect(rebuildGroupPanelOrder(testGroupPanels)[0]).not.toBe(
-      testGroupPanels[0]
-    );
-  });
-
-  test('keep order if right', () => {
-    expect(rebuildGroupPanelOrder(testGroupPanels)).toEqual(testGroupPanels);
-  });
-
-  test('child should after parent', () => {
-    expect(
-      rebuildGroupPanelOrder([testGroupPanels[1], testGroupPanels[0]])
-    ).toEqual([testGroupPanels[0], testGroupPanels[1]]);
-  });
-
-  test('switch position should keep origin order', () => {
-    expect(
-      rebuildGroupPanelOrder([
-        testGroupPanels[1],
-        testGroupPanels[2],
-        testGroupPanels[0],
-      ])
-    ).toEqual([testGroupPanels[0], testGroupPanels[1], testGroupPanels[2]]);
-  });
-
-  test('switch position should keep origin order(group)', () => {
-    expect(
-      rebuildGroupPanelOrder([
-        testGroupPanels[1],
-        testGroupPanels[2],
-        testGroupPanels[0],
-        testGroupPanels[3],
-      ])
-    ).toEqual([
-      testGroupPanels[0],
-      testGroupPanels[1],
-      testGroupPanels[2],
-      testGroupPanels[3],
-    ]);
-  });
-});

web/src/components/modals/GroupDetail/Panel/__tests__/utils.spec.ts

@@ -0,0 +1,84 @@
+import { GroupPanel, GroupPanelType } from 'tailchat-shared';
+import { rebuildGroupPanelOrder } from '../utils';
+
+const testGroupPanels: GroupPanel[] = [
+  {
+    id: '00',
+    name: 'section-1',
+    type: GroupPanelType.GROUP,
+  },
+  {
+    id: '01',
+    name: 'panel-01',
+    type: GroupPanelType.TEXT,
+    parentId: '00',
+  },
+  {
+    id: '02',
+    name: 'panel-02',
+    type: GroupPanelType.TEXT,
+    parentId: '00',
+  },
+  {
+    id: '10',
+    name: 'section-2',
+    type: GroupPanelType.GROUP,
+  },
+  {
+    id: '11',
+    name: 'panel-11',
+    type: GroupPanelType.TEXT,
+    parentId: '10',
+  },
+  {
+    id: '12',
+    name: 'panel-12',
+    type: GroupPanelType.TEXT,
+    parentId: '10',
+  },
+];
+
+describe('rebuildGroupPanelOrder', () => {
+  test('ref is changed', () => {
+    expect(rebuildGroupPanelOrder(testGroupPanels)).not.toBe(testGroupPanels);
+    expect(rebuildGroupPanelOrder(testGroupPanels)[0]).not.toBe(
+      testGroupPanels[0]
+    );
+  });
+
+  test('keep order if right', () => {
+    expect(rebuildGroupPanelOrder(testGroupPanels)).toEqual(testGroupPanels);
+  });
+
+  test('child should after parent', () => {
+    expect(
+      rebuildGroupPanelOrder([testGroupPanels[1], testGroupPanels[0]])
+    ).toEqual([testGroupPanels[0], testGroupPanels[1]]);
+  });
+
+  test('switch position should keep origin order', () => {
+    expect(
+      rebuildGroupPanelOrder([
+        testGroupPanels[1],
+        testGroupPanels[2],
+        testGroupPanels[0],
+      ])
+    ).toEqual([testGroupPanels[0], testGroupPanels[1], testGroupPanels[2]]);
+  });
+
+  test('switch position should keep origin order(group)', () => {
+    expect(
+      rebuildGroupPanelOrder([
+        testGroupPanels[1],
+        testGroupPanels[2],
+        testGroupPanels[0],
+        testGroupPanels[3],
+      ])
+    ).toEqual([
+      testGroupPanels[0],
+      testGroupPanels[1],
+      testGroupPanels[2],
+      testGroupPanels[3],
+    ]);
+  });
+});

web/src/components/modals/GroupDetail/Panel/utils.ts

@@ -0,0 +1,47 @@
+import _isNil from 'lodash/isNil';
+import { GroupPanelType, GroupPanel as GroupPanelInfo } from 'tailchat-shared';
+import type { DataNode } from 'antd/lib/tree';
+import _cloneDeep from 'lodash/cloneDeep';
+
+/**
+ * 将一维的面板列表构筑成立体的数组
+ */
+export function buildTreeDataWithGroupPanel(
+  groupPanels: GroupPanelInfo[]
+): DataNode[] {
+  return groupPanels
+    .filter((panel) => panel.type === GroupPanelType.GROUP)
+    .map<DataNode>((section) => ({
+      key: section.id,
+      title: section.name,
+      isLeaf: false,
+      children: groupPanels
+        .filter((panel) => panel.parentId === section.id)
+        .map<DataNode>((panel) => ({
+          key: panel.id,
+          title: panel.name,
+          isLeaf: true,
+        })),
+    }));
+}
+
+/**
+ * 重新构建面板顺序
+ */
+export function rebuildGroupPanelOrder(
+  groupPanels: GroupPanelInfo[]
+): GroupPanelInfo[] {
+  const originGroupPanels = _cloneDeep(groupPanels);
+  const newPanel = originGroupPanels.filter((panel) => _isNil(panel.parentId)); // 第一层
+  const len = newPanel.length;
+  for (let i = len - 1; i >= 0; i--) {
+    const currentId = newPanel[i].id;
+    newPanel.splice(
+      i + 1,
+      0,
+      ...originGroupPanels.filter((p) => p.parentId === currentId)
+    );
+  }
+
+  return newPanel;
+}