get selectedCollections and optionsMap on G2GDataTransfer

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

@@ -20,13 +20,28 @@ const G2GDataTransfer = (): JSX.Element => {
   const { data: socket } = useAdminSocket();
   const { t } = useTranslation();
 
-  const [collections, setCollections] = useState<any[]>([]);
+  const [startTransferKey, setStartTransferKey] = useState('');
+  const [collections, setCollections] = useState<string[]>([]);
+  const [selectedCollections, setSelectedCollections] = useState<Set<string>>(new Set());
+  const [optionsMap, setOptionsMap] = useState<any>({});
   const [isShowExportForm, setShowExportForm] = useState(false);
   const [isExporting, setExporting] = useState(false);
   // TODO: データのエクスポートが完了したことが分かるようにする
   const [isExported, setExported] = useState(false);
 
-  const fetchData = useCallback(async() => {
+  const updateSelectedCollections = (newSelectedCollections: Set<string>) => {
+    setSelectedCollections(newSelectedCollections);
+  };
+
+  const updateOptionsMap = (newOptionsMap: any) => {
+    setOptionsMap(newOptionsMap);
+  };
+
+  const onChangeTransferKeyHandler = useCallback((e) => {
+    setStartTransferKey(e.target.value);
+  }, []);
+
+  const setCollectionsAndSelectedCollections = useCallback(async() => {
     const [{ data: collectionsData }, { data: statusData }] = await Promise.all([
       apiv3Get<{collections: any[]}>('/mongo/collections', {}),
       apiv3Get<{status: { zipFileStats: any[], isExporting: boolean, progressList: any[] }}>('/export/status', {}),
@@ -38,6 +53,7 @@ const G2GDataTransfer = (): JSX.Element => {
     });
 
     setCollections(filteredCollections);
+    setSelectedCollections(new Set(filteredCollections));
     setExporting(statusData.status.isExporting);
   }, []);
 
@@ -74,15 +90,19 @@ const G2GDataTransfer = (): JSX.Element => {
     generateTransferKeyWithThrottle();
   }, [generateTransferKeyWithThrottle]);
 
-  const transferData = () => {
-    // データ移行の処理
+  const startTransfer = (e) => {
+    e.preventDefault();
+
+    // console.log(startTransferKey);
+    // console.log(selectedCollections);
+    // console.log(optionsMap);
   };
 
   useEffect(() => {
-    fetchData();
+    setCollectionsAndSelectedCollections();
 
     setupWebsocketEventHandler();
-  }, [fetchData, setupWebsocketEventHandler]);
+  }, [setCollectionsAndSelectedCollections, setupWebsocketEventHandler]);
 
   return (
     <div data-testid="admin-export-archive-data">
@@ -94,14 +114,26 @@ const G2GDataTransfer = (): JSX.Element => {
 
       {collections.length !== 0 && (
         <div className={isShowExportForm ? '' : 'd-none'}>
-          <G2GDataTransferExportForm allCollectionNames={collections} />
+          <G2GDataTransferExportForm
+            allCollectionNames={collections}
+            selectedCollections={selectedCollections}
+            updateSelectedCollections={updateSelectedCollections}
+            optionsMap={optionsMap}
+            updateOptionsMap={updateOptionsMap}
+          />
         </div>
       )}
 
-      <form onSubmit={transferData}>
+      <form onSubmit={startTransfer}>
         <div className="form-group row mt-3">
           <div className="col-9">
-            <input className="form-control" type="text" placeholder={t('admin:g2g_data_transfer.paste_transfer_key')} />
+            <input
+              className="form-control"
+              type="text"
+              placeholder={t('admin:g2g_data_transfer.paste_transfer_key')}
+              onChange={onChangeTransferKeyHandler}
+              required
+            />
           </div>
           <div className="col-3">
             <button type="submit" className="btn btn-primary w-100">{t('admin:g2g_data_transfer.start_transfer')}</button>

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

@@ -28,16 +28,20 @@ const IMPORT_OPTION_CLASS_MAPPING = {
 
 type Props = {
   allCollectionNames: string[],
+  selectedCollections: Set<string>,
+  updateSelectedCollections: (newSelectedCollections: Set<string>) => void,
+  optionsMap: any,
+  updateOptionsMap: (newOptionsMap: any) => void,
 };
 
 const G2GDataTransferExportForm = (props: Props): JSX.Element => {
   // const { data: socket } = useAdminSocket();
   const { t } = useTranslation('admin');
 
-  const { allCollectionNames } = props;
+  const {
+    allCollectionNames, selectedCollections, updateSelectedCollections, optionsMap, updateOptionsMap,
+  } = props;
 
-  const [selectedCollections, setSelectedCollections] = useState<Set<string>>(new Set(allCollectionNames));
-  const [optionsMap, setOptionsMap] = useState<any>({});
   // const [isImporting, setImporting] = useState(false);
   // const [isImported, setImported] = useState(false);
   // const [progressMap, setProgressMap] = useState<any>({});
@@ -46,12 +50,12 @@ const G2GDataTransferExportForm = (props: Props): JSX.Element => {
   const [collectionNameForConfiguration, setCollectionNameForConfiguration] = useState<any>();
 
   const checkAll = useCallback(() => {
-    setSelectedCollections(new Set(allCollectionNames));
-  }, [allCollectionNames]);
+    updateSelectedCollections(new Set(allCollectionNames));
+  }, [allCollectionNames, updateSelectedCollections]);
 
   const uncheckAll = useCallback(() => {
-    setSelectedCollections(new Set());
-  }, []);
+    updateSelectedCollections(new Set());
+  }, [updateSelectedCollections]);
 
   const updateOption = (collectionName, data) => {
     const options = optionsMap[collectionName];
@@ -61,7 +65,7 @@ const G2GDataTransferExportForm = (props: Props): JSX.Element => {
 
     const updatedOptionsMap = {};
     updatedOptionsMap[collectionName] = options;
-    setOptionsMap((prev) => {
+    updateOptionsMap((prev) => {
       return { ...prev, updatedOptionsMap };
     });
   };
@@ -76,7 +80,7 @@ const G2GDataTransferExportForm = (props: Props): JSX.Element => {
         collections.delete(collectionName);
       }
 
-      setSelectedCollections(collections);
+      updateSelectedCollections(collections);
 
       // TODO: validation
       // this.validate();
@@ -196,7 +200,7 @@ const G2GDataTransferExportForm = (props: Props): JSX.Element => {
       const ImportOption = IMPORT_OPTION_CLASS_MAPPING[collectionName] || GrowiArchiveImportOption;
       initialOptionsMap[collectionName] = new ImportOption(initialMode);
     });
-    setOptionsMap(initialOptionsMap);
+    updateOptionsMap(initialOptionsMap);
   };
 
   // TODO: use Socket