commonalize generateTransferKeyWithThrottle

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

@@ -0,0 +1,20 @@
+import { useMemo, useState } from 'react';
+
+import { throttle } from 'throttle-debounce';
+
+import { apiv3Post } from '~/client/util/apiv3-client';
+
+// eslint-disable-next-line @typescript-eslint/ban-types
+export const useGenerateTransferKeyWithThrottle = (): {transferKey: string, generateTransferKeyWithThrottle: Function} => {
+  const [transferKey, setTransferKey] = useState('');
+
+  const generateTransferKeyWithThrottle = useMemo(() => {
+    return throttle(1000, async() => {
+      const response = await apiv3Post('/g2g-transfer/generate-key');
+      const { transferKey } = response.data;
+      setTransferKey(transferKey);
+    });
+  }, []);
+
+  return { transferKey, generateTransferKeyWithThrottle };
+};

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

@@ -1,12 +1,10 @@
-import React, {
-  useCallback, useEffect, useState, useMemo,
-} from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 
 import { useTranslation } from 'react-i18next';
-import { debounce } from 'throttle-debounce';
 import * as toastr from 'toastr';
 
-import { apiv3Get, apiv3Post } from '~/client/util/apiv3-client';
+import { useGenerateTransferKeyWithThrottle } from '~/client/services/g2g-transfer';
+import { apiv3Get } from '~/client/util/apiv3-client';
 import { useAdminSocket } from '~/stores/socket-io';
 
 import CustomCopyToClipBoard from '../Common/CustomCopyToClipBoard';
@@ -26,7 +24,6 @@ const G2GDataTransfer = (): JSX.Element => {
   const [isExporting, setExporting] = useState(false);
   // TODO: データのエクスポートが完了したことが分かるようにする
   const [isExported, setExported] = useState(false);
-  const [transferKey, setTransferKey] = useState('');
 
   const fetchData = useCallback(async() => {
     const [{ data: collectionsData }, { data: statusData }] = await Promise.all([
@@ -70,11 +67,11 @@ const G2GDataTransfer = (): JSX.Element => {
     }
   }, [socket]);
 
-  const generateTransferKeyWithDebounce = useMemo(() => debounce(1000, async() => {
-    const response = await apiv3Post('/g2g-transfer/generate-key');
-    const { transferKey } = response.data;
-    setTransferKey(transferKey);
-  }), []);
+  const { transferKey, generateTransferKeyWithThrottle } = useGenerateTransferKeyWithThrottle();
+
+  const onClickHandler = useCallback(() => {
+    generateTransferKeyWithThrottle();
+  }, [generateTransferKeyWithThrottle]);
 
   const transferData = () => {
     // データ移行の処理
@@ -111,7 +108,7 @@ const G2GDataTransfer = (): JSX.Element => {
 
       <div className="form-group row mt-4">
         <div className="col-md-3">
-          <button type="button" className="btn btn-primary w-100" onClick={generateTransferKeyWithDebounce}>
+          <button type="button" className="btn btn-primary w-100" onClick={onClickHandler}>
             {t('g2g_data_transfer.publish_transfer_key')}
           </button>
         </div>
@@ -134,6 +131,7 @@ const G2GDataTransfer = (): JSX.Element => {
         onExportingRequested={exportingRequestedHandler}
         onClose={() => setExportModalOpen(false)}
         collections={collections}
+        allChecked={true}
       />
     </div>
   );

packages/app/src/components/DataTransferForm.tsx

@@ -1,23 +1,20 @@
-import React, { useState, useMemo } from 'react';
+import React, { useCallback } from 'react';
 
 
 import { useTranslation } from 'react-i18next';
-import { debounce } from 'throttle-debounce';
 
-import { apiv3Post } from '~/client/util/apiv3-client';
+import { useGenerateTransferKeyWithThrottle } from '~/client/services/g2g-transfer';
 
 import CustomCopyToClipBoard from './Common/CustomCopyToClipBoard';
 
 const DataTransferForm = (): JSX.Element => {
   const { t } = useTranslation();
 
-  const [transferKey, setTransferKey] = useState('');
+  const { transferKey, generateTransferKeyWithThrottle } = useGenerateTransferKeyWithThrottle();
 
-  const generateTransferKeyWithDebounce = useMemo(() => debounce(1000, async() => {
-    const response = await apiv3Post('/g2g-transfer/generate-key');
-    const { transferKey } = response.data;
-    setTransferKey(transferKey);
-  }), []);
+  const onClickHandler = useCallback(() => {
+    generateTransferKeyWithThrottle();
+  }, [generateTransferKeyWithThrottle]);
 
   return (
     <div data-testid="installerForm" className="p-3">
@@ -27,7 +24,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={generateTransferKeyWithDebounce}>
+          <button type="button" className="btn btn-primary w-100" onClick={onClickHandler}>
             {t('g2g_data_transfer.publish_transfer_key')}
           </button>
         </div>