From 509301fb8089db44dbbd655a78591d756fb7f83b Mon Sep 17 00:00:00 2001 From: yanguoyu <841185308@qq.com> Date: Fri, 2 Aug 2024 18:34:30 +0800 Subject: [PATCH] fix: Use GlobalAlertDialog to replace Notification --- .../src/components/NervosDAO/hooks.ts | 28 ++++------- .../src/components/SUDTUpdateDialog/index.tsx | 15 +++--- .../src/components/SpecialAssetList/index.tsx | 50 ++++++++----------- .../stateProvider/actionCreators/app.ts | 14 ++---- .../src/states/stateProvider/reducer.ts | 11 ---- 5 files changed, 43 insertions(+), 75 deletions(-) diff --git a/packages/neuron-ui/src/components/NervosDAO/hooks.ts b/packages/neuron-ui/src/components/NervosDAO/hooks.ts index e0e900c72c..a0a8097ab2 100644 --- a/packages/neuron-ui/src/components/NervosDAO/hooks.ts +++ b/packages/neuron-ui/src/components/NervosDAO/hooks.ts @@ -1,6 +1,6 @@ import { useEffect, useCallback, useState } from 'react' import { AppActions, StateAction } from 'states/stateProvider/reducer' -import { updateNervosDaoData, clearNervosDaoData } from 'states/stateProvider/actionCreators' +import { updateNervosDaoData, clearNervosDaoData, showGlobalAlertDialog } from 'states/stateProvider/actionCreators' import { NavigateFunction } from 'react-router-dom' import { type CKBComponents } from '@ckb-lumos/lumos/rpc' @@ -142,14 +142,11 @@ export const useOnWithdrawDialogSubmit = ({ } }) .catch((err: Error) => { - dispatch({ - type: AppActions.AddNotification, - payload: { - type: 'alert', - timestamp: +new Date(), - content: err.message, - }, - }) + showGlobalAlertDialog({ + type: 'failed', + message: err.message, + action: 'ok', + })(dispatch) }) } setActiveRecord(null) @@ -208,14 +205,11 @@ export const useOnActionClick = ({ } }) .catch((err: Error) => { - dispatch({ - type: AppActions.AddNotification, - payload: { - type: 'alert', - timestamp: +new Date(), - content: err.message, - }, - }) + showGlobalAlertDialog({ + type: 'failed', + message: err.message, + action: 'ok', + })(dispatch) }) } else { setActiveRecord(record) diff --git a/packages/neuron-ui/src/components/SUDTUpdateDialog/index.tsx b/packages/neuron-ui/src/components/SUDTUpdateDialog/index.tsx index e439dac575..3a52c9420d 100644 --- a/packages/neuron-ui/src/components/SUDTUpdateDialog/index.tsx +++ b/packages/neuron-ui/src/components/SUDTUpdateDialog/index.tsx @@ -1,7 +1,7 @@ import React, { useReducer, useMemo, useCallback } from 'react' import { useTranslation } from 'react-i18next' import { destroyAssetAccount } from 'services/remote' -import { useState as useGlobalState, useDispatch, AppActions } from 'states' +import { useState as useGlobalState, useDispatch, AppActions, showGlobalAlertDialog } from 'states' import { UDTType, isSuccessResponse } from 'utils' import TextField from 'widgets/TextField' import Dialog from 'widgets/Dialog' @@ -123,14 +123,11 @@ const SUDTUpdateDialog = ({ }, }) } else { - globalDispatch({ - type: AppActions.AddNotification, - payload: { - type: 'alert', - timestamp: +new Date(), - content: typeof res.message === 'string' ? res.message : res.message.content!, - }, - }) + showGlobalAlertDialog({ + type: 'failed', + message: typeof res.message === 'string' ? res.message : res.message.content!, + action: 'ok', + })(globalDispatch) } }) }, [globalDispatch, walletId, accountId]) diff --git a/packages/neuron-ui/src/components/SpecialAssetList/index.tsx b/packages/neuron-ui/src/components/SpecialAssetList/index.tsx index 7f4c5eb6b9..ed6c7057b0 100644 --- a/packages/neuron-ui/src/components/SpecialAssetList/index.tsx +++ b/packages/neuron-ui/src/components/SpecialAssetList/index.tsx @@ -1,5 +1,5 @@ import React, { useState, useEffect, useMemo, useCallback } from 'react' -import { useState as useGlobalState, useDispatch, AppActions } from 'states' +import { useState as useGlobalState, useDispatch, AppActions, showGlobalAlertDialog } from 'states' import { useTranslation } from 'react-i18next' import { useNavigate, useLocation } from 'react-router-dom' import Pagination from 'widgets/Pagination' @@ -195,14 +195,11 @@ const SpecialAssetList = () => { setCells(items) setTotalCount(+count) } else { - dispatch({ - type: AppActions.AddNotification, - payload: { - type: 'alert', - timestamp: +new Date(), - content: typeof res.message === 'string' ? res.message : res.message.content!, - }, - }) + showGlobalAlertDialog({ + type: 'failed', + message: typeof res.message === 'string' ? res.message : res.message.content!, + action: 'ok', + })(dispatch) } }) .then(() => { @@ -280,10 +277,11 @@ const SpecialAssetList = () => { } = e.target const cell = cells.find(c => c.outPoint.txHash === txHash && c.outPoint.index === idx) if (!cell) { - dispatch({ - type: AppActions.AddNotification, - payload: { type: 'alert', timestamp: +new Date(), content: 'Cannot find the cell' }, - }) + showGlobalAlertDialog({ + type: 'failed', + message: 'Cannot find the cell', + action: 'ok', + })(dispatch) return } if (cell.customizedAssetInfo.type === 'NFT') { @@ -322,14 +320,11 @@ const SpecialAssetList = () => { }, }) } else { - dispatch({ - type: AppActions.AddNotification, - payload: { - type: 'alert', - timestamp: +new Date(), - content: typeof res.message === 'string' ? res.message : res.message.content!, - }, - }) + showGlobalAlertDialog({ + type: 'failed', + message: typeof res.message === 'string' ? res.message : res.message.content!, + action: 'ok', + })(dispatch) } } switch (cell.customizedAssetInfo.lock) { @@ -355,14 +350,11 @@ const SpecialAssetList = () => { }) } } else { - dispatch({ - type: AppActions.AddNotification, - payload: { - type: 'alert', - timestamp: +new Date(), - content: typeof res.message === 'string' ? res.message : res.message.content!, - }, - }) + showGlobalAlertDialog({ + type: 'failed', + message: typeof res.message === 'string' ? res.message : res.message.content!, + action: 'ok', + })(dispatch) } }) } else { diff --git a/packages/neuron-ui/src/states/stateProvider/actionCreators/app.ts b/packages/neuron-ui/src/states/stateProvider/actionCreators/app.ts index 1a92c5b6b0..d4bc8867ad 100644 --- a/packages/neuron-ui/src/states/stateProvider/actionCreators/app.ts +++ b/packages/neuron-ui/src/states/stateProvider/actionCreators/app.ts @@ -81,15 +81,11 @@ export const addPopup = (text: string) => (dispatch: StateDispatch) => { export const addNotification = (message: State.Message) => (dispatch: StateDispatch) => { dispatch({ - type: AppActions.AddNotification, - payload: message, - }) -} - -export const dismissNotification = (timestamp: number) => (dispatch: StateDispatch) => { - dispatch({ - type: AppActions.DismissNotification, - payload: timestamp, + type: AppActions.UpdateGlobalAlertDialog, + payload: { + type: ['success', 'failed'].includes(message.type) ? message.type : 'warning', + message: message.content, + } as State.GlobalAlertDialog, }) } diff --git a/packages/neuron-ui/src/states/stateProvider/reducer.ts b/packages/neuron-ui/src/states/stateProvider/reducer.ts index 23995000a3..3d430d22e9 100644 --- a/packages/neuron-ui/src/states/stateProvider/reducer.ts +++ b/packages/neuron-ui/src/states/stateProvider/reducer.ts @@ -38,7 +38,6 @@ export enum AppActions { ClearSendState = 'clearSendState', UpdateMessage = 'updateMessage', SetGlobalDialog = 'setGlobalDialog', - AddNotification = 'addNotification', DismissNotification = 'dismissNotification', ClearNotificationsOfCode = 'clearNotificationsOfCode', ClearNotifications = 'clearNotifications', @@ -84,7 +83,6 @@ export type StateAction = | { type: AppActions.ClearSendState } | { type: AppActions.UpdateMessage; payload: any } | { type: AppActions.SetGlobalDialog; payload: State.GlobalDialogType } - | { type: AppActions.AddNotification; payload: State.Message } | { type: AppActions.DismissNotification; payload: number } // payload: timestamp | { type: AppActions.ClearNotificationsOfCode; payload: ErrorCode } // payload: code | { type: AppActions.ClearNotifications } @@ -318,15 +316,6 @@ export const reducer = produce((state: Draft, action: state.app.globalDialog = action.payload break } - case AppActions.AddNotification: { - /** - * payload: { type, content } - */ - // NOTICE: for simplicity, only one notification will be displayed - state.app.notifications.push(action.payload) - state.app.showTopAlert = true - break - } case AppActions.DismissNotification: { /** * payload: timestamp