fix: departments (#1203)

Reviewed-on: daoyoucloud/tachybase#1203

packages/plugins/@hera/plugin-core/src/client/features/departments/components/Departments.tsx

@@ -1,9 +1,7 @@
-import { useContext, useEffect, useMemo } from 'react';
+import React, { useContext, useMemo } from 'react';
 import { CollectionProvider_deprecated, ResourceActionContext, SchemaComponent, useRequest } from '@tachybase/client';
 import { RolesManagerContext } from '@tachybase/plugin-acl/client';
 
-import { jsx } from 'react/jsx-runtime';
-
 import { useTranslation } from '../../../locale';
 import { collectionDepartments } from '../collections/departments.collection';
 import { useAddDepartmentsGgt } from '../hooks/useAddDepartmentsGgt';
@@ -11,48 +9,43 @@ import { useBulkRemoveDepartmentsYyt } from '../hooks/useBulkRemoveDepartmentsYy
 import { useDataSourceFt } from '../hooks/useDataSourceFt';
 import { useDisabledVvt } from '../hooks/useDisabledVvt';
 import { useRemoveDepartmentXxt } from '../hooks/useRemoveDepartmentXxt';
-import { y } from '../others/y';
 import { getSchemaDdt } from '../schema/getSchemaDdt';
 import { useFilterActionPropsZ } from '../scopes/useFilterActionPropsZ';
 import { DepartmentTablePpe } from './DepartmentTablePpe';
 import { DepartmentTitleHht } from './DepartmentTitleHht';
 
 export const Departments = () => {
-  const { t: e } = useTranslation(),
-    { role: t } = useContext(RolesManagerContext),
-    o = useRequest(
-      {
-        resource: `roles/${t == null ? void 0 : t.name}/departments`,
-        action: 'list',
-        params: { appends: ['parent', 'parent.parent(recursively=true)'] },
-      },
-      { ready: !!t },
-    );
-  useEffect(() => {
-    o.run();
-  }, [o, t]);
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const a = useMemo(() => getSchemaDdt(), [t]);
-  return jsx(ResourceActionContext.Provider, {
-    value: y({}, o),
-    children: jsx(CollectionProvider_deprecated, {
-      collection: collectionDepartments,
-      children: jsx(SchemaComponent, {
-        schema: a,
-        components: {
-          DepartmentTable: DepartmentTablePpe,
-          DepartmentTitle: DepartmentTitleHht,
-        },
-        scope: {
-          useFilterActionProps: useFilterActionPropsZ,
-          t: e,
-          useRemoveDepartment: useRemoveDepartmentXxt,
-          useBulkRemoveDepartments: useBulkRemoveDepartmentsYyt,
-          useDataSource: useDataSourceFt,
-          useDisabled: useDisabledVvt,
-          useAddDepartments: useAddDepartmentsGgt,
-        },
-      }),
-    }),
-  });
+  const { t } = useTranslation();
+  const { role } = useContext(RolesManagerContext);
+  const resource = useRequest(
+    {
+      resource: `roles/${role?.name}/departments`,
+      action: 'list',
+      params: { appends: ['parent', 'parent.parent(recursively=true)'] },
+    },
+    { ready: !!role, refreshDeps: [role] },
+  );
+  const schema = useMemo(() => getSchemaDdt(), [role]);
+  return (
+    <ResourceActionContext.Provider value={resource}>
+      <CollectionProvider_deprecated collection={collectionDepartments}>
+        <SchemaComponent
+          schema={schema}
+          components={{
+            DepartmentTable: DepartmentTablePpe,
+            DepartmentTitle: DepartmentTitleHht,
+          }}
+          scope={{
+            useFilterActionProps: useFilterActionPropsZ,
+            t,
+            useRemoveDepartment: useRemoveDepartmentXxt,
+            useBulkRemoveDepartments: useBulkRemoveDepartmentsYyt,
+            useDataSource: useDataSourceFt,
+            useDisabled: useDisabledVvt,
+            useAddDepartments: useAddDepartmentsGgt,
+          }}
+        ></SchemaComponent>
+      </CollectionProvider_deprecated>
+    </ResourceActionContext.Provider>
+  );
 };

packages/plugins/@hera/plugin-core/src/client/features/departments/components/DepartmentsProvider.tsx

@@ -0,0 +1,43 @@
+import React, { useState } from 'react';
+import { useRequest } from '@tachybase/client';
+
+import { contextK } from '../context/contextK';
+
+export const DepartmentsProvider = ({ children }) => {
+  const [user, setUser] = useState(null);
+  const [department, setDepartment] = useState(null);
+  const usersRequest = useRequest(
+    {
+      resource: 'users',
+      action: 'list',
+      params: {
+        appends: ['departments', 'departments.parent(recursively=true)'],
+        filter: department ? { 'departments.id': department.id } : {},
+        pageSize: 50,
+      },
+    },
+    {
+      manual: true,
+      refreshDeps: [department],
+    },
+  );
+  const departmentsRequest = useRequest({
+    resource: 'departments',
+    action: 'list',
+    params: { pagination: false, filter: { parentId: null } },
+  });
+  return (
+    <contextK.Provider
+      value={{
+        user,
+        setUser,
+        department,
+        setDepartment,
+        usersResource: { service: usersRequest },
+        departmentsResource: { service: departmentsRequest },
+      }}
+    >
+      {children}
+    </contextK.Provider>
+  );
+};

packages/plugins/@hera/plugin-core/src/client/features/departments/components/GeComponent.tsx

@@ -1,36 +0,0 @@
-import { useEffect, useState } from 'react';
-import { useRequest } from '@tachybase/client';
-
-import { jsx } from 'react/jsx-runtime';
-
-import { contextK } from '../context/contextK';
-
-export const GeComponent = (e) => {
-  const [t, o] = useState(null),
-    [a, r] = useState(null),
-    c = useRequest({
-      resource: 'users',
-      action: 'list',
-      params: {
-        appends: ['departments', 'departments.parent(recursively=true)'],
-        filter: a ? { 'departments.id': a.id } : {},
-        pageSize: 50,
-      },
-    });
-  useEffect(() => {
-    c.run();
-  }, [a]);
-  const i = { resource: 'departments', action: 'list', params: { pagination: false, filter: { parentId: null } } },
-    x = useRequest(i);
-  return jsx(contextK.Provider, {
-    value: {
-      user: t,
-      setUser: o,
-      department: a,
-      setDepartment: r,
-      usersResource: { service: c },
-      departmentsResource: { service: x },
-    },
-    children: e.children,
-  });
-};

packages/plugins/@hera/plugin-core/src/client/features/departments/index.tsx

@@ -4,15 +4,13 @@ import PluginACLClient from '@tachybase/plugin-acl/client';
 
 import { tval } from '../../locale';
 import { Departments } from './components/Departments';
-import { GeComponent } from './components/GeComponent';
+import { DepartmentsProvider } from './components/DepartmentsProvider';
 import { MmtComponent } from './components/MmtComponent';
 import { UserDepartmentsField } from './components/UserDepartmentsField';
 import { DepartmentOwnersFieldSetting } from './settings/DepartmentOwnersFieldSetting';
 import { UserDepartmentsFieldSetting } from './settings/UserDepartmentsFieldSetting';
 import { UserMainDepartmentFieldSetting } from './settings/UserMainDepartmentFieldSetting';
 
-// import { T } from './others/T';
-
 export class DepartmentsPlugin extends Plugin {
   async load() {
     this.app.addComponents({
@@ -28,16 +26,11 @@ export class DepartmentsPlugin extends Plugin {
       title: tval('Departments'),
       Component: () => {
         const context = useSchemaComponentContext();
-        // return jsx(SchemaComponentContext.Provider, {
-        //   value: T({ ...o }, { designable: false }),
-        //   children: jsx(GeComponent, { children: jsx(MmtComponent, {}) }),
-        // });
-
         return (
           <SchemaComponentContext.Provider value={{ ...context, designable: false }}>
-            <GeComponent>
+            <DepartmentsProvider>
               <MmtComponent />
-            </GeComponent>
+            </DepartmentsProvider>
           </SchemaComponentContext.Provider>
         );
       },