perf: createGlobalState export set method without state

Author: xiejay97

packages/hooks/src/createGlobalState.ts

@@ -1,13 +1,13 @@
-import type { ImmerHook } from './useImmer';
+import type { ImmerHook, Updater } from './useImmer';
 
 import { freeze, produce } from 'immer';
 import { useState } from 'react';
 
 import { useUnmount } from './useUnmount';
 
-export function createGlobalState<S>(): () => ImmerHook<S | undefined>;
-export function createGlobalState<S>(initialValue: S): () => ImmerHook<S>;
-export function createGlobalState<S>(initialValue?: S): () => ImmerHook<S | undefined> {
+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> } {
   const store = {
     state: freeze(typeof initialValue === 'function' ? initialValue() : initialValue, true),
     setState(updater: any) {
@@ -24,17 +24,22 @@ export function createGlobalState<S>(initialValue?: S): () => ImmerHook<S | unde
     updates: new Set<(...args: any[]) => any>(),
   };
 
-  return () => {
-    const [state, setState] = useState(store.state);
+  return Object.assign<any, any>(
+    () => {
+      const [state, setState] = useState(store.state);
 
-    if (!store.updates.has(setState)) {
-      store.updates.add(setState);
-    }
+      if (!store.updates.has(setState)) {
+        store.updates.add(setState);
+      }
 
-    useUnmount(() => {
-      store.updates.delete(setState);
-    });
+      useUnmount(() => {
+        store.updates.delete(setState);
+      });
 
-    return [state, store.setState];
-  };
+      return [state, store.setState];
+    },
+    {
+      set: store.setState,
+    }
+  );
 }

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

@@ -28,7 +28,6 @@ export function useHttp() {
   const navigate = useNavigate();
   const location = useLocation();
   const { t } = useTranslation();
-  const [, setToasts] = useToasts();
 
   useUnmount(() => {
     for (const abort of dataRef.current.abortFns) {
@@ -70,18 +69,28 @@ export function useHttp() {
               if (error.response) {
                 switch (error.response.status) {
                   case 401:
-                    setToasts((draft) => {
+                    useToasts.set((draft) => {
                       const key = getGlobalKey();
                       draft.push({
                         key,
                         children: t('User not authorized'),
                         dVisible: true,
                         dType: 'error',
                         onClose: () => {
-                          setToasts((draft) => {
+                          useToasts.set((draft) => {
                             draft.find((n) => n.key === key)!.dVisible = false;
                           });
                         },
+                        afterVisibleChange: (visible) => {
+                          if (!visible) {
+                            useToasts.set((draft) => {
+                              draft.splice(
+                                draft.findIndex((n) => n.key === key),
+                                1
+                              );
+                            });
+                          }
+                        },
                       });
                     });
                     navigate(LOGIN_PATH, { state: { [PREV_ROUTE_KEY]: location } });

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

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

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

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