fix importer form

apps/app/src/client/components/Admin/ImportData/ImportDataPageContents.jsx

@@ -16,8 +16,8 @@ import GrowiArchiveSection from './GrowiArchiveSection';
 const logger = loggerFactory('growi:importer');
 
 const ImportDataPageContents = ({ t, adminImportContainer }) => {
-  const { register: registerEsa, reset: resetEsa } = useForm();
-  const { register: registerQiita, reset: resetQiita } = useForm();
+  const { register: registerEsa, reset: resetEsa, handleSubmit: handleSubmitEsa } = useForm();
+  const { register: registerQiita, reset: resetQiita, handleSubmit: handleSubmitQiita } = useForm();
 
   useEffect(() => {
     resetEsa({
@@ -41,6 +41,7 @@ const ImportDataPageContents = ({ t, adminImportContainer }) => {
         className="mt-5"
         id="importerSettingFormEsa"
         role="form"
+        onSubmit={handleSubmitEsa(adminImportContainer.esaHandleSubmitUpdate)}
       >
         <fieldset>
           <h2 className="admin-setting-header">{t('importer_management.import_from', { from: 'esa.io' })}</h2>
@@ -118,7 +119,7 @@ const ImportDataPageContents = ({ t, adminImportContainer }) => {
                 onClick={adminImportContainer.esaHandleSubmit}
                 value={t('importer_management.import')}
               />
-              <input type="button" className="btn btn-secondary" onClick={adminImportContainer.esaHandleSubmitUpdate} value={t('Update')} />
+              <input type="submit" className="btn btn-secondary" value={t('Update')} />
               <span className="offset-0 offset-sm-1">
                 <input
                   id="importFromEsa"
@@ -129,7 +130,6 @@ const ImportDataPageContents = ({ t, adminImportContainer }) => {
                   value={t('importer_management.esa_settings.test_connection')}
                 />
               </span>
-
             </div>
           </div>
         </fieldset>
@@ -139,6 +139,7 @@ const ImportDataPageContents = ({ t, adminImportContainer }) => {
         className="mt-5"
         id="importerSettingFormQiita"
         role="form"
+        onSubmit={handleSubmitQiita(adminImportContainer.qiitaHandleSubmitUpdate)}
       >
         <fieldset>
           <h2 className="admin-setting-header">{t('importer_management.import_from', { from: 'Qiita:Team' })}</h2>
@@ -219,7 +220,7 @@ const ImportDataPageContents = ({ t, adminImportContainer }) => {
                 onClick={adminImportContainer.qiitaHandleSubmit}
                 value={t('importer_management.import')}
               />
-              <input type="button" className="btn btn-secondary" onClick={adminImportContainer.qiitaHandleSubmitUpdate} value={t('Update')} />
+              <input type="submit" className="btn btn-secondary" value={t('Update')} />
               <span className="offset-0 offset-sm-1">
                 <input
                   name="Qiita"

apps/app/src/client/services/AdminImportContainer.js

@@ -73,11 +73,7 @@ export default class AdminImportContainer extends Container {
 
   async esaHandleSubmit() {
     try {
-      const params = {
-        'importer:esa:team_name': this.state.esaTeamName,
-        'importer:esa:access_token': this.state.esaAccessToken,
-      };
-      await apiPost('/admin/import/esa', params);
+      await apiPost('/admin/import/esa');
       toastSuccess('Import posts from esa success.');
     }
     catch (err) {
@@ -88,11 +84,7 @@ export default class AdminImportContainer extends Container {
 
   async esaHandleSubmitTest() {
     try {
-      const params = {
-        'importer:esa:team_name': this.state.esaTeamName,
-        'importer:esa:access_token': this.state.esaAccessToken,
-      };
-      await apiPost('/admin/import/testEsaAPI', params);
+      await apiPost('/admin/import/testEsaAPI');
       toastSuccess('Test connection to esa success.');
     }
     catch (error) {
@@ -100,10 +92,10 @@ export default class AdminImportContainer extends Container {
     }
   }
 
-  async esaHandleSubmitUpdate() {
+  async esaHandleSubmitUpdate(formData) {
     const params = {
-      'importer:esa:team_name': this.state.esaTeamName,
-      'importer:esa:access_token': this.state.esaAccessToken,
+      'importer:esa:team_name': formData.esaTeamName,
+      'importer:esa:access_token': formData.esaAccessToken,
     };
     try {
       await apiPost('/admin/settings/importerEsa', params);
@@ -117,11 +109,7 @@ export default class AdminImportContainer extends Container {
 
   async qiitaHandleSubmit() {
     try {
-      const params = {
-        'importer:qiita:team_name': this.state.qiitaTeamName,
-        'importer:qiita:access_token': this.state.qiitaAccessToken,
-      };
-      await apiPost('/admin/import/qiita', params);
+      await apiPost('/admin/import/qiita');
       toastSuccess('Import posts from qiita:team success.');
     }
     catch (err) {
@@ -133,11 +121,7 @@ export default class AdminImportContainer extends Container {
 
   async qiitaHandleSubmitTest() {
     try {
-      const params = {
-        'importer:qiita:team_name': this.state.qiitaTeamName,
-        'importer:qiita:access_token': this.state.qiitaAccessToken,
-      };
-      await apiPost('/admin/import/testQiitaAPI', params);
+      await apiPost('/admin/import/testQiitaAPI');
       toastSuccess('Test connection to qiita:team success.');
     }
     catch (err) {
@@ -146,10 +130,10 @@ export default class AdminImportContainer extends Container {
     }
   }
 
-  async qiitaHandleSubmitUpdate() {
+  async qiitaHandleSubmitUpdate(formData) {
     const params = {
-      'importer:qiita:team_name': this.state.qiitaTeamName,
-      'importer:qiita:access_token': this.state.qiitaAccessToken,
+      'importer:qiita:team_name': formData.qiitaTeamName,
+      'importer:qiita:access_token': formData.qiitaAccessToken,
     };
     try {
       await apiPost('/admin/settings/importerQiita', params);