134 lines
4.3 KiB
JavaScript
Raw Normal View History

2016-08-18 11:41:13 +02:00
/*
* HomePage
*
* This is the first thing users see of our App, at the '/' route
2016-08-18 11:47:26 +02:00
*
* NOTE: while this component should technically be a stateless functional
* component (SFC), hot reloading does not currently support SFCs. If hot
* reloading is not a neccessity for you then you can refactor it and remove
* the linting exception.
2016-08-18 11:41:13 +02:00
*/
import React from 'react';
2016-09-25 21:54:59 +02:00
import { connect } from 'react-redux';
import { createStructuredSelector } from 'reselect';
2016-09-08 23:38:29 +02:00
import PluginHeader from 'components/PluginHeader';
2016-09-09 10:45:58 +02:00
import RightContentSectionTitle from 'components/RightContentSectionTitle';
import Container from 'components/Container';
2016-09-08 23:38:29 +02:00
import RightContentTitle from 'components/RightContentTitle';
2016-09-25 21:54:59 +02:00
import {
2016-09-26 17:28:40 +02:00
selectName,
2016-09-25 21:54:59 +02:00
selectLoading,
selectError,
} from 'containers/HomePage/selectors';
2016-09-26 17:28:40 +02:00
import {
loadGeneralSettings,
changeName,
updateGeneralSettings,
} from 'containers/HomePage/actions';
2016-09-25 21:54:59 +02:00
2016-09-08 23:38:29 +02:00
import styles from './styles.css';
2016-08-18 11:41:13 +02:00
2016-09-25 21:54:59 +02:00
export class HomePage extends React.Component {
componentDidMount() {
this.props.onPageLoad();
2016-09-26 17:28:40 +02:00
setTimeout(() => {
this.props.onFormSubmit();
}, 1000);
2016-09-25 21:54:59 +02:00
}
2016-08-18 11:41:13 +02:00
render() {
return (
2016-08-26 14:42:58 +02:00
<div>
2016-09-08 23:38:29 +02:00
<div className="container">
<PluginHeader></PluginHeader>
2016-09-09 10:45:58 +02:00
<Container>
<RightContentTitle title="General" description="Configure your general settings."></RightContentTitle>
<RightContentSectionTitle title="Application" description="The general settings of your Strapi application."></RightContentSectionTitle>
2016-09-26 17:28:40 +02:00
<form onSubmit={this.props.onFormSubmit}>
<div className={`form-group row ${styles.homePageRightContentFormGroup}`}>
<label htmlFor="applicationName" className="col-xs-7 col-form-label">Name</label>
<div className="col-xs-5">
<input
className="form-control"
type="text"
placeholder="My Application"
id="applicationName"
value={this.props.name}
onChange={this.props.onChangeAppName}
/>
</div>
2016-09-08 23:38:29 +02:00
</div>
2016-09-26 17:28:40 +02:00
<div className={`form-group row ${styles.homePageRightContentFormGroup}`}>
<label htmlFor="applicationDescription" className="col-xs-7 col-form-label">Description</label>
<div className="col-xs-5">
<input className="form-control" type="text" placeholder="A Strapi application" id="applicationDescription"></input>
</div>
2016-09-08 23:38:29 +02:00
</div>
2016-09-26 17:28:40 +02:00
<div className={`form-group row ${styles.homePageRightContentFormGroup}`}>
<label htmlFor="applicationVersion" className="col-xs-7 col-form-label">Version</label>
<div className="col-xs-5">
<input className="form-control" type="text" placeholder="0.0.1" id="applicationVersion"></input>
</div>
2016-09-08 23:38:29 +02:00
</div>
2016-09-26 17:28:40 +02:00
<button className="btn btn-primary" type="submit">
Submit
</button>
</form>
2016-09-09 10:45:58 +02:00
</Container>
2016-09-08 23:38:29 +02:00
</div>
2016-08-26 14:42:58 +02:00
</div>
2016-08-18 11:41:13 +02:00
);
}
}
2016-09-25 21:54:59 +02:00
HomePage.propTypes = {
// changeRoute: React.PropTypes.func,
// loading: React.PropTypes.bool,
// error: React.PropTypes.oneOfType([
// React.PropTypes.object,
// React.PropTypes.bool,
// ]),
2016-09-26 17:28:40 +02:00
name: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.bool,
]),
onPageLoad: React.PropTypes.func,
onFormSubmit: React.PropTypes.func,
2016-09-25 21:54:59 +02:00
// username: React.PropTypes.string,
2016-09-26 17:28:40 +02:00
onChangeAppName: React.PropTypes.func,
2016-09-25 21:54:59 +02:00
};
2016-09-26 17:28:40 +02:00
export function mapDispatchToProps(dispatch) {
return {
onChangeAppName: (evt) => dispatch(changeName(evt.target.value)),
onFormSubmit: (e) => {
e.preventDefault();
dispatch(updateGeneralSettings());
},
2016-09-25 21:54:59 +02:00
// changeRoute: (url) => dispatch(push(url)),
onPageLoad: (evt) => {
// if (evt !== undefined && evt.preventDefault) evt.preventDefault();
dispatch(loadGeneralSettings());
},
dispatch,
};
}
const mapStateToProps = createStructuredSelector({
2016-09-26 17:28:40 +02:00
// generalSettings: selectGeneralSettings(),
name: selectName(),
2016-09-25 21:54:59 +02:00
// username: selectUsername(),
// loading: selectLoading(),
// error: selectError(),
});
// Wrap the component to inject dispatch and state into it
export default connect(mapStateToProps, mapDispatchToProps)(HomePage);