import PropTypes from 'prop-types'; import React from 'react'; import { Helmet } from 'react-helmet'; import { connect } from 'react-redux'; import { browserHistory } from 'react-router'; import { bindActionCreators } from 'redux'; import * as CollectionsActions from '../../IDE/actions/collections'; import { generateCollectionName } from '../../../utils/generateRandomName'; class CollectionCreate extends React.Component { constructor() { super(); const name = generateCollectionName(); this.state = { generatedCollectionName: name, collection: { name, description: '' } }; } getTitle() { return 'p5.js Web Editor | Create collection'; } handleTextChange = field => (evt) => { this.setState({ collection: { ...this.state.collection, [field]: evt.target.value, } }); } handleCreateCollection = (event) => { event.preventDefault(); this.props.createCollection(this.state.collection) .then(({ id, owner }) => { const pathname = `/${owner.username}/collections/${id}`; const location = { pathname, state: { skipSavingPath: true } }; browserHistory.replace(location); }) .catch((error) => { console.error('Error creating collection', error); this.setState({ creationError: error, }); }); } render() { const { generatedCollectionName, creationError } = this.state; const { name, description } = this.state.collection; const invalid = name === '' || name == null; return (
{this.getTitle()}
{creationError && Couldn't create collection}

{invalid && Collection name is required}