strapi-plugin-ctrip-apollo/admin/src/containers/ConfigPage/index.js

This is the plugin using for ctrip apollo to manager strapi application configuration.

/**
 *
 * ConfigPage
 * 配置页面默认不可以从插件列表中点击设置按钮访问
 * 可以修改 admin组件
 * /strapi-admin/admin/src/components/Row/index.js -> admin/src/components/Row/index.js
 * 并修改 PLUGINS_WITH_CONFIG 增加当前组件名称
 *
 */

import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { bindActionCreators, compose } from 'redux';
import { findIndex, get, isEmpty } from 'lodash';
import { Header } from '@buffetjs/custom';

import { ContainerFluid, HeaderNav, GlobalContext } from 'strapi-helper-plugin';

import pluginId from '../../pluginId';

// Plugin's components
import EditForm from '../../components/EditForm';

import { getSettings, onCancel, onChange, setErrors, submit } from './actions';

import reducer from './reducer';
import saga from './saga';
import selectConfigPage from './selectors';

class ConfigPage extends React.Component {
  pluginHeaderActions = [
    {
      color: 'cancel',
      label: this.context.formatMessage({ id: 'app.components.Button.cancel' }),
      onClick: this.props.onCancel,
      type: 'button',
      key: 'button-cancel',
    },
    {
      color: 'success',
      label: this.context.formatMessage({ id: 'app.components.Button.save' }),
      onClick: this.handleSubmit,
      type: 'submit',
      key: 'button-submit',
    },
  ];

  componentDidMount() {
    this.getSettings(this.props);
  }

  componentDidUpdate(prevProps) {
    // Get new settings on navigation change
    if (prevProps.match.params.env !== this.props.match.params.env) {
      this.getSettings(this.props);
    }

    // Redirect the user to the email list after modifying is provider
    if (prevProps.submitSuccess !== this.props.submitSuccess) {
      this.props.history.push(
        `/plugins/${pluginId}/configurations/${this.props.match.params.env}`
      );
    }
  }

  /**
   * Get Settings depending on the props
   * @param  {Object} props
   * @return {Func}       calls the saga that gets the current settings
   */
  getSettings = props => {
    const {
      match: {
        params: { env },
      },
    } = props;
    this.props.getSettings(env);
  };

  generateLinks = () => {
    const headerNavLinks = this.props.appEnvironments
      .reduce((acc, current) => {
        const link = Object.assign(current, {
          to: `/plugins/${pluginId}/configurations/${current.name}`,
        });
        acc.push(link);

        return acc;
      }, [])
      .sort(link => link.name === 'production');

    return headerNavLinks;
  };

  handleSubmit = e => {
    e.preventDefault();
    const formErrors = Object.keys(
      get(
        this.props.settings,
        ['config'],
        {}
      )
    ).reduce((acc, current) => {
      if (isEmpty(get(this.props.modifiedData, current, ''))) {
        acc.push({
          name: current,
          errors: [{ id: 'components.Input.error.validation.required' }],
        });
      }

      return acc;
    }, []);

    if (!isEmpty(formErrors)) {
      return this.props.setErrors(formErrors);
    }

    return this.props.submit();
  };

  static contextType = GlobalContext;

  render() {
    const { formatMessage } = this.context;

    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <ContainerFluid>
            <Header
              actions={this.pluginHeaderActions}
              content={formatMessage({
                id: 'ctrip-apollo.ConfigPage.description',
              })}
              title={{ label: formatMessage({ id: 'ctrip-apollo.ConfigPage.title' }) }}
            />
            <HeaderNav
              links={this.generateLinks()}
              style={{ marginTop: '4.6rem' }}
            />
            <EditForm
              didCheckErrors={this.props.didCheckErrors}
              formErrors={this.props.formErrors}
              modifiedData={this.props.modifiedData}
              onChange={this.props.onChange}
              settings={this.props.settings}
            />
          </ContainerFluid>
        </form>
      </div>
    );
  }
}

ConfigPage.defaultProps = {
  appEnvironments: [],
  formErrors: [],
  settings: {
    config: [],
  },
};

ConfigPage.propTypes = {
  appEnvironments: PropTypes.array,
  didCheckErrors: PropTypes.bool.isRequired,
  formErrors: PropTypes.array,
  getSettings: PropTypes.func.isRequired,
  history: PropTypes.object.isRequired,
  match: PropTypes.object.isRequired,
  modifiedData: PropTypes.object.isRequired,
  onCancel: PropTypes.func.isRequired,
  onChange: PropTypes.func.isRequired,
  setErrors: PropTypes.func.isRequired,
  settings: PropTypes.object,
  submit: PropTypes.func.isRequired,
  submitSuccess: PropTypes.bool.isRequired,
};

function mapDispatchToProps(dispatch) {
  return bindActionCreators(
    {
      getSettings,
      onCancel,
      onChange,
      setErrors,
      submit,
    },
    dispatch
  );
}

const mapStateToProps = selectConfigPage();

const withConnect = connect(
  mapStateToProps,
  mapDispatchToProps
);

const withReducer = strapi.injectReducer({
  key: 'configPage',
  reducer,
  pluginId,
});
const withSaga = strapi.injectSaga({ key: 'configPage', saga, pluginId });

export default compose(
  withReducer,
  withSaga,
  withConnect
)(ConfigPage);