refactor(platform): use rcl-store instead of createGlobalState

Author: xiejay97

package.json

@@ -95,6 +95,7 @@
  "postcss-html": "^1.5.0",
  "postcss-markdown": "^1.2.0",
  "prettier": "^2.8.1",
+ "rcl-store": "^1.0.4",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-i18next": "^12.1.1",

packages/hooks/src/createGlobalState.ts

@@ -12,6 +12,9 @@ interface GlobalStateHook<S> {
  setState: Updater<S>;
 }
 
+/**
+ * @deprecated since version 19, try to use `rcl-store`
+ */
 export function createGlobalState<S>(): GlobalStateHook<S | undefined>;
 export function createGlobalState<S>(initialValue: S): GlobalStateHook<S>;
 export function createGlobalState<S>(initialValue?: S): GlobalStateHook<S | undefined> {

packages/platform/src/app/App.tsx

@@ -1,8 +1,9 @@
-import type { UserState } from './core/state';
+import type { AppUser } from './core/store';
 import type { DRootProps } from '@react-devui/ui';
 import type { DLang } from '@react-devui/ui/utils/types';
 
 import { isNull } from 'lodash';
+import { useStore } from 'rcl-store';
 import React, { useEffect, useMemo, useState } from 'react';
 
 import { useAsync, useMount, useStorage } from '@react-devui/hooks';
@@ -11,8 +12,7 @@ import { DRoot } from '@react-devui/ui';
 
 import { AppRoutes } from './Routes';
 import { STORAGE_KEY } from './config/storage';
-import { TOKEN, useHttp, useInit } from './core';
-import { useDialogs, useNotifications, useToasts } from './core/state';
+import { GlobalStore, TOKEN, useHttp, useInit } from './core';
 
 export type AppTheme = 'light' | 'dark';
 
@@ -23,9 +23,7 @@ export function App() {
  const [loading, setLoading] = useState(!isNull(TOKEN.value));
  const languageStorage = useStorage<DLang>(...STORAGE_KEY.language);
  const themeStorage = useStorage<AppTheme>(...STORAGE_KEY.theme);
- const [dialogs] = useDialogs();
- const [notifications] = useNotifications();
- const [toasts] = useToasts();
+ const [{ dialogs, notifications, toasts }] = useStore(GlobalStore, ['dialogs', 'notifications', 'toasts']);
 
  useMount(() => {
  if (!isNull(TOKEN.value)) {
@@ -36,7 +34,7 @@ export function App() {
  next: (res) => {
  TOKEN.set(res);
 
- http<UserState>({
+ http<AppUser>({
  url: '/auth/me',
  method: 'get',
  }).subscribe({

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

@@ -1,5 +1,5 @@
 import type { DeviceDoc } from '../../utils/types';
-import type { UserState, NotificationItem } from '../state';
+import type { AppNotification, AppUser } from '../store';
 import type { JWTToken, JWTTokenPayload } from '../token';
 
 import axios from 'axios';
@@ -22,16 +22,16 @@ if (environment.http.mock) {
  });
  };
 
- const admin: UserState = {
+ const admin: AppUser = {
  name: 'admin',
  permission: [ROLE_ACL.super_admin],
  };
- const user: UserState = {
+ const user: AppUser = {
  name: 'user',
  avatar: '/assets/imgs/avatar.png',
  permission: [0, ROUTES_ACL['/test/acl'], ROUTES_ACL['/test/http']],
  };
- const notification: NotificationItem[] = [
+ const notification: AppNotification[] = [
  {
  id: '1',
  title: 'Title1',

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

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

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

@@ -0,0 +1,38 @@
+import type { DNotificationProps, DToastProps } from '@react-devui/ui';
+
+import { createStore } from 'rcl-store';
+
+export interface AppUser {
+ name: string;
+ avatar?: string;
+ permission: (string | number)[];
+}
+
+export interface AppNotification {
+ id: string;
+ title: string;
+ list: {
+ message: string;
+ read: boolean;
+ }[];
+}
+
+export interface AppMenu {
+ expands?: string[];
+}
+
+export const GlobalStore = createStore<{
+ appUser: AppUser;
+ appNotifications: AppNotification[] | undefined;
+ appMenu: AppMenu;
+ notifications: (DNotificationProps & { key: string | number })[];
+ toasts: (DToastProps & { key: string | number })[];
+ dialogs: { key: string | number; type: any; props: any }[];
+}>({
+ appUser: {} as any,
+ appNotifications: undefined,
+ appMenu: {},
+ notifications: [],
+ toasts: [],
+ dialogs: [],
+});

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

@@ -1,20 +1,19 @@
-import type { UserState, NotificationItem } from './state';
+import type { AppNotification, AppUser } from './store';
 
 import { ROLE_ACL } from '../config/acl';
 import { useHttp } from './http';
-import { useUserState, useNotificationState } from './state';
+import { GlobalStore } from './store';
 import { useRefreshToken } from './token';
 import { useACL } from './useACL';
-import { useMenu } from './useMenu';
 
 export function useInit() {
  const http = useHttp();
  const acl = useACL();
 
  const refreshToken = useRefreshToken();
 
- const handleUser = (user: UserState) => {
- useUserState.setState(user);
+ const handleUser = (user: AppUser) => {
+ GlobalStore.set('appUser', user);
 
  //#region ACL
  acl.setFull(user.permission.includes(ROLE_ACL.super_admin));
@@ -23,27 +22,28 @@ export function useInit() {
  };
 
  const getNotification = () => {
- useNotificationState.setState(undefined);
- http<NotificationItem[]>(
+ GlobalStore.set('appNotifications', undefined);
+
+ http<AppNotification[]>(
  {
  url: '/notification',
  method: 'get',
  },
  { unmount: false }
  ).subscribe({
  next: (res) => {
- useNotificationState.setState(res);
+ GlobalStore.set('appNotifications', res);
  },
  });
  };
 
  const resetMenu = () => {
- useMenu.setState((draft) => {
+ GlobalStore.set('appMenu', (draft) => {
  draft.expands = undefined;
  });
  };
 
- return (user: UserState) => {
+ return (user: AppUser) => {
  refreshToken();
  handleUser(user);
  getNotification();

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

@@ -2,25 +2,22 @@ import type { MenuItem } from '../config/menu';
 import type { DMenuItem } from '@react-devui/ui/components/menu';
 
 import { isObject, isUndefined } from 'lodash';
+import { useStore } from 'rcl-store';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link, useLocation } from 'react-router-dom';
 
-import { createGlobalState, useMount } from '@react-devui/hooks';
+import { useMount } from '@react-devui/hooks';
 
 import { MENU } from '../config/menu';
+import { GlobalStore } from './store';
 import { useACL } from './useACL';
 
-export interface MenuState {
- expands?: string[];
-}
-const useMenuState = createGlobalState<MenuState>({});
-
 export function useMenu() {
  const acl = useACL();
  const { t } = useTranslation();
  const location = useLocation();
- const [menuState, setMenuState] = useMenuState();
+ const [{ appMenu }, { appMenu: setAppMenu }] = useStore(GlobalStore, ['appMenu']);
 
  const res: {
  active?: { path: string; parentSub: MenuItem[] };
@@ -78,8 +75,8 @@ export function useMenu() {
  (location.pathname === '/' ? res.firstCanActive?.parentSub : res.active?.parentSub)?.map((item) => item.path);
 
  useMount(() => {
- if (isUndefined(menuState.expands)) {
- setMenuState((draft) => {
+ if (isUndefined(appMenu.expands)) {
+ setAppMenu((draft) => {
  draft.expands = getDefaultExpands();
  });
  }
@@ -90,9 +87,8 @@ export function useMenu() {
  menu,
  active: location.pathname === '/' ? res.firstCanActive : res.active,
  firstCanActive: res.firstCanActive,
- expands: menuState.expands ?? getDefaultExpands(),
+ expands: appMenu.expands ?? getDefaultExpands(),
  },
- setMenuState,
+ setAppMenu,
  ] as const;
 }
-useMenu.setState = useMenuState.setState;

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

@@ -1,6 +1,7 @@
 import type { DTabsRef } from '@react-devui/ui/components/tabs';
 
 import { isUndefined } from 'lodash';
+import { useStore } from 'rcl-store';
 import { useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -10,20 +11,20 @@ import { WINDOW_SPACE } from '@react-devui/ui/utils';
 import { getClassName } from '@react-devui/utils';
 
 import { AppList } from '../../../../components';
-import { useNotificationState } from '../../../../core';
+import { GlobalStore } from '../../../../core';
 
 import styles from './Notification.module.scss';
 
 export function AppNotification(props: React.ButtonHTMLAttributes<HTMLButtonElement>): JSX.Element | null {
  const tabsRef = useRef<DTabsRef>(null);
 
- const [notification] = useNotificationState();
+ const [{ appNotifications }] = useStore(GlobalStore, ['appNotifications']);
  const { t } = useTranslation();
 
  const num = (() => {
  let n = 0;
- if (!isUndefined(notification)) {
- notification.forEach((notify) => {
+ if (!isUndefined(appNotifications)) {
+ appNotifications.forEach((notify) => {
  n += notify.list.filter((item) => !item.read).length;
  });
  }
@@ -33,16 +34,16 @@ export function AppNotification(props: React.ButtonHTMLAttributes<HTMLButtonElem
  return (
  <DPopover
  className={getClassName(styles['app-notification'], {
- [styles['app-notification--spinner']]: isUndefined(notification),
+ [styles['app-notification--spinner']]: isUndefined(appNotifications),
  })}
  dContent={
- isUndefined(notification) ? (
+ isUndefined(appNotifications) ? (
  <LoadingOutlined dTheme="primary" dSize={24} dSpin />
  ) : (
  <>
  <DTabs
  ref={tabsRef}
- dList={notification.map((notify) => ({
+ dList={appNotifications.map((notify) => ({
  id: notify.id,
  title: notify.title,
  panel: (