feat(hooks): add useACL

Author: xiejay97

packages/hooks/src/index.ts

@@ -1,5 +1,6 @@
 export { useStorage } from './storage';
 export { createGlobalState } from './createGlobalState';
+export { useACL } from './useACL';
 export { useAsync } from './useAsync';
 export { useEvent } from './useEvent';
 export { useEventCallback } from './useEventCallback';

packages/platform/src/app/core/useACL.ts packages/hooks/src/useACL.tspackages/platform/src/app/core/useACL.ts renamed to packages/hooks/src/useACL.ts

@@ -1,62 +1,46 @@
 import { isArray } from 'lodash';
-import { useEffect } from 'react';
-
-import { useForceUpdate } from '@react-devui/hooks';
+import { useSyncExternalStore } from 'react';
 
 export type Control = string | number;
 export type ControlMode = 'one' | 'all';
-export interface ACLConfig {
-  full?: boolean;
-  controls?: Control[];
-}
 
 export class ACL {
-  public controlMode: ControlMode = 'one';
+  private _full = false;
+  private _controls = new Set<Control>();
 
-  private _updates = new Set<() => void>();
-  private _update() {
-    for (const cb of this._updates) {
-      cb();
-    }
-  }
-  public addUpdateListener(cb: () => void) {
-    this._updates.add(cb);
-    return () => {
-      this._updates.delete(cb);
-    };
-  }
-
-  private _full: boolean;
   public get full(): boolean {
     return this._full;
   }
-  public setFull(full: boolean) {
-    this._full = full;
-    this._update();
-  }
 
-  private _controls: Set<Control>;
   public get controls(): Control[] {
     return Array.from(this._controls);
   }
+
+  public setFull(full: boolean) {
+    this._full = full;
+    emitChange();
+  }
+
   public set(control: Control[]): void {
     this._controls = new Set(control);
-    this._update();
+    emitChange();
   }
+
   public add(control: Control | Control[]): void {
     for (const v of isArray(control) ? control : [control]) {
       this._controls.add(v);
     }
-    this._update();
+    emitChange();
   }
+
   public remove(control: Control | Control[]): void {
     for (const v of isArray(control) ? control : [control]) {
       this._controls.delete(v);
     }
-    this._update();
+    emitChange();
   }
 
-  public can(control: Control | Control[], mode = this.controlMode): boolean {
+  public can(control: Control | Control[], mode: ControlMode = 'one'): boolean {
     if (this._full) {
       return true;
     }
@@ -75,21 +59,29 @@ export class ACL {
     }
     return false;
   }
-
-  constructor(config?: ACLConfig) {
-    this._full = config?.full ?? false;
-    this._controls = new Set(config?.controls ?? []);
-  }
 }
 
 const acl = new ACL();
 
-export function useACL() {
-  const forceUpdate = useForceUpdate();
+let listeners: (() => void)[] = [];
 
-  useEffect(() => {
-    return acl.addUpdateListener(forceUpdate);
-  }, [forceUpdate]);
+function subscribe(onStoreChange: () => void) {
+  listeners = listeners.concat([onStoreChange]);
+  return () => {
+    listeners = listeners.filter((f) => f !== onStoreChange);
+  };
+}
 
+function getSnapshot() {
   return acl;
 }
+
+function emitChange() {
+  for (const listener of listeners) {
+    listener();
+  }
+}
+
+export function useACL() {
+  return useSyncExternalStore(subscribe, getSnapshot);
+}

packages/platform/src/app/Routes.guard.tsx

@@ -3,8 +3,10 @@ import type { CanActivateFn } from './Routes';
 import { isNull, isObject } from 'lodash';
 import { Navigate, useLocation } from 'react-router-dom';
 
+import { useACL } from '@react-devui/hooks';
+
 import { LOGIN_PATH, PREV_ROUTE_KEY } from './config/other';
-import { TOKEN, useACL } from './core';
+import { TOKEN } from './core';
 
 export function useACLGuard(): CanActivateFn {
   const acl = useACL();

packages/platform/src/app/Routes.tsx

@@ -1,4 +1,4 @@
-import type { Control, ControlMode } from './core/useACL';
+import type { Control, ControlMode } from '@react-devui/hooks/useACL';
 import type { IndexRouteObject, NonIndexRouteObject, RouteMatch } from 'react-router-dom';
 
 import { isFunction, isUndefined, nth } from 'lodash';

packages/platform/src/app/config/menu.ts

@@ -1,4 +1,4 @@
-import type { Control, ControlMode } from '../core/useACL';
+import type { Control, ControlMode } from '@react-devui/hooks/useACL';
 
 import { DashboardOutlined, ExceptionOutlined, ExperimentOutlined, ProfileOutlined } from '@react-devui/icons';
 

packages/platform/src/app/core/index.ts

@@ -1,6 +1,5 @@
 export { useHttp } from './http';
 export { TOKEN, useRefreshToken } from './token';
 export { GlobalStore } from './store';
-export { useACL } from './useACL';
 export { useInit } from './useInit';
 export { useMenu } from './useMenu';

packages/platform/src/app/core/useInit.ts

@@ -1,10 +1,11 @@
 import type { AppNotification, AppUser } from './store';
 
+import { useACL } from '@react-devui/hooks';
+
 import { ROLE_ACL } from '../config/acl';
 import { useHttp } from './http';
 import { GlobalStore } from './store';
 import { useRefreshToken } from './token';
-import { useACL } from './useACL';
 
 export function useInit() {
   const http = useHttp();

packages/platform/src/app/core/useMenu.ts

@@ -7,11 +7,10 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link, useLocation } from 'react-router-dom';
 
-import { useMount } from '@react-devui/hooks';
+import { useACL, useMount } from '@react-devui/hooks';
 
 import { MENU } from '../config/menu';
 import { GlobalStore } from './store';
-import { useACL } from './useACL';
 
 export function useMenu() {
   const acl = useACL();

packages/platform/src/app/routes/test/acl/ACL.tsx

@@ -2,10 +2,10 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 
+import { useACL } from '@react-devui/hooks';
 import { DAlert, DButton, DCard, DTable, DTag } from '@react-devui/ui';
 
 import { AppRouteHeader } from '../../../components';
-import { useACL } from '../../../core';
 import { AppRoute } from '../../../utils';
 
 import styles from './ACL.module.scss';
@@ -40,10 +40,6 @@ export default AppRoute(() => {
                 <DTable.Th>Controls</DTable.Th>
                 <DTable.Td>{acl.controls.join(', ') || '-'}</DTable.Td>
               </tr>
-              <tr>
-                <DTable.Th>ControlMode</DTable.Th>
-                <DTable.Td>{acl.controlMode}</DTable.Td>
-              </tr>
             </tbody>
           </table>
         </DTable>