switch form

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

@@ -1,116 +1,67 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
-// import loggerFactory from '@alias/logger';
 
-import {
-  TabContent, TabPane, Nav, NavItem, NavLink,
-} from 'reactstrap';
 import { withUnstatedContainers } from '../../UnstatedUtils';
 
 import AppContainer from '../../../services/AppContainer';
 import AdminAppContainer from '../../../services/AdminAppContainer';
+
 import AwsSetting from './AwsSetting';
 import GcpSettings from './GcpSettings';
 
-// const logger = loggerFactory('growi:FileUploadSetting');
-
-class FileUploadSetting extends React.Component {
-
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      activeTab: 'aws-setting',
-      // Prevent unnecessary rendering
-      activeComponents: new Set(['aws-setting']),
-    };
-
-  }
-
-  toggleActiveTab(activeTab) {
-    this.setState({
-      activeTab, activeComponents: this.state.activeComponents.add(activeTab),
-    });
-  }
-
-  render() {
-    const { t, adminAppContainer } = this.props;
-    const { activeTab, activeComponents } = this.state;
-    const fileUploadTypes = ['aws', 'gcp'];
-
-    return (
-      <React.Fragment>
-        <p className="card well my-3">
-          {t('admin:app_setting.file_upload')}
-          <br />
-          <br />
-          <span className="text-danger">
-            <i className="ti-unlink"></i>
-            {t('admin:app_setting.change_setting')}
-          </span>
-        </p>
-
-        <div className="row form-group mb-5">
-          <label className="text-left text-md-right col-md-3 col-form-label">
-            {t('admin:app_setting.file_upload_method')}
-          </label>
-
-          <div className="col-md-6 py-2">
-            {fileUploadTypes.map((type) => {
+function FileUploadSetting(props) {
+
+  const { t, adminAppContainer } = props;
+  const { fileUploadType } = adminAppContainer.state;
+  const fileUploadTypes = ['aws', 'gcp'];
+
+  return (
+    <React.Fragment>
+      <p className="card well my-3">
+        {t('admin:app_setting.file_upload')}
+        <br />
+        <br />
+        <span className="text-danger">
+          <i className="ti-unlink"></i>
+          {t('admin:app_setting.change_setting')}
+        </span>
+      </p>
+
+      <div className="row form-group mb-5">
+        <label className="text-left text-md-right col-md-3 col-form-label">
+          {t('admin:app_setting.file_upload_method')}
+        </label>
+
+        <div className="col-md-6 py-2">
+          {fileUploadTypes.map((type) => {
               return (
                 <div key={type} className="custom-control custom-radio custom-control-inline">
                   <input
                     type="radio"
                     className="custom-control-input"
-                    name="transmission-method"
-                    id={`file-upload-nethod-radio-${type}`}
+                    name="file-upload-type"
+                    id={`file-upload-type-radio-${type}`}
                     checked={adminAppContainer.state.fileUploadType === type}
                     onChange={(e) => {
-                      adminAppContainer.changeFileUploadType(type);
+                    adminAppContainer.changeFileUploadType(type);
                   }}
                   />
-                  <label className="custom-control-label" htmlFor={`transmission-nethod-radio-${type}`}>{t(`admin:app_setting.${type}_label`)}</label>
+                  <label className="custom-control-label" htmlFor={`file-upload-type-radio-${type}`}>{t(`admin:app_setting.${type}_label`)}</label>
                 </div>
               );
             })}
-          </div>
         </div>
+      </div>
 
-        <Nav tabs>
-          <NavItem>
-            <NavLink
-              className={`${activeTab === 'aws-setting' && 'active'} `}
-              onClick={() => { this.toggleActiveTab('aws-setting') }}
-              href="#smtp-setting"
-            >
-              {t('admin:app_setting.aws_settings')}
-            </NavLink>
-          </NavItem>
-          <NavItem>
-            <NavLink
-              className={`${activeTab === 'gcp-setting' && 'active'} `}
-              onClick={() => { this.toggleActiveTab('gcp-setting') }}
-              href="#ses-setting"
-            >
-              {t('admin:app_setting.gcp_settings')}
-            </NavLink>
-          </NavItem>
-        </Nav>
-        <TabContent activeTab={activeTab} className="pt-3">
-          <TabPane tabId="aws-setting">
-            {activeComponents.has('aws-setting') && <AwsSetting />}
-          </TabPane>
-          <TabPane tabId="gcp-setting">
-            {activeComponents.has('gcp-setting') && <GcpSettings />}
-          </TabPane>
-        </TabContent>
-      </React.Fragment>
-    );
-  }
+      {fileUploadType === 'aws' && <AwsSetting />}
+      {fileUploadType === 'gcp' && <GcpSettings />}
 
+    </React.Fragment>
+  );
 }
 
+
 /**
  * Wrapper component for using unstated
  */

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

@@ -70,13 +70,13 @@ function MailSetting(props) {
                     type="radio"
                     className="custom-control-input"
                     name="transmission-method"
-                    id={`transmission-nethod-radio-${method}`}
+                    id={`transmission-method-radio-${method}`}
                     checked={adminAppContainer.state.transmissionMethod === method}
                     onChange={(e) => {
                     adminAppContainer.changeTransmissionMethod(method);
                   }}
                   />
-                  <label className="custom-control-label" htmlFor={`transmission-nethod-radio-${method}`}>{t(`admin:app_setting.${method}_label`)}</label>
+                  <label className="custom-control-label" htmlFor={`transmission-method-radio-${method}`}>{t(`admin:app_setting.${method}_label`)}</label>
                 </div>
               );
             })}

src/client/js/services/AdminAppContainer.js

@@ -35,6 +35,8 @@ export default class AdminAppContainer extends Container {
       sesAccessKeyId: '',
       sesSecretAccessKey: '',
 
+      fileUploadType: 'aws',
+
       gcsApiKeyJsonPath: '',
       envGcsApiKeyJsonPath: '',
       gcsBucket: '',
@@ -185,6 +187,13 @@ export default class AdminAppContainer extends Container {
     this.setState({ sesSecretAccessKey });
   }
 
+  /**
+   * Change fileUploadType
+   */
+  changeFileUploadType(fileUploadType) {
+    this.setState({ fileUploadType });
+  }
+
   /**
    * Change region
    */