p5.js-web-editor/client/modules/User/components/CollectionCreate.jsx

114 lines
3.5 KiB
React
Raw Normal View History

2019-07-09 16:24:09 +00:00
import PropTypes from 'prop-types';
import React from 'react';
import { Helmet } from 'react-helmet';
import { withTranslation } from 'react-i18next';
2019-07-09 16:24:09 +00:00
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as CollectionsActions from '../../IDE/actions/collections';
import { generateCollectionName } from '../../../utils/generateRandomName';
2020-04-26 10:43:58 +00:00
import Button from '../../../common/Button';
2019-07-09 16:24:09 +00:00
class CollectionCreate extends React.Component {
constructor() {
super();
const name = generateCollectionName();
this.state = {
generatedCollectionName: name,
collection: {
name,
description: ''
}
};
}
getTitle() {
return this.props.t('CollectionCreate.Title');
2019-07-09 16:24:09 +00:00
}
handleTextChange = field => (evt) => {
this.setState({
collection: {
...this.state.collection,
[field]: evt.target.value,
}
});
}
handleCreateCollection = (event) => {
event.preventDefault();
this.props.createCollection(this.state.collection);
2019-07-09 16:24:09 +00:00
}
render() {
const { generatedCollectionName, creationError } = this.state;
const { name, description } = this.state.collection;
const invalid = name === '' || name == null;
return (
2019-10-02 15:01:52 +00:00
<div className="collection-create">
2019-07-09 16:24:09 +00:00
<Helmet>
<title>{this.getTitle()}</title>
</Helmet>
2019-10-02 15:01:52 +00:00
<div className="sketches-table-container">
<form className="form" onSubmit={this.handleCreateCollection}>
{creationError && <span className="form-error">{this.props.t('CollectionCreate.FormError')}</span>}
2019-10-02 15:01:52 +00:00
<p className="form__field">
<label htmlFor="name" className="form__label">{this.props.t('CollectionCreate.FormLabel')}</label>
2019-10-02 15:01:52 +00:00
<input
className="form__input"
aria-label={this.props.t('CollectionCreate.FormLabelARIA')}
2019-10-02 15:01:52 +00:00
type="text"
id="name"
value={name}
placeholder={generatedCollectionName}
onChange={this.handleTextChange('name')}
/>
{invalid && <span className="form-error">{this.props.t('CollectionCreate.NameRequired')}</span>}
2019-10-02 15:01:52 +00:00
</p>
<p className="form__field">
<label htmlFor="description" className="form__label">{this.props.t('CollectionCreate.Description')}</label>
2019-10-02 15:01:52 +00:00
<textarea
className="form__input form__input-flexible-height"
aria-label={this.props.t('CollectionCreate.DescriptionARIA')}
2019-10-02 15:01:52 +00:00
type="text"
id="description"
value={description}
onChange={this.handleTextChange('description')}
placeholder={this.props.t('CollectionCreate.DescriptionPlaceholder')}
2019-10-02 15:01:52 +00:00
rows="4"
/>
</p>
<Button type="submit" disabled={invalid}>{this.props.t('CollectionCreate.SubmitCollectionCreate')}</Button>
2019-10-02 15:01:52 +00:00
</form>
2019-09-08 16:54:49 +00:00
</div>
2019-10-02 15:01:52 +00:00
</div>
2019-07-09 16:24:09 +00:00
);
}
}
CollectionCreate.propTypes = {
user: PropTypes.shape({
username: PropTypes.string,
authenticated: PropTypes.bool.isRequired
}).isRequired,
createCollection: PropTypes.func.isRequired,
t: PropTypes.func.isRequired
2019-07-09 16:24:09 +00:00
};
function mapStateToProps(state, ownProps) {
return {
user: state.user,
};
}
function mapDispatchToProps(dispatch) {
return bindActionCreators(Object.assign({}, CollectionsActions), dispatch);
}
export default withTranslation()(connect(mapStateToProps, mapDispatchToProps)(CollectionCreate));