weseek__growi/src/client/js/components/Admin/App/AppSetting.jsx

import React from 'react';
import PropTypes from 'prop-types';
import { withTranslation } from 'react-i18next';
import loggerFactory from '@alias/logger';

import { createSubscribedElement } from '../../UnstatedUtils';
import { toastSuccess, toastError } from '../../../util/apiNotification';

import AppContainer from '../../../services/AppContainer';
import AdminAppContainer from '../../../services/AdminAppContainer';

const logger = loggerFactory('growi:appSettings');

class AppSetting extends React.Component {

  constructor(props) {
    super(props);

    const { adminAppContainer } = this.props;

    this.state = {
      title: adminAppContainer.state.title,
      confidential: adminAppContainer.state.confidential,
      globalLang: adminAppContainer.state.globalLang,
      fileUpload: adminAppContainer.state.fileUpload,
    };

    this.submitHandler = this.submitHandler.bind(this);
    this.inputTitleChangeHandler = this.inputTitleChangeHandler.bind(this);
    this.inputConfidentialChangeHandler = this.inputConfidentialChangeHandler.bind(this);
    this.inputGlobalLangChangeHandler = this.inputGlobalLangChangeHandler.bind(this);
    this.inputFileUploadChangeHandler = this.inputFileUploadChangeHandler.bind(this);
  }

  async submitHandler() {
    const { t } = this.props;

    const params = {
      title: this.state.title,
      confidential: this.state.confidential,
      globalLang: this.state.globalLang,
      fileUpload: this.state.fileUpload,
    };

    try {
      await this.props.appContainer.apiv3.put('/app-settings/app-setting', params);
      toastSuccess(t('Updated app setting'));
    }
    catch (err) {
      toastError(err);
      logger.error(err);
    }
  }

  inputTitleChangeHandler(event) {
    this.setState({ title: event.target.value });
  }

  inputConfidentialChangeHandler(event) {
    this.setState({ confidential: event.target.value });
  }

  inputGlobalLangChangeHandler(event) {
    this.setState({ globalLang: event.target.value });
  }

  inputFileUploadChangeHandler(event) {
    this.setState({ fileUpload: event.target.checked });
  }

  render() {
    const { t } = this.props;

    return (
      <React.Fragment>
        <div className="row">
          <div className="col-md-12">
            <div className="form-group">
              <label className="col-xs-3 control-label">{t('app_setting.Site Name')}</label>
              <div className="col-xs-6">
                <input
                  className="form-control"
                  id="settingForm[app:title]"
                  type="text"
                  name="title"
                  value={this.state.title}
                  onChange={this.inputTitleChangeHandler}
                  placeholder="GROWI"
                />
                <p className="help-block">{t('app_setting.sitename_change')}</p>
              </div>
            </div>
          </div>
        </div>

        <div className="row">
          <div className="col-md-12">
            <div className="form-group">
              <label className="col-xs-3 control-label">{t('app_setting.Confidential name')}</label>
              <div className="col-xs-6">
                <input
                  className="form-control"
                  id="settingForm[app:confidential]"
                  type="text"
                  name="confidential"
                  value={this.state.confidential}
                  onChange={this.inputConfidentialChangeHandler}
                  placeholder={t('app_setting.ex) internal use only')}
                />
                <p className="help-block">{t('app_setting.header_content')}</p>
              </div>
            </div>
          </div>
        </div>

        <div className="form-group">
          <label className="col-xs-3 control-label">{t('app_setting.Default Language for new users')}</label>
          <div className="col-xs-6">
            <div className="radio radio-primary radio-inline">
              <input
                type="radio"
                id="radioLangEn"
                name="globalLang"
                value="en-US"
                checked={this.state.globalLang === 'en-US'}
                onClick={this.inputGlobalLangChangeHandler}
              />
              <label htmlFor="radioLangEn">{t('English')}</label>
            </div>
            <div className="radio radio-primary radio-inline">
              <input
                type="radio"
                id="radioLangJa"
                name="globalLang"
                value="ja"
                checked={this.state.globalLang === 'ja'}
                onClick={this.inputGlobalLangChangeHandler}
              />
              <label htmlFor="radioLangJa">{t('Japanese')}</label>
            </div>
          </div>
        </div>

        <div className="row">
          <div className="col-md-12">
            <div className="form-group">
              <label className="col-xs-3 control-label">{t('app_setting.File Uploading')}</label>
              <div className="col-xs-6">
                <div className="checkbox checkbox-info">
                  <input type="checkbox" id="cbFileUpload" name="fileUpload" checked={this.state.fileUpload} onChange={this.inputFileUploadChangeHandler} />
                  <label htmlFor="cbFileUpload">{t('app_setting.enable_files_except_image')}</label>
                </div>

                <p className="help-block">
                  {t('app_setting.enable_files_except_image')}
                  <br />
                  {t('app_setting.attach_enable')}
                </p>
              </div>
            </div>
          </div>
        </div>

        <div className="row">
          <div className="col-md-12">
            <div className="form-group">
              <div className="col-xs-offset-3 col-xs-6">
                <button type="submit" className="btn btn-primary" onClick={this.submitHandler}>
                  {t('app_setting.Update')}
                </button>
              </div>
            </div>
          </div>
        </div>
      </React.Fragment>
    );
  }

}

/**
 * Wrapper component for using unstated
 */
const AppSettingWrapper = (props) => {
  return createSubscribedElement(AppSetting, props, [AppContainer, AdminAppContainer]);
};

AppSetting.propTypes = {
  t: PropTypes.func.isRequired, // i18next
  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
  adminAppContainer: PropTypes.instanceOf(AdminAppContainer).isRequired,
};

export default withTranslation()(AppSettingWrapper);