p5.js-web-editor/client/modules/User/pages/AdvancedSettingsView.jsx

75 lines
2.1 KiB
React
Raw Normal View History

2018-10-13 22:14:46 +02:00
import PropTypes from 'prop-types';
import React from 'react';
import { connect } from 'react-redux';
2018-10-13 22:14:46 +02:00
import { bindActionCreators } from 'redux';
import { browserHistory } from 'react-router';
import InlineSVG from 'react-inlinesvg';
import { Helmet } from 'react-helmet';
import { addApiKey, removeApiKey } from '../actions';
2018-10-13 22:14:46 +02:00
import APIKeyForm from '../components/APIKeyForm';
const exitUrl = require('../../../images/exit.svg');
const logoUrl = require('../../../images/p5js-logo.svg');
class AdvancedSettingsView extends React.Component {
2018-10-13 22:14:46 +02:00
constructor(props) {
super(props);
this.closeAccountPage = this.closeAccountPage.bind(this);
this.gotoHomePage = this.gotoHomePage.bind(this);
}
componentDidMount() {
document.body.className = this.props.theme;
}
closeAccountPage() {
browserHistory.goBack();
}
gotoHomePage() {
browserHistory.push('/');
}
render() {
return (
<div className="form-container">
<Helmet>
<title>p5.js Web Editor | Advanced Settings</title>
</Helmet>
<div className="form-container__header">
<button className="form-container__logo-button" onClick={this.gotoHomePage}>
<InlineSVG src={logoUrl} alt="p5js Logo" />
</button>
<button className="form-container__exit-button" onClick={this.closeAccountPage}>
<InlineSVG src={exitUrl} alt="Close Account Page" />
</button>
</div>
<div className="form-container__content">
<h2 className="form-container__title">Advanced Settings</h2>
<APIKeyForm {...this.props} />
2018-10-13 22:14:46 +02:00
</div>
</div>
);
}
}
function mapStateToProps(state) {
return {
initialValues: state.user, // <- initialValues for reduxForm
user: state.user,
apiKeys: state.user.apiKeys,
2018-10-13 22:14:46 +02:00
previousPath: state.ide.previousPath,
theme: state.preferences.theme
};
}
function mapDispatchToProps(dispatch) {
return bindActionCreators({ addApiKey, removeApiKey }, dispatch);
2018-10-13 22:14:46 +02:00
}
AdvancedSettingsView.propTypes = {
2018-10-13 22:14:46 +02:00
theme: PropTypes.string.isRequired
};
export default connect(mapStateToProps, mapDispatchToProps)(AdvancedSettingsView);