refactor(ui): remove static method that create notification or toast

Author: xiejay97

packages/hooks/src/createGlobalState.ts

@@ -1,8 +1,8 @@
 import type { ImmerHook } from './useImmer';
 
-import { freeze } from 'immer';
+import { freeze, produce } from 'immer';
+import { useState } from 'react';
 
-import { useImmer } from './useImmer';
 import { useUnmount } from './useUnmount';
 
 export function createGlobalState<S>(): () => ImmerHook<S | undefined>;
@@ -11,16 +11,21 @@ export function createGlobalState<S>(initialValue?: S): () => ImmerHook<S | unde
   const store = {
     state: freeze(typeof initialValue === 'function' ? initialValue() : initialValue, true),
     setState(updater: any) {
+      if (typeof updater === 'function') {
+        store.state = produce(store.state, updater);
+      } else {
+        store.state = freeze(updater);
+      }
+
       for (const update of store.updates) {
-        update(updater);
+        update(store.state);
       }
     },
     updates: new Set<(...args: any[]) => any>(),
   };
 
   return () => {
-    const [state, setState] = useImmer(store.state);
-    store.state = state;
+    const [state, setState] = useState(store.state);
 
     if (!store.updates.has(setState)) {
       store.updates.add(setState);

packages/platform/src/app/App.tsx

@@ -7,12 +7,14 @@ import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 
 import { useAsync, useMount, useStorage } from '@react-devui/hooks';
+import { DNotification, DToast } from '@react-devui/ui';
 import { DRoot } from '@react-devui/ui';
 
 import { AppRoutes } from './Routes';
 import { LOGIN_PATH } from './config/other';
 import { STORAGE_KEY } from './config/storage';
 import { useHttp, useInit } from './core';
+import { useNotifications, useToasts } from './core/state';
 
 export type AppTheme = 'light' | 'dark';
 
@@ -25,6 +27,8 @@ export function App() {
   const [loading, setLoading] = useState(true);
   const languageStorage = useStorage<DLang>(...STORAGE_KEY.language);
   const themeStorage = useStorage<AppTheme>(...STORAGE_KEY.theme);
+  const [notifications] = useNotifications();
+  const [toasts] = useToasts();
 
   useMount(() => {
     i18n.changeLanguage(languageStorage.value);
@@ -77,7 +81,17 @@ export function App() {
     [languageStorage.value]
   );
 
-  return <DRoot context={rootContext}>{loading ? null : <AppRoutes />}</DRoot>;
+  return (
+    <DRoot context={rootContext}>
+      {loading ? null : <AppRoutes />}
+      {notifications.map(({ key, ...props }) => (
+        <DNotification {...props} key={key}></DNotification>
+      ))}
+      {toasts.map(({ key, ...props }) => (
+        <DToast {...props} key={key}></DToast>
+      ))}
+    </DRoot>
+  );
 }
 
 export default App;

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

@@ -10,10 +10,11 @@ import { concatMap, of } from 'rxjs';
 import { catchError, EMPTY, from, map, Subject, takeUntil, throwError } from 'rxjs';
 
 import { useEventCallback, useUnmount } from '@react-devui/hooks';
-import { ToastService } from '@react-devui/ui';
 
 import { environment } from '../../../environments';
 import { LOGIN_PATH, PREV_ROUTE_KEY } from '../../config/other';
+import { getGlobalKey } from '../../utils/vars';
+import { useToasts } from '../state';
 import { TOKEN } from '../token';
 import './mock';
 
@@ -27,6 +28,7 @@ export function useHttp() {
   const navigate = useNavigate();
   const location = useLocation();
   const { t } = useTranslation();
+  const [, setToasts] = useToasts();
 
   useUnmount(() => {
     for (const abort of dataRef.current.abortFns) {
@@ -68,9 +70,19 @@ export function useHttp() {
               if (error.response) {
                 switch (error.response.status) {
                   case 401:
-                    ToastService.open({
-                      dContent: t('User not authorized'),
-                      dType: 'error',
+                    setToasts((draft) => {
+                      const key = getGlobalKey();
+                      draft.push({
+                        key,
+                        children: t('User not authorized'),
+                        dVisible: true,
+                        dType: 'error',
+                        onClose: () => {
+                          setToasts((draft) => {
+                            draft.find((n) => n.key === key)!.dVisible = false;
+                          });
+                        },
+                      });
                     });
                     navigate(LOGIN_PATH, { state: { [PREV_ROUTE_KEY]: location } });
                     return EMPTY;

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

@@ -1,3 +1,5 @@
+import type { DNotificationProps, DToastProps } from '@react-devui/ui';
+
 import { createGlobalState } from '@react-devui/hooks';
 
 export interface UserState {
@@ -17,3 +19,7 @@ export interface NotificationItem {
   }[];
 }
 export const useNotificationState = createGlobalState<NotificationItem[]>();
+
+export const useNotifications = createGlobalState<(DNotificationProps & { key: string | number })[]>([]);
+
+export const useToasts = createGlobalState<(DToastProps & { key: string | number })[]>([]);

packages/platform/src/app/utils/vars.ts

@@ -0,0 +1,5 @@
+let globalKey = 0;
+export function getGlobalKey() {
+  globalKey += 1;
+  return globalKey;
+}

packages/ui/src/components/alert/Alert.tsx

@@ -92,6 +92,7 @@ export function DAlert(props: DAlertProps): JSX.Element | null {
           <DToastPanel
             {...restProps}
             ref={collapseRef}
+            children={dTitle}
             className={getClassName(restProps.className, `${dPrefix}alert--toast`)}
             style={{
               ...restProps.style,
@@ -100,7 +101,6 @@ export function DAlert(props: DAlertProps): JSX.Element | null {
             dClassNamePrefix="alert"
             dType={dType}
             dIcon={dIcon}
-            dContent={dTitle}
             dActions={dActions}
             onClose={() => {
               changeVisible(false);

packages/ui/src/components/index.ts

@@ -68,7 +68,7 @@ export type { DModalProps, DModalHeaderProps, DModalFooterProps } from './modal'
 export { DModal } from './modal';
 
 export type { DNotificationProps } from './notification';
-export { NotificationService } from './notification';
+export { DNotification } from './notification';
 
 export type { DPaginationProps } from './pagination';
 export { DPagination } from './pagination';
@@ -139,7 +139,7 @@ export type { DTimelineProps } from './timeline';
 export { DTimeline } from './timeline';
 
 export type { DToastProps } from './toast';
-export { ToastService } from './toast';
+export { DToast } from './toast';
 
 export type { DTooltipProps } from './tooltip';
 export { DTooltip } from './tooltip';