fix: api key delete bug (#1524)

packages/web/hooks/useConfirm.tsx

@@ -41,87 +41,92 @@ export const useConfirm = (props?: {
 
   const { isOpen, onOpen, onClose } = useDisclosure();
 
-  const confirmCb = useRef<any>();
+  const confirmCb = useRef<Function>();
   const cancelCb = useRef<any>();
 
-  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<any>();
-        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<any>();
+      const [countDownAmount, setCountDownAmount] = useState(countDown);
 
-        return (
-          <MyModal isOpen={isOpen} iconSrc={iconSrc} title={title} maxW={['90vw', '500px']}>
-            <ModalBody pt={5} whiteSpace={'pre-wrap'}>
-              {customContent}
-            </ModalBody>
-            {!hideFooter && (
-              <ModalFooter>
-                {showCancel && (
-                  <Button
-                    variant={'whiteBase'}
-                    onClick={() => {
-                      onClose();
-                      typeof cancelCb.current === 'function' && cancelCb.current();
-                    }}
-                  >
-                    {closeText}
-                  </Button>
-                )}
+      useEffect(() => {
+        timer.current = setInterval(() => {
+          setCountDownAmount((val) => {
+            if (val <= 0) {
+              clearInterval(timer.current);
+            }
+            return val - 1;
+          });
+        }, 1000);
+      }, []);
 
+      return (
+        <MyModal isOpen={isOpen} iconSrc={iconSrc} title={title} maxW={['90vw', '500px']}>
+          <ModalBody pt={5} whiteSpace={'pre-wrap'}>
+            {customContent}
+          </ModalBody>
+          {!hideFooter && (
+            <ModalFooter>
+              {showCancel && (
                 <Button
-                  bg={bg ? bg : map.bg}
-                  isDisabled={countDownAmount > 0}
-                  ml={4}
-                  isLoading={isLoading}
+                  variant={'whiteBase'}
                   onClick={() => {
                     onClose();
-                    typeof confirmCb.current === 'function' && confirmCb.current();
+                    typeof cancelCb.current === 'function' && cancelCb.current();
                   }}
                 >
-                  {countDownAmount > 0 ? `${countDownAmount}s` : confirmText}
+                  {closeText}
                 </Button>
-              </ModalFooter>
-            )}
-          </MyModal>
-        );
-      },
-      [customContent, hideFooter, iconSrc, isOpen, map.bg, onClose, showCancel, t, title]
-    )
+              )}
+
+              <Button
+                bg={bg ? bg : map.bg}
+                isDisabled={countDownAmount > 0}
+                ml={4}
+                isLoading={isLoading}
+                onClick={() => {
+                  onClose();
+                  typeof confirmCb.current === 'function' && confirmCb.current();
+                }}
+              >
+                {countDownAmount > 0 ? `${countDownAmount}s` : confirmText}
+              </Button>
+            </ModalFooter>
+          )}
+        </MyModal>
+      );
+    },
+    [customContent, hideFooter, iconSrc, isOpen, map.bg, onClose, showCancel, t, title]
+  );
+
+  return {
+    openConfirm,
+    onClose,
+    ConfirmModal
   };
 };

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))()
                       }
                     ]}
                   />