diff --git a/packages/web/hooks/useConfirm.tsx b/packages/web/hooks/useConfirm.tsx index 3bcc2d623..84ca43636 100644 --- a/packages/web/hooks/useConfirm.tsx +++ b/packages/web/hooks/useConfirm.tsx @@ -41,87 +41,92 @@ export const useConfirm = (props?: { const { isOpen, onOpen, onClose } = useDisclosure(); - const confirmCb = useRef(); + const confirmCb = useRef(); const cancelCb = useRef(); - return { - openConfirm: useCallback( - (confirm?: any, cancel?: any, customContent?: string | React.ReactNode) => { - confirmCb.current = confirm; - cancelCb.current = cancel; + const openConfirm = ( + confirm?: Function, + cancel?: any, + customContent?: string | React.ReactNode + ) => { + confirmCb.current = confirm; + cancelCb.current = cancel; - customContent && setCustomContent(customContent); + customContent && setCustomContent(customContent); - return onOpen; - }, - [onOpen] - ), - onClose, - ConfirmModal: useCallback( - ({ - closeText = t('common.Cancel'), - confirmText = t('common.Confirm'), - isLoading, - bg, - countDown = 0 - }: { - closeText?: string; - confirmText?: string; - isLoading?: boolean; - bg?: string; - countDown?: number; - }) => { - const timer = useRef(); - const [countDownAmount, setCountDownAmount] = useState(countDown); + return onOpen; + }; - useEffect(() => { - timer.current = setInterval(() => { - setCountDownAmount((val) => { - if (val <= 0) { - clearInterval(timer.current); - } - return val - 1; - }); - }, 1000); - }, []); + const ConfirmModal = useCallback( + ({ + closeText = t('common.Cancel'), + confirmText = t('common.Confirm'), + isLoading, + bg, + countDown = 0 + }: { + closeText?: string; + confirmText?: string; + isLoading?: boolean; + bg?: string; + countDown?: number; + }) => { + const timer = useRef(); + const [countDownAmount, setCountDownAmount] = useState(countDown); - return ( - - - {customContent} - - {!hideFooter && ( - - {showCancel && ( - - )} + useEffect(() => { + timer.current = setInterval(() => { + setCountDownAmount((val) => { + if (val <= 0) { + clearInterval(timer.current); + } + return val - 1; + }); + }, 1000); + }, []); + return ( + + + {customContent} + + {!hideFooter && ( + + {showCancel && ( - - )} - - ); - }, - [customContent, hideFooter, iconSrc, isOpen, map.bg, onClose, showCancel, t, title] - ) + )} + + + + )} + + ); + }, + [customContent, hideFooter, iconSrc, isOpen, map.bg, onClose, showCancel, t, title] + ); + + return { + openConfirm, + onClose, + ConfirmModal }; }; diff --git a/projects/app/src/components/support/apikey/Table.tsx b/projects/app/src/components/support/apikey/Table.tsx index 66e9eae8f..188929980 100644 --- a/projects/app/src/components/support/apikey/Table.tsx +++ b/projects/app/src/components/support/apikey/Table.tsx @@ -68,7 +68,9 @@ const ApiKeyTable = ({ tips, appId }: { tips: string; appId?: string }) => { }); const { mutate: onclickRemove, isLoading: isDeleting } = useMutation({ - mutationFn: async (id: string) => delOpenApiById(id), + mutationFn: async (id: string) => { + return delOpenApiById(id); + }, onSuccess() { refetch(); } @@ -212,7 +214,7 @@ const ApiKeyTable = ({ tips, appId }: { tips: string; appId?: string }) => { label: t('common.Delete'), icon: 'delete', type: 'danger', - onClick: openConfirm(() => onclickRemove(_id)) + onClick: () => openConfirm(() => onclickRemove(_id))() } ]} />