Send socket message & Added loading indicator

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

@@ -27,9 +27,8 @@ const G2GDataTransfer = (): JSX.Element => {
   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 [isTransferring, setTransferring] = useState(false);
+  const [statusMessage, setStatusMessage] = useState('');
 
   const updateSelectedCollections = (newSelectedCollections: Set<string>) => {
     setSelectedCollections(newSelectedCollections);
@@ -56,35 +55,25 @@ const G2GDataTransfer = (): JSX.Element => {
 
     setCollections(filteredCollections);
     setSelectedCollections(new Set(filteredCollections));
-    setExporting(statusData.status.isExporting);
   }, []);
 
   const setupWebsocketEventHandler = useCallback(() => {
     if (socket != null) {
-      // websocket event
-      socket.on('admin:onProgressForExport', ({ currentCount, totalCount, progressList }) => {
-        setExporting(true);
+      socket.on('admin:onStartTransferMongoData', () => {
+        setTransferring(true);
+        setStatusMessage(t('Transferring DB data ...'));
       });
 
-      // websocket event
-      socket.on('admin:onTerminateForExport', ({ addedZipFileStat }) => {
-
-        setExporting(false);
-        setExported(true);
-
-        // TODO: toastSuccess, toastError
-        toastr.success(undefined, `New Archive Data '${addedZipFileStat.fileName}' is added`, {
-          closeButton: true,
-          progressBar: true,
-          newestOnTop: false,
-          showDuration: '100',
-          hideDuration: '100',
-          timeOut: '1200',
-          extendedTimeOut: '150',
-        });
+      socket.on('admin:onStartTransferAttachments', () => {
+        setStatusMessage(t('Transferring attachment files ...'));
+      });
+
+      socket.on('admin:onFinishTransfer', () => {
+        setTransferring(false);
+        setStatusMessage(t('Successfully transferred GROWI. Now you can use new GROWI !'));
       });
     }
-  }, [socket]);
+  }, [socket, t]);
 
   const { transferKey, generateTransferKeyWithThrottle } = useGenerateTransferKeyWithThrottle();
 
@@ -150,6 +139,14 @@ const G2GDataTransfer = (): JSX.Element => {
         </div>
       </form>
 
+
+      {statusMessage != null && <p>{statusMessage}</p>}
+      {isTransferring && (
+        <div className="text-muted text-center">
+          <i className="fa fa-2x fa-spinner fa-pulse mr-1"></i>
+        </div>
+      )}
+
       <h2 className="border-bottom mt-5">{t('admin:g2g_data_transfer.transfer_data_to_this_growi')}</h2>
 
       <div className="form-group row mt-4">

packages/app/src/server/service/g2g-transfer.ts

@@ -217,7 +217,12 @@ export class G2GTransferPusherService implements Pusher {
     }
   }
 
-  public async startTransfer(tk: TransferKey, user: any, toGROWIInfo: IDataGROWIInfo, collections: string[], optionsMap: any): Promise<void> {
+  // eslint-disable-next-line max-len
+  public async startTransfer(tk: TransferKey, user: any, toGROWIInfo: IDataGROWIInfo, collections: string[], optionsMap: any, shouldEmit = true): Promise<void> {
+    const socket = this.crowi.socketIoService.getDefaultSocket();
+
+    if (shouldEmit) socket.emit('admin:onStartTransferMongoData', {});
+
     if (toGROWIInfo.attachmentInfo.type === 'none') {
       try {
         const targetConfigKeys = [
@@ -284,6 +289,8 @@ export class G2GTransferPusherService implements Pusher {
       throw errs;
     }
 
+    if (shouldEmit) socket.emit('admin:onStartTransferAttachments', {});
+
     try {
       await this.transferAttachments(tk);
     }
@@ -292,6 +299,8 @@ export class G2GTransferPusherService implements Pusher {
       throw err;
     }
 
+    if (shouldEmit) socket.emit('admin:onFinishTransfer', {});
+
     return;
   }