diff --git a/client/modules/IDE/components/CollectionList.jsx b/client/modules/IDE/components/CollectionList.jsx index 9da68917..c967be63 100644 --- a/client/modules/IDE/components/CollectionList.jsx +++ b/client/modules/IDE/components/CollectionList.jsx @@ -187,7 +187,7 @@ class CollectionListRowBase extends React.Component { key={collection.id} > - + {renameOpen ? '' : collection.name} {renameOpen diff --git a/client/modules/User/components/Collection.jsx b/client/modules/User/components/Collection.jsx index 22ed85b9..0a467d96 100644 --- a/client/modules/User/components/Collection.jsx +++ b/client/modules/User/components/Collection.jsx @@ -7,15 +7,14 @@ import { connect } from 'react-redux'; import { Link } from 'react-router'; import { bindActionCreators } from 'redux'; import classNames from 'classnames'; -import * as ProjectActions from '../actions/project'; -import * as ProjectsActions from '../actions/projects'; -import * as CollectionsActions from '../actions/collections'; -import * as ToastActions from '../actions/toast'; -import * as SortingActions from '../actions/sorting'; -import * as IdeActions from '../actions/ide'; -import { getCollection } from '../selectors/collections'; +import * as ProjectActions from '../../IDE/actions/project'; +import * as ProjectsActions from '../../IDE/actions/projects'; +import * as CollectionsActions from '../../IDE/actions/collections'; +import * as ToastActions from '../../IDE/actions/toast'; +import * as SortingActions from '../../IDE/actions/sorting'; +import * as IdeActions from '../../IDE/actions/ide'; +import { getCollection } from '../../IDE/selectors/collections'; import Loader from '../../App/components/loader'; -import Overlay from '../../App/components/Overlay'; const arrowUp = require('../../../images/sort-arrow-up.svg'); const arrowDown = require('../../../images/sort-arrow-down.svg'); @@ -259,9 +258,13 @@ class Collection extends React.Component { } _renderCollectionMetadata() { + const { name, description, items, owner } = this.props.collection; + return ( -
-

{this.props.collection.description}

+
+

{name}

+

{items.length} sketches collected by {owner.username}

+

{description}

); } @@ -299,15 +302,11 @@ class Collection extends React.Component { const title = this.hasCollection() ? this.getCollectionName() : null; return ( - -
- - {this.getTitle()} - +
+ + {this.getTitle()} + +
{this._renderLoader()} {this.hasCollection() && this._renderCollectionMetadata()} {this._renderEmptyTable()} @@ -332,7 +331,7 @@ class Collection extends React.Component { }
- +
); } } @@ -343,7 +342,10 @@ Collection.propTypes = { authenticated: PropTypes.bool.isRequired }).isRequired, getCollections: PropTypes.func.isRequired, - collection: PropTypes.shape({}).isRequired, // TODO + collection: PropTypes.shape({ + name: PropTypes.string.isRequired, + description: PropTypes.string, + }).isRequired, username: PropTypes.string, loading: PropTypes.bool.isRequired, toggleDirectionForField: PropTypes.func.isRequired, diff --git a/client/modules/User/components/CollectionCreate.jsx b/client/modules/User/components/CollectionCreate.jsx index 3542e6a3..139982b5 100644 --- a/client/modules/User/components/CollectionCreate.jsx +++ b/client/modules/User/components/CollectionCreate.jsx @@ -41,7 +41,10 @@ class CollectionCreate extends React.Component { this.props.createCollection(this.state.collection) .then(({ id, owner }) => { - browserHistory.replace(`/${owner.username}/collections/${id}`); + const pathname = `/${owner.username}/collections/${id}`; + const location = { pathname, state: { skipSavingPath: true } }; + + browserHistory.replace(location); }) .catch((error) => { console.error('Error creating collection', error); @@ -58,42 +61,49 @@ class CollectionCreate extends React.Component { const invalid = name === '' || name == null; return ( -
+
{this.getTitle()} -
- {creationError && Couldn't create collection} -

- - - {invalid && Collection name is required} -

-

- -