refactor: show toast for transfer key generation error

packages/app/src/client/services/g2g-transfer.ts

@@ -1,23 +1,15 @@
-import { useMemo, useState } from 'react';
-
-import { throttle } from 'throttle-debounce';
+import { useCallback, useState } from 'react';
 
 import { apiv3Post } from '~/client/util/apiv3-client';
 
-// eslint-disable-next-line @typescript-eslint/ban-types
-export const useGenerateTransferKeyWithThrottle = (): {transferKey: string, generateTransferKeyWithThrottle: Function} => {
+export const useGenerateTransferKey = (): {transferKey: string, generateTransferKey: () => Promise<void>} => {
   const [transferKey, setTransferKey] = useState('');
 
-  const generateTransferKeyWithThrottle = useMemo(() => {
-    const href = document.location.href;
-    const url = new URL(href);
-
-    return throttle(1000, async() => {
-      const response = await apiv3Post('/g2g-transfer/generate-key', { appSiteUrl: url.origin });
-      const { transferKey } = response.data;
-      setTransferKey(transferKey);
-    });
+  const generateTransferKey = useCallback(async() => {
+    const response = await apiv3Post('/g2g-transfer/generate-key', { appSiteUrl: window.location.origin });
+    const { transferKey } = response.data;
+    setTransferKey(transferKey);
   }, []);
 
-  return { transferKey, generateTransferKeyWithThrottle };
+  return { transferKey, generateTransferKey };
 };

packages/app/src/components/Admin/G2GDataTransfer.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useState } from 'react';
 
 import { useTranslation } from 'react-i18next';
 
-import { useGenerateTransferKeyWithThrottle } from '~/client/services/g2g-transfer';
+import { useGenerateTransferKey } from '~/client/services/g2g-transfer';
 import { toastError, toastSuccess } from '~/client/util/apiNotification';
 import { apiv3Get, apiv3Post } from '~/client/util/apiv3-client';
 import { G2G_PROGRESS_STATUS, type G2GProgress } from '~/interfaces/g2g-transfer';
@@ -80,11 +80,16 @@ const G2GDataTransfer = (): JSX.Element => {
     }
   }, [socket]);
 
-  const { transferKey, generateTransferKeyWithThrottle } = useGenerateTransferKeyWithThrottle();
+  const { transferKey, generateTransferKey } = useGenerateTransferKey();
 
-  const onClickHandler = useCallback(() => {
-    generateTransferKeyWithThrottle();
-  }, [generateTransferKeyWithThrottle]);
+  const onClickHandler = useCallback(async() => {
+    try {
+      await generateTransferKey();
+    }
+    catch (errs) {
+      toastError(errs);
+    }
+  }, [generateTransferKey]);
 
   const startTransfer = useCallback(async(e) => {
     e.preventDefault();

packages/app/src/components/DataTransferForm.tsx

@@ -1,20 +1,14 @@
-import React, { useCallback } from 'react';
-
+import React from 'react';
 
 import { useTranslation } from 'react-i18next';
 
-import { useGenerateTransferKeyWithThrottle } from '~/client/services/g2g-transfer';
+import { useGenerateTransferKey } from '~/client/services/g2g-transfer';
 
 import CustomCopyToClipBoard from './Common/CustomCopyToClipBoard';
 
 const DataTransferForm = (): JSX.Element => {
   const { t } = useTranslation();
-
-  const { transferKey, generateTransferKeyWithThrottle } = useGenerateTransferKeyWithThrottle();
-
-  const onClickHandler = useCallback(() => {
-    generateTransferKeyWithThrottle();
-  }, [generateTransferKeyWithThrottle]);
+  const { transferKey, generateTransferKey } = useGenerateTransferKey();
 
   return (
     <div data-testid="installerForm" className="p-3">
@@ -24,7 +18,7 @@ const DataTransferForm = (): JSX.Element => {
 
       <div className="form-group row mt-3">
         <div className="col-md-12">
-          <button type="button" className="btn btn-primary w-100" onClick={onClickHandler}>
+          <button type="button" className="btn btn-primary w-100" onClick={generateTransferKey}>
             {t('g2g_data_transfer.publish_transfer_key')}
           </button>
         </div>