remove inner ref

src/client/js/components/Admin/App/MailSetting.jsx

@@ -27,6 +27,18 @@ function MailSetting(props) {
     }
   }
 
+  async function connectionTestHandler() {
+    const { t } = props;
+
+    try {
+      // TODO test function
+      toastSuccess(t('toaster.initialize_successed', { target: t('admin:app_setting.smtp_settings') }));
+    }
+    catch (err) {
+      toastError(err);
+    }
+  }
+
   return (
     <React.Fragment>
       <div className="row form-group mb-5">
@@ -76,21 +88,16 @@ function MailSetting(props) {
             { t('Update') }
           </button>
         </div>
-        {/* {adminAppContainer.state.transmissionMethod === 'smtp' &&
-        (
-          return (
         <div className="offset-1">
           <button
             type="button"
             className="btn btn-secondary"
-            onClick={openInitializeValueModal}
+            onClick={connectionTestHandler}
             disabled={adminAppContainer.state.retrieveError != null}
           >
-            {t('admin:app_setting.initialize_mail_settings')}
+            {t('admin:app_setting.test_connection')}
           </button>
         </div>
-        ))
-        } */}
       </div>
     </React.Fragment>
   );

src/client/js/components/Admin/App/SmtpSetting.jsx

@@ -1,61 +1,18 @@
 
-import React, { useState, useRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
-import loggerFactory from '@alias/logger';
 
-import {
-  Modal, ModalHeader, ModalBody,
-} from 'reactstrap';
 import { withUnstatedContainers } from '../../UnstatedUtils';
-import { toastSuccess, toastError } from '../../../util/apiNotification';
 import { withLoadingSppiner } from '../../SuspenseUtils';
 
 
 import AppContainer from '../../../services/AppContainer';
 import AdminAppContainer from '../../../services/AdminAppContainer';
 
-const logger = loggerFactory('growi:smtpSettings');
-
-
 function SmtpSetting(props) {
   const { adminAppContainer, t } = props;
 
-  const hostInput = useRef();
-  const portInput = useRef();
-  const userInput = useRef();
-  const passwordInput = useRef();
-
-  const [isInitializeValueModalOpen, setIsInitializeValueModalOpen] = useState(false);
-
-  // function openInitializeValueModal() {
-  //   setIsInitializeValueModalOpen(true);
-  // }
-
-  function closeInitializeValueModal() {
-    setIsInitializeValueModalOpen(false);
-  }
-
-  async function initialize() {
-    const { t, adminAppContainer } = props;
-
-    try {
-      const mailSettingParams = await adminAppContainer.initializeSmtpSettingHandler();
-      toastSuccess(t('toaster.initialize_successed', { target: t('admin:app_setting.smtp_settings') }));
-      // convert values to '' if value is null for overwriting values of inputs with refs
-      hostInput.current.value = mailSettingParams.smtpHost || '';
-      portInput.current.value = mailSettingParams.smtpPort || '';
-      userInput.current.value = mailSettingParams.smtpUser || '';
-      passwordInput.current.value = mailSettingParams.smtpPassword || '';
-      closeInitializeValueModal();
-    }
-    catch (err) {
-      toastError(err);
-      logger.error(err);
-    }
-  }
-
-
   return (
     <React.Fragment>
       <div id="mail-smtp" className="tab-pane active mt-5">
@@ -67,7 +24,6 @@ function SmtpSetting(props) {
             <input
               className="form-control"
               type="text"
-              ref={hostInput}
               defaultValue={adminAppContainer.state.smtpHost || ''}
               onChange={(e) => { adminAppContainer.changeSmtpHost(e.target.value) }}
             />
@@ -81,7 +37,6 @@ function SmtpSetting(props) {
           <div className="col-md-6">
             <input
               className="form-control"
-              ref={portInput}
               defaultValue={adminAppContainer.state.smtpPort || ''}
               onChange={(e) => { adminAppContainer.changeSmtpPort(e.target.value) }}
             />
@@ -96,7 +51,6 @@ function SmtpSetting(props) {
             <input
               className="form-control"
               type="text"
-              ref={userInput}
               defaultValue={adminAppContainer.state.smtpUser || ''}
               onChange={(e) => { adminAppContainer.changeSmtpUser(e.target.value) }}
             />
@@ -111,34 +65,12 @@ function SmtpSetting(props) {
             <input
               className="form-control"
               type="password"
-              ref={passwordInput}
               defaultValue={adminAppContainer.state.smtpPassword || ''}
               onChange={(e) => { adminAppContainer.changeSmtpPassword(e.target.value) }}
             />
           </div>
         </div>
       </div>
-
-
-      <Modal isOpen={isInitializeValueModalOpen} toggle={closeInitializeValueModal} className="initialize-mail-settings">
-        <ModalHeader tag="h4" toggle={closeInitializeValueModal} className="bg-danger text-light">
-          {t('admin:app_setting.initialize_mail_modal_header')}
-        </ModalHeader>
-        <ModalBody>
-          <div className="text-center mb-4">
-            {t('admin:app_setting.confirm_to_initialize_mail_settings')}
-          </div>
-          <div className="text-center my-2">
-            <button type="button" className="btn btn-outline-secondary mr-4" onClick={closeInitializeValueModal}>
-              {t('Cancel')}
-            </button>
-            <button type="button" className="btn btn-danger" onClick={initialize}>
-              {t('Reset')}
-            </button>
-          </div>
-        </ModalBody>
-      </Modal>
-
     </React.Fragment>
   );
 }