73 lines
1.9 KiB
JavaScript
73 lines
1.9 KiB
JavaScript
// @flow
|
|
import React, { Component } from 'react';
|
|
import { observer } from 'mobx-react';
|
|
import Button from 'components/Button';
|
|
import Input from 'components/Input';
|
|
import HelpText from 'components/HelpText';
|
|
|
|
import Collection from 'models/Collection';
|
|
import CollectionsStore from 'stores/CollectionsStore';
|
|
|
|
@observer class CollectionNew extends Component {
|
|
props: {
|
|
history: Object,
|
|
collection: Collection,
|
|
collections: CollectionsStore,
|
|
onCollectionCreated: () => void,
|
|
};
|
|
state: { name: string, isSaving: boolean };
|
|
state = { name: '', isSaving: false };
|
|
|
|
static defaultProps = {
|
|
collection: new Collection(),
|
|
};
|
|
|
|
handleSubmit = async (ev: SyntheticEvent) => {
|
|
ev.preventDefault();
|
|
this.setState({ isSaving: true });
|
|
const { collection, collections } = this.props;
|
|
|
|
collection.updateData(this.state);
|
|
await collection.save();
|
|
collections.add(collection);
|
|
|
|
this.setState({ isSaving: false });
|
|
this.props.onCollectionCreated();
|
|
this.props.history.push(collection.url);
|
|
};
|
|
|
|
handleNameChange = (ev: SyntheticInputEvent) => {
|
|
this.setState({ name: ev.target.value });
|
|
};
|
|
|
|
render() {
|
|
const { collection } = this.props;
|
|
|
|
return (
|
|
<form onSubmit={this.handleSubmit}>
|
|
{collection.errors.errors.map(error => <span>{error}</span>)}
|
|
<HelpText>
|
|
Collections are for grouping your Atlas. They work best when organized
|
|
around a topic or internal team — Product or Engineering for example.
|
|
</HelpText>
|
|
<Input
|
|
type="text"
|
|
label="Name"
|
|
onChange={this.handleNameChange}
|
|
value={this.state.name}
|
|
required
|
|
autoFocus
|
|
/>
|
|
<Button
|
|
type="submit"
|
|
disabled={this.state.isSaving || !this.state.name}
|
|
>
|
|
{this.state.isSaving ? 'Creating…' : 'Create'}
|
|
</Button>
|
|
</form>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default CollectionNew;
|