show G2GDataTransfer on nextjs

packages/app/src/components/Admin/Common/AdminNavigation.jsx

@@ -38,6 +38,7 @@ const AdminNavigation = (props) => {
         { t('full_text_search_management.full_text_search_management') }</>;
       // TODO: Consider where to place the "AuditLog"
       case 'audit-log':                return <><i className="icon-fw icon-feed"></i>            { t('audit_log_management.audit_log')}</>;
+      case 'data-transfer':            return <><i className="icon-fw icon-arrow-right"></i>     { t('Growi To Growi Data Transfer')}</>;
       case 'cloud':                    return <><i className="icon-fw icon-share-alt"></i>       { t('to_cloud_settings')} </>;
       default:                         return <><i className="icon-fw icon-home"></i>            { t('wiki_management_home_page') }</>;
       /* eslint-enable no-multi-spaces */
@@ -94,6 +95,7 @@ const AdminNavigation = (props) => {
         <MenuLink menu="user-groups"  isListGroupItems isActive={isActiveMenu('/user-groups')} />
         <MenuLink menu="search"       isListGroupItems isActive={isActiveMenu('/search')} />
         <MenuLink menu="audit-log"    isListGroupItems isActive={isActiveMenu('/audit-log')} />
+        <MenuLink menu="data-transfer" isListGroupItems isActive={isActiveMenu('/data-transfer')} />
         {/* {growiCloudUri != null && growiAppIdForGrowiCloud != null
           && (
             <a
@@ -142,6 +144,7 @@ const AdminNavigation = (props) => {
             {isActiveMenu('/user-groups') &&       <MenuLabel menu="user-groups" />}
             {isActiveMenu('/search') &&            <MenuLabel menu="search" />}
             {isActiveMenu('/audit-log') &&         <MenuLabel menu="audit-log" />}
+            {isActiveMenu('/data-transfer') &&     <MenuLabel menu="data-transfer" />}
             {/* eslint-enable no-multi-spaces */}
           </span>
         </button>

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

@@ -30,8 +30,6 @@ const ExportArchiveDataPage = (): JSX.Element => {
   const [isExported, setExported] = useState(false);
 
   const fetchData = useCallback(async() => {
-    // TODO:: use apiv3.get
-    // eslint-disable-next-line no-unused-vars
     const [{ data: collectionsData }, { data: statusData }] = await Promise.all([
       apiv3Get<{collections: any[]}>('/mongo/collections', {}),
       apiv3Get<{status: { zipFileStats: any[], isExporting: boolean, progressList: any[] }}>('/export/status', {}),

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

@@ -3,10 +3,8 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import * as toastr from 'toastr';
 
-import AdminSocketIoContainer from '~/client/services/AdminSocketIoContainer';
 import { apiv3Get } from '~/client/util/apiv3-client';
-
-import { withUnstatedContainers } from '../UnstatedUtils';
+import { useAdminSocket } from '~/stores/socket-io';
 
 import SelectCollectionsModal from './ExportArchiveData/SelectCollectionsModal';
 
@@ -14,15 +12,10 @@ const IGNORED_COLLECTION_NAMES = [
   'sessions', 'rlflx', 'activities',
 ];
 
-type Props = {
-  adminSocketIoContainer: AdminSocketIoContainer,
-};
-
-const G2GDataTransfer = (props: Props): JSX.Element => {
+const G2GDataTransfer = (): JSX.Element => {
+  const { data: socket } = useAdminSocket();
   const { t } = useTranslation();
 
-  const { adminSocketIoContainer } = props;
-
   const [collections, setCollections] = useState<any[]>([]);
   const [zipFileStats, setZipFileStats] = useState<any[]>([]);
   const [progressList, setProgressList] = useState<any[]>([]);
@@ -33,8 +26,6 @@ const G2GDataTransfer = (props: Props): JSX.Element => {
   const [transferKey, setTransferKey] = useState('');
 
   const fetchData = useCallback(async() => {
-    // TODO:: use apiv3.get
-    // eslint-disable-next-line no-unused-vars
     const [{ data: collectionsData }, { data: statusData }] = await Promise.all([
       apiv3Get<{collections: any[]}>('/mongo/collections', {}),
       apiv3Get<{status: { zipFileStats: any[], isExporting: boolean, progressList: any[] }}>('/export/status', {}),
@@ -54,39 +45,39 @@ const G2GDataTransfer = (props: Props): JSX.Element => {
   }, []);
 
   const setupWebsocketEventHandler = useCallback(() => {
-    const socket = adminSocketIoContainer.getSocket();
-
-    // websocket event
-    socket.on('admin:onProgressForExport', ({ currentCount, totalCount, progressList }) => {
-      setExporting(true);
-      setProgressList(progressList);
-    });
+    if (socket != null) {
+      // websocket event
+      socket.on('admin:onProgressForExport', ({ currentCount, totalCount, progressList }) => {
+        setExporting(true);
+        setProgressList(progressList);
+      });
 
-    // websocket event
-    socket.on('admin:onStartZippingForExport', () => {
-      setZipping(true);
-    });
+      // websocket event
+      socket.on('admin:onStartZippingForExport', () => {
+        setZipping(true);
+      });
 
-    // websocket event
-    socket.on('admin:onTerminateForExport', ({ addedZipFileStat }) => {
-
-      setExporting(false);
-      setZipping(false);
-      setExported(true);
-      setZipFileStats(prev => prev.concat([addedZipFileStat]));
-
-      // 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',
+      // websocket event
+      socket.on('admin:onTerminateForExport', ({ addedZipFileStat }) => {
+
+        setExporting(false);
+        setZipping(false);
+        setExported(true);
+        setZipFileStats(prev => prev.concat([addedZipFileStat]));
+
+        // 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',
+        });
       });
-    });
-  }, [adminSocketIoContainer]);
+    }
+  }, [socket]);
 
   const publishTransferKey = () => {
     // 移行キー発行の処理
@@ -149,9 +140,4 @@ const G2GDataTransfer = (props: Props): JSX.Element => {
   );
 };
 
-/**
- * Wrapper component for using unstated
- */
-const G2GDataTransferWrapper = withUnstatedContainers(G2GDataTransfer, [AdminSocketIoContainer]);
-
-export default G2GDataTransferWrapper;
+export default G2GDataTransfer;

packages/app/src/pages/admin/[[...path]].page.tsx

@@ -64,6 +64,7 @@ const AdminLayout = dynamic(() => import('../../components/Layout/AdminLayout'),
 // named export
 const UserGroupPage = dynamic(() => import('../../components/Admin/UserGroup/UserGroupPage').then(mod => mod.UserGroupPage), { ssr: false });
 const AuditLogManagement = dynamic(() => import('../../components/Admin/AuditLogManagement').then(mod => mod.AuditLogManagement), { ssr: false });
+const G2GDataTransfer = dynamic(() => import('../../components/Admin/G2GDataTransfer'), { ssr: false });
 
 const pluginUtils = new PluginUtils();
 
@@ -181,6 +182,10 @@ const AdminMarkdownSettingsPage: NextPage<Props> = (props: Props) => {
       title: t('audit_log_management.audit_log'),
       component: <AuditLogManagement />,
     },
+    'data-transfer': {
+      title: '別GROWIとのデータ移行',
+      component: <G2GDataTransfer />,
+    },
   };
 
   const getTargetPageToRender = (pagesMap, keys): {title: string, component: JSX.Element} => {