refactor(hooks): createGlobalState export state and setState

Author: xiejay97

packages/hooks/src/createGlobalState.ts

@@ -5,9 +5,15 @@ import { useState } from 'react';
 
 import { useUnmount } from './useUnmount';
 
-export function createGlobalState<S>(): { (): ImmerHook<S | undefined>; set: Updater<S | undefined> };
-export function createGlobalState<S>(initialValue: S): { (): ImmerHook<S>; set: Updater<S> };
-export function createGlobalState<S>(initialValue?: S): { (): ImmerHook<S | undefined>; set: Updater<S | undefined> } {
+interface GlobalStateHook<S> {
+  (): ImmerHook<S>;
+  readonly state: S;
+  setState: Updater<S>;
+}
+
+export function createGlobalState<S>(): GlobalStateHook<S | undefined>;
+export function createGlobalState<S>(initialValue: S): GlobalStateHook<S>;
+export function createGlobalState<S>(initialValue?: S): GlobalStateHook<S | undefined> {
   const store = {
     state: freeze(typeof initialValue === 'function' ? initialValue() : initialValue, true),
     setState(updater: any) {
@@ -24,7 +30,7 @@ export function createGlobalState<S>(initialValue?: S): { (): ImmerHook<S | unde
     updates: new Set<(...args: any[]) => any>(),
   };
 
-  return Object.assign<any, any>(
+  return new Proxy(
     () => {
       const [state, setState] = useState(store.state);
 
@@ -39,7 +45,15 @@ export function createGlobalState<S>(initialValue?: S): { (): ImmerHook<S | unde
       return [state, store.setState];
     },
     {
-      set: store.setState,
+      get(target, prop, receiver) {
+        if (prop === 'state') {
+          return store.state;
+        }
+        if (prop === 'setState') {
+          return store.setState;
+        }
+        return Reflect.get(target, prop, receiver);
+      },
     }
-  );
+  ) as any;
 }

packages/platform/src/app/core/http/useHttp.ts

@@ -71,21 +71,21 @@ export function useHttp() {
               if (error.response) {
                 switch (error.response.status) {
                   case 401:
-                    useToasts.set((draft) => {
+                    useToasts.setState((draft) => {
                       const key = getGlobalKey();
                       draft.push({
                         key,
                         children: t('User not authorized'),
                         dVisible: true,
                         dType: 'error',
                         onClose: () => {
-                          useToasts.set((draft) => {
+                          useToasts.setState((draft) => {
                             draft.find((n) => n.key === key)!.dVisible = false;
                           });
                         },
                         afterVisibleChange: (visible) => {
                           if (!visible) {
-                            useToasts.set((draft) => {
+                            useToasts.setState((draft) => {
                               draft.splice(
                                 draft.findIndex((n) => n.key === key),
                                 1

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

@@ -13,7 +13,7 @@ export function useInit() {
   const refreshToken = useRefreshToken();
 
   const handleUser = (user: UserState) => {
-    useUserState.set(user);
+    useUserState.setState(user);
 
     //#region ACL
     acl.setFull(user.role === 'admin');
@@ -22,7 +22,7 @@ export function useInit() {
   };
 
   const getNotification = () => {
-    useNotificationState.set(undefined);
+    useNotificationState.setState(undefined);
     http<NotificationItem[]>(
       {
         url: '/notification',
@@ -31,13 +31,13 @@ export function useInit() {
       { unmount: false }
     ).subscribe({
       next: (res) => {
-        useNotificationState.set(res);
+        useNotificationState.setState(res);
       },
     });
   };
 
   const resetMenu = () => {
-    useMenu.set((draft) => {
+    useMenu.setState((draft) => {
       draft.expands = undefined;
     });
   };

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

@@ -95,4 +95,4 @@ export function useMenu() {
     setMenuState,
   ] as const;
 }
-useMenu.set = useMenuState.set;
+useMenu.setState = useMenuState.setState;

packages/platform/src/app/routes/login/Login.tsx

@@ -74,7 +74,7 @@ export default function Login(): JSX.Element | null {
       },
       error: (error) => {
         setLoginLoading(false);
-        useNotifications.set((draft) => {
+        useNotifications.setState((draft) => {
           const key = getGlobalKey();
           draft.push({
             key,
@@ -83,13 +83,13 @@ export default function Login(): JSX.Element | null {
             dDescription: error.response!.statusText,
             dType: 'error',
             onClose: () => {
-              useNotifications.set((draft) => {
+              useNotifications.setState((draft) => {
                 draft.find((n) => n.key === key)!.dVisible = false;
               });
             },
             afterVisibleChange: (visible) => {
               if (!visible) {
-                useNotifications.set((draft) => {
+                useNotifications.setState((draft) => {
                   draft.splice(
                     draft.findIndex((n) => n.key === key),
                     1